React Native Tailwind

Для использования Tailwind в приложениях RN нужны дополнительные библиотеки например NativeWind или Uniwind.

Каждая из них добавляет свой оверхед на рантайм, что может отразиться на производительности сложных UI.

React Native Tailwind предлагает подход при котором компиляция стилей происходит на билдтайм с помощью babel плагина, без каких либо зависимостей от самой библиотеки Tailwind

Классы компилируются в стили StyleSheet с поддержкой динамических стилей.

· Почти нулевой footprint на размер бандла
· Более быстрый старт приложения за счет отсутствие парсинга на runtime
· StyleSheet only - нативная производительность для стилей

Есть поддержка анимаций (но пока только с помощью RN Animations)

React Native World | Навигация по каналу

пояснительная бригада от создателя Unistyles

Последний год мы с моим другом пилили сервис, в котором уже более тысячи пользователей, и сегодня мы выпустили важный апдейт на Reddit, над которым работали последние полгода.

Буду очень благодарен, если вы поставите upvote, так как это заметно повысит видимость поста внутри треда.

https://www.reddit.com/r/reactnative/comments/1qcv62b/we_build_lightspeed_ota_for_react_native_without/

не знаю как насчет агентских скилов, но почитав эти доки свои вы точно подтяните

React Native World | Навигация по каналу

Очень много интересных инсайтов можно почерпнуть из отчёта Artsy о работе, которую они проделали над своим приложением за прошедший год.

Большую ценность ему придаёт то, что вся разработка и принимаемые решения в виде RFC находятся в их GitHub репозитории, что позволяет буквально воспроизвести реализацию той или иной фичи.

А если вы разработчик и хотите расти в сторону руководителя разработки или CTO, то в этом отчёте можно увидеть широкий спектр задач, решаемых помимо написания кода: DX, Performance, Observability, Testability и т.д.

React Native World | Навигация по каналу

Open Source альтернатива Sentry

Rejourney проект с полностью открытой кодовой базой как серверной так и SDK

Помимо Crash/ANR SDK поддерживает:

• реплей сессий
• аналитику навигации
• мониторинг производительности API
• heatmap нажатий и глубины прокрутки

Размер SDK всего лишь 1.6 мегабайт. В блоге подробно описаны инженерные решения для записи сессий, почему они отличаются от Posthog и Logrocket и показывают лучшую производительность

React Native World | Навигация по каналу

React Native NumberFlow

Реализация web-версии библиотеки NumberFlow для RN.

Одной из наиболее интересных для меня функций является реализация рендеринга на Skia, так как Reanimated 4 пока содержит много проблем, особенно при работе со списками.

Подробная документация и примеры доступны по ссылке.

React Native World | Навигация по каналу

Для того чтобы организовать полностью автономный цикл разработки с помощью LLM-агентов, таких как Codex, Claude, OpenCode и т.д., необходимо обеспечить агентам обратную связь от вашего приложения.

Я экспериментировал с несколькими решениями и вот мой топ:

• Agent Device: iOS & Android automation for AI agents
• AXe automation для iOS Simulator

Для Android, на удивление, отлично работает обычная утилита adb: она умеет делать скриншоты, симулировать жесты даже на реальном устройстве и снимать метрики производительности, например с помощью команды top

React Native World | Навигация по каналу

High-performance icon rendering

В новом проекте я обнаружил, что для SVG-иконок используется библиотека react-native-svg.

Я уже писал о том, почему это не лучшее решение и чем можно её заменить.

Nano icons более эффективный подход с точки зрения производительности: он компилирует SVG в TTF-шрифты и создаёт JS-маппинги, что позволяет добиться максимальной скорости рендеринга с минимальным overhead на обоих потоках.

В итоге:
• constant cost на иконку, независимо от сложности SVG
• почти нулевой overhead при списках (100+ иконок)
• нативная скорость, как у текста

Bonus: подробнейший документ с архитектурными решениями для этой библиотеки

React Native World | Навигация по каналу

На прошлой неделе компания Margelo - создатели таких библиотек, как NitroModules, VisionCamera и множества других не менее популярных решений для RN начали активно вести свой блог.

Вот несколько интересных статей:

• улучшение производительности анимаций в Android-приложении Discord
• ускорение JSI, часть 1 и 2
• работа с QR-кодами в VisionCamera

И раз уж зашла тема про блоги и ресурсы, поделюсь списком того, что я активно читаю.

📧 Рассылки:

• This Week in React - лучшая еженедельная рассылка про React Native
• React Native Newsletter - ежемесячная рассылка от InfiniteRed (также у них есть еженедельный подкаст RN Radio)
• JavaScript Weekly - всё интересное из мира JS за неделю

✍️ Блоги:

• Callstack - много статей о производительности и проблемах, с которыми компания сталкивается у своих клиентов
• Software Mansion - блог создателей Reanimated
• Expo - в основном интересны статьи от приглашённых авторов
• Andrei Calazans - в последнее время много пишет про профайлинг RN
• r/reactnative - тред на Reddit с сортировкой по top за неделю

React Native World | Навигация по каналу

Подборка интересных статей о производительности Skia и Reanimated

Which React Native Animation Library Should You Use for Performance?

Сравнение трёх подходов к анимациям: Reanimated, Animated API и react-native-ease.

Главный вывод: универсального решения не существует, несмотря на распространённое мнение, что Reanimated это решение для любых задач.

Chasing a Phantom Jump: How We Made Pingo's Animations Smooth on Low-End Android

Подробный разбор того, как авторы профилировали и оптимизировали сложные анимации на React Native Skia для слабых Android-устройств.

Много практических приёмов по поиску узких мест и повышению плавности.

My iPhone 16 Pro Stuttered but the S24 Felt Smoother: A React Native Skia Hunt

Очень интересный кейс о том, как автор исследовал проблему с производительностью Skia shader-анимации на iPhone 16 Pro.

Статья показывает весь процесс профилирования GPU, поиска причины микрофризов и оптимизации, которая позволила добиться стабильных 120 FPS.

React Native World | Навигация по каналу

How Worklets Bundle Mode accidentally fixed Hermes V1 memory regression

А вот и подробный разбор проблемы с Hermes V1 с потенциальными фиксами.

React Native World | Навигация по каналу

https://shopify.engineering/shop-app-migration

немного технический деталей о том чего удалось добиться shopify с помощью миграции на нативку

от себя добавлю - несколько месяцев назад я написал статью где по показателю startup time на iOS получилось приблизиться к 1 секунде для cold start. Больше деталей в статье

что же касается ошибок - 90+ процентов нативных крашей и memory warning были как раз из-за комбинации skia + reanimated

React Native World | Навигация по каналу

GPU accelerated trading charts

Хочу поделиться библиотекой, над которой работаю последнее время.

Для candlestick-графиков в React Native обычно используют два решения:

• WebView, внутри которого работают web-версии библиотек вроде tradingview, klinecharts или liveline
• Решения на базе Skia, например react-native-livechart

В случае с WebView есть две основные проблемы. Первая TTI: при открытии мы всегда тратим время на парсинг HTML, CSS и JS. А если открываем не локальный bundle, добавляются ещё и сетевые расходы. Вторая это расход ресурсов на параллельном процессе который запускает WebView.

Skia, хотя и является очень оптимизированным 2D-рендеринг-движком общего назначения, в связке с Reanimated может потреблять довольно много CPU и памяти, что приводит к нагреву устройства и повышенному расходу батареи.

В react-native-trading-charts я реализовал архитектуру, в которой все расчёты выполняются в общем C++ engine, а получившийся вектор передаётся в платформенный shader, который отрисовывает графику через Metal или OpenGL ES.

В результате удалось добиться минимальной нагрузки на CPU как на UI, так и на JS thread и сохранить плавный скролл даже при большом количестве свечей.

Если вы строите trading UI на React Native буду рад feedback, особенно по фичам, которых вам сейчас не хватает.

GitHub: react-native-trading-charts

React Native World | Навигация по каналу