Forwarded from React Native World
🦄 Вышел Unistyles 3.0 и это новое слово в стилизации для React Native
Используя преимущества новой архитектуры, такие как интеграция с Fabric и взаимодействие с Shadow Tree, разработчики смогли перенести большую часть работы со стилями на сторону C++ и избежать ре-рендеров, а также дополнительных обёрток компонентов на стороне JS.
Как это работает?
Вместо того чтобы вычислять стили в рантайме и применять их через ре-рендер компонента с новым объектом стиля, Unistyles использует совершенно иной подход:
1️⃣ Babel-плагин анализирует стили на этапе сборки и конвертирует код в формат, подходящий для работы с ShadowNode. Примеры трансформаций можно найти в документации.
2️⃣ На основе анализа генерируются:
— C++ представление стилей (StyleSheetRegistry),
— биндинги для View (ShadowRegistry), к которым эти стили применяются.
Внутри приложения вы всё так же работаете с объектом StyleSheet как с обычным JS-объектом. Но магия начинается, когда стили нужно изменить!
Что происходит при изменении стилей?
Например, при:
— нажатии на кнопку которая вызывает изменения стиля,
— переключении в dark mode,
— обновлении настроек Accessibility.
Unistyles поддерживает 14 различных событий, которые вызывают обновление стилей. После получения события библиотека вычисляет новое состояние стилей и, благодаря ShadowRegistry, применяет их напрямую на нативной стороне, без ре-рендеров.
Полный список всех новых функций можно посмотреть на официальном сайте.
* важно новый unistyles работает только на RN 0.76+ и только с новой архитектурой
@react_native_world
Используя преимущества новой архитектуры, такие как интеграция с Fabric и взаимодействие с Shadow Tree, разработчики смогли перенести большую часть работы со стилями на сторону C++ и избежать ре-рендеров, а также дополнительных обёрток компонентов на стороне JS.
Как это работает?
Вместо того чтобы вычислять стили в рантайме и применять их через ре-рендер компонента с новым объектом стиля, Unistyles использует совершенно иной подход:
1️⃣ Babel-плагин анализирует стили на этапе сборки и конвертирует код в формат, подходящий для работы с ShadowNode. Примеры трансформаций можно найти в документации.
2️⃣ На основе анализа генерируются:
— C++ представление стилей (StyleSheetRegistry),
— биндинги для View (ShadowRegistry), к которым эти стили применяются.
Внутри приложения вы всё так же работаете с объектом StyleSheet как с обычным JS-объектом. Но магия начинается, когда стили нужно изменить!
Что происходит при изменении стилей?
Например, при:
— нажатии на кнопку которая вызывает изменения стиля,
— переключении в dark mode,
— обновлении настроек Accessibility.
Unistyles поддерживает 14 различных событий, которые вызывают обновление стилей. После получения события библиотека вычисляет новое состояние стилей и, благодаря ShadowRegistry, применяет их напрямую на нативной стороне, без ре-рендеров.
Полный список всех новых функций можно посмотреть на официальном сайте.
* важно новый unistyles работает только на RN 0.76+ и только с новой архитектурой
@react_native_world
🔥7
ReactNative и что-то остальное
Всем привет! Сегодня поговорим про unit-тесты и интеграционные тесты в RN. Я решил для начала пройтись по тому что существует в этой теме, а потом во что-то конкретное можно и углубиться 🤔 Итак, погнали чуть по теории Unit-тесты vs интеграционные тесты…
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
GitHub - callstack/react-native-testing-library: 🦉 Simple and complete React Native testing utilities that encourage good testing…
🦉 Simple and complete React Native testing utilities that encourage good testing practices. - callstack/react-native-testing-library
🔥2
ReactNative и что-то остальное
По количеству реакций был выбран React Testing Library (RTL) Скоро ждите пост по этому инструменту 😘
Please open Telegram to view this post
VIEW IN TELEGRAM
😁6
ХО-ХО-ХО 🎉
Привет, падпищеки! Хотел сказать спасибо всем кто был тут со мной в этом году, вы супер!
За этот год много чего сделали, много чего поковыряли и много в чем разобрались. Хотел в эти дни добить материал по тестированию, но понял что оно нахуй никому не нужно в конце года.
Так что вернусь в следующем!
Желаю вам всем заниматься тем, чем кайф, расти и развиваться. И не забывать отдыхать
А закинуть автору на мандаринки вы можете по этой ссылке или в закрепе канала 💅
Обнял, stay tuned in 2025😘
Привет, падпищеки! Хотел сказать спасибо всем кто был тут со мной в этом году, вы супер!
За этот год много чего сделали, много чего поковыряли и много в чем разобрались. Хотел в эти дни добить материал по тестированию, но понял что оно нахуй никому не нужно в конце года.
Так что вернусь в следующем!
Желаю вам всем заниматься тем, чем кайф, расти и развиваться. И не забывать отдыхать
А закинуть автору на мандаринки вы можете по этой ссылке или в закрепе канала 💅
Обнял, stay tuned in 2025
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤7👍3
Всем привет!
Надеюсь у всех качественно прошли каникулы и вы набрались сил🥲
Я наконец нашел время, что бы разобраться с React Testing Library (RTL) и подготовить материал.
Погнали!
В посте выше уже была информация про установку либы + пример. Так что мы пойдем сразу дальше.
Посте установки, попробовал запустить тесты и сразу же получил ошибку: Jest encountered an unexpected token
В доке ничего внятного не нашел, вроде бы все сделал, что необходимо. Пошел смотреть базовый пример в репозитории проекта.
Добавил необходимые конфиги по примеру, все взлетело. Теперь переходим к самим тестам//
У нас будет 3 примера:
1. Проверяем, что вызов функции onPress происходит при нажатии на кнопку.
2. Симулируем ввод текста в текстовое поле.
3. Проверяем успешную отрисовку данных после их загрузки.
После написания тестов, запускаем
Тесты пройдены – вы великолепны!
RTL работает поверх Jest, но отличие их в том, что в RTL основное внимание уделяется тестированию поведения приложения с точки зрения пользователя (клики, ввод текста и проверка визуального отображения)
Для этого нам упростили поиск элементов с помощью методов, основанных на доступности: getByText, getByRole, getByLabelText и т. д.
лайк, шер, репост + в карму💜
⚡️ReactNative и что-то остальное
Надеюсь у всех качественно прошли каникулы и вы набрались сил
Я наконец нашел время, что бы разобраться с React Testing Library (RTL) и подготовить материал.
Погнали!
В посте выше уже была информация про установку либы + пример. Так что мы пойдем сразу дальше.
Посте установки, попробовал запустить тесты и сразу же получил ошибку: Jest encountered an unexpected token
В доке ничего внятного не нашел, вроде бы все сделал, что необходимо. Пошел смотреть базовый пример в репозитории проекта.
Добавил необходимые конфиги по примеру, все взлетело. Теперь переходим к самим тестам//
У нас будет 3 примера:
1. Проверяем, что вызов функции onPress происходит при нажатии на кнопку.
2. Симулируем ввод текста в текстовое поле.
3. Проверяем успешную отрисовку данных после их загрузки.
После написания тестов, запускаем
yarn test/npm run test
> rtlexample@1.0.0 test
> jest
PASS components/__tests__/Button.test.tsx
PASS components/__tests__/InputField.test.tsx
PASS components/__tests__/PostList.test.tsx
Test Suites: 3 passed, 3 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 0.835 s, estimated 1 s
Ran all test suites.
RTL работает поверх Jest, но отличие их в том, что в RTL основное внимание уделяется тестированию поведения приложения с точки зрения пользователя (клики, ввод текста и проверка визуального отображения)
Для этого нам упростили поиск элементов с помощью методов, основанных на доступности: getByText, getByRole, getByLabelText и т. д.
лайк, шер, репост + в карму
⚡️ReactNative и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤3🔥2👏1
Интересно бы было попробовать текстовое распознавание в React Native? 👍
Есть одна идея, хоть и не новая (тыц), но результат будет, кажется, довольно полезным и для процесса и по итогу.
Пишем аппку на RN под обе платформы, с помощью которой можно будет сканить чеки из заведений и делить их между людьми, сохранять историю, вносить данные вручную и тд.
Все довольно просто и понятно, кроме как раз самого распознавания. С ним то я и хочу поразбираться. Какие есть решения на данный момент и как они работают.
А если решения не подойдут, сделать свое с блэкджеком и..MLKit
⚡️ReactNative и что-то остальное
Есть одна идея, хоть и не новая (тыц), но результат будет, кажется, довольно полезным и для процесса и по итогу.
Пишем аппку на RN под обе платформы, с помощью которой можно будет сканить чеки из заведений и делить их между людьми, сохранять историю, вносить данные вручную и тд.
Все довольно просто и понятно, кроме как раз самого распознавания. С ним то я и хочу поразбираться. Какие есть решения на данный момент и как они работают.
А если решения не подойдут, сделать свое с блэкджеком и..
⚡️ReactNative и что-то остальное
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥8
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥16
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥13👨💻1
ReactNative и что-то остальное
Йо! Досматриваю серию сорвиголовы и попробую запустить стримчанский
stay tuned 💅
stay tuned 💅
1👍2
Pebble
The Finest In Wearable Gadgets
Get a new Pebble smartwatch or ring right here
Немного оффтопа, но это были лучшие умные часы эвэр!
Рад что основатель Pebble даже спустя 10 лет не оставил эту идею и будет делать что-то новое + гугл уже опубликовали исходный код ос
мэйк пэббл грейт эгейн
https://repebble.com/
Рад что основатель Pebble даже спустя 10 лет не оставил эту идею и будет делать что-то новое + гугл уже опубликовали исходный код ос
мэйк пэббл грейт эгейн
https://repebble.com/
1👍3
This media is not supported in your browser
VIEW IN TELEGRAM
😁7👾2
привет, падпищеки!
немногоотговорок апдейтов по каналу, стримам и проекту
🔘 канал жив, просто большой загруз по работе из-за которого нет времени на все остальное
🔘 сейчас активно готовлю апдейт приложения по F1 к началу нового сезона
🔘 стримы по проекту будут, жду новую железку, потому что текущая с трудом тянет все вместе (дада, час ждали пока запуститься эмулятор на тестовом стриме)
всех обнял, всем хорошей пятницы😁
немного
всех обнял, всем хорошей пятницы
Please open Telegram to view this post
VIEW IN TELEGRAM
2❤5
по распознаванию чеков будем пробовать завести вот это 👇
как раз Object Detection то что нам нужно
спасибо @kirilln0v за наводку
как раз Object Detection то что нам нужно
спасибо @kirilln0v за наводку
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥4
Forwarded from React Native World
Бенчмарки для запуска моделей на девайсе с помощью ExecuTorch
Swmansion обновили документацию и представили бенчмарки для 4 типов ML-моделей, которые можно запускать на устройстве:
- Classification
- Object Detection
- Style Transfer
- LLMs
Три ключевых бенчмарка:
- Размер модели
- Использование памяти
- Скорость инференса
Запуск моделей на телефонах с помощью RN - уже реальность 🚀
React Native World | Навигация по каналу
Swmansion обновили документацию и представили бенчмарки для 4 типов ML-моделей, которые можно запускать на устройстве:
- Classification
- Object Detection
- Style Transfer
- LLMs
Три ключевых бенчмарка:
- Размер модели
- Использование памяти
- Скорость инференса
Запуск моделей на телефонах с помощью RN - уже реальность 🚀
React Native World | Навигация по каналу
3👍4
Forwarded from React Native World
Второй релиз RN за год — так и до 1.0 дойдем!
Основные фичи 0.78:
· Поддержка React 19
· Упрощенная интеграция с React Compiler
· ReactNativeFactory на iOS — упрощает интеграцию RN в существующие нативные приложения, позволяя запускать RN без внесения изменений в AppDelegate.
· Поддержка Android XML drawables в качестве source для изображений
· Вернули логи в Metro
*Обещают держаться темпа небольших релизов.
Подробнее: React Native 0.78
React Native World | Навигация по каналу
Основные фичи 0.78:
· Поддержка React 19
· Упрощенная интеграция с React Compiler
· ReactNativeFactory на iOS — упрощает интеграцию RN в существующие нативные приложения, позволяя запускать RN без внесения изменений в AppDelegate.
· Поддержка Android XML drawables в качестве source для изображений
· Вернули логи в Metro
*Обещают держаться темпа небольших релизов.
Подробнее: React Native 0.78
React Native World | Навигация по каналу
2🔥6