AI-стартап Born, создающий приложения с виртуальными питомцами, выложил библиотеку для интеграции React Native с игровым движком Godot.

Библиотека react-native-godot позволяет запускать инстанс игрового движка с нужными параметрами и поддерживает вызовы API Godot из TypeScript/JavaScript.

Godot работает в отдельном потоке и не влияет на JavaScript-тред.

В репозитории есть папка с примером приложения и подробная инструкция по сборке и запуску.

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

‼️Критическая уязвимость в React Native CLI

В CLI есть пакет @react-native-community/cli-server-api, который используется для того, чтобы поднять локальный сервер Metro.

Проблема в том, что он слушает не только localhost, но и 0.0.0.0 и IPv6 [::], что делает его доступным в сети.

Вторая проблема, это open-url роут, который принимает JSON с полем url и передаёт его пакету open, который на Windows даёт полноценное выполнение команд, а на macOS/Linux запускает команды, но с более ограниченным контролем.

Комбинация этих двух уязвимостей даёт возможность удалённого запуска вредоносного кода.

Подробное описание уязвимости и способы пофиксить в статье.

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

Craby - Type-safe Rust for React Native

React Native даёт удобный мост между JS и нативом в виде TurboModules, но ObjCTurboModule/JavaTurboModule обёртки добавляют накладные расходы.

Craby решает эту проблему, убирая промежуточные слои и подключая Rust напрямую к C++ TurboModule.

Craby автоматически генерирует Rust/C++ биндинги из TypeScript схем, минуя ObjCTurboModule и JavaTurboModule.

Результат почти нулевые накладные расходы, типобезопасность на этапе компиляции и C++ уровень производительности.

✅ Когда стоит применять:

· Критические к производительности нативные модули (large-scale data processing, cryptographic operations, real-time parsing)

· Высокопроизводительно I/O с большим набором данных

❌ Когда не стоит:

· Модули со специфичными для платформы зависимостями

· Модули которым нужны функции TurboModule такие как event emitters (их заменяют signals), platform context access

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

Memory Ownership Models

С переходом на новую архитектуру JSI становится основным транспортным уровнем между нативным и JS-слоем.

Но как именно устроен этот транспорт на нативной стороне? И с какими проблемами сталкиваются разработчики нативных модулей, когда пытаются использовать ArrayBuffer для обмена бинарными данными?

Эта статья краткое введение в то, как работает управление памятью между JavaScript и Native, и введение в RFC по поддержке ArrayBuffer в TurboModules.

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

Worklets мощный движок для многопоточности

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

Чтобы обойти эту особенность, команда Software Mansion в рамках библиотеки Reanimated придумала концепцию Worklets.

Помечая функции директивой worklet, специальный Babel-plugin трансформирует их так, чтобы эти же функции можно было запускать в отдельном JS-рантайме.

Это позволяет выполнять тяжелые вычисления в отдельном потоке, не блокируя основной JS-поток.

Сейчас библиотека Worklets становится самостоятельной, и обновленный API позволяет использовать её напрямую в ваших проектах.

Подробнее об эволюции библиотеки и будущих планах - в докладе с React Universe или в более техническом выступлении с митапа SWM.

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

New DevTools

В RN 0.83 завезли новые инструменты разработчика которые помогут разобраться почему тормозит сгенерированный курсором ваш код

Подробнее об этом читайте в документации о React Performance tracks или посмотрите выступление Руслана на React Conf

DevTools можно попробовать и в более ранних версиях RN, но стабильность и работоспособность не гарантируется. Инструкция тут

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

36x faster Metro transforms

Facetpack проект на основе Oxidation Compiler (набор инструментов написаных на Rust для работы с JS и TS) ускоряющий сборку JS бандла

У меня на проекте пока не завелось, но на Reddit отзывы позитивные

Интеграция в пару строк поэтому рекомендую попробовать

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

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 | Навигация по каналу