React Native Enriched

EnrichedTextInput - rich text editor компонет построенный на базе uncontrolled input.

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

Поддерживает:

· стилизацию
· html парсинг
· инлайн изображения

Работает только с new architecture.

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

The Past, Present & Future of Nitro

Если вы еще не знакомы с NitroModules, то выступление её создателя на конференции CallStack, отличный шанс начать знакомство и, возможно, попробовать реализовать что-то у себя.

Из видео вы узнаете причины создания ещё одного фреймворка для нативных модулей,
технические детали реализации, почему используется jsi::NativeState и зачем нужен Nitrogen.

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

Nitro Fetch

В продолжение темы Nitro Modules пример на видео показывает, как даже с использованием новой архитектуры Nitro Modules позволяют сократить расходы на сериализацию уже на уровне JSI.

Nitro Fetch реализует fetch-совместимый интерфейс. Для нативной реализации используется Cronet для Android и URLSession для iOS.

Поддерживает HTTP/2, QUIC, Brotli (но не поддерживает стриминг и WebSockets).

Функции Prefetching и возможность запуска парсинга результата ответа на Worklets позволяют не блокировать JS-поток во время работы с сетью.

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

С новым релизным циклом React Native старая архитектура скоро лишится поддержки

Подробнее о пути к RN 1.0, новой системе релизов и тестирования смотрите в видео

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

Best Practices of using WebSockets

Планируете или уже используете WebSockets в своих приложения?

Эта статья поможет вам оптимизировать работу на стороне RN

Внутри вы найдете пример реализации Singleton WebSocket Service

Способы работы с reconnection

Offline Support и много других полезных приемов

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

Если вам вдруг не зашел Liquid Glass то вот подробная инструкция как минимизировать его влияние на всех платформах от macOS и iOS до tvOS

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

React Native Harness

Unit-тесты в React Native выполняются в среде Node.js, что ограничивает их возможности. Они не видят нативную часть приложения и не могут протестировать поведение модулей, зависящих от iOS/Android.

Можно, использовать E2E-тесты (Detox, Maestro), но их написание и поддержка обходятся дорого.

Например, если нужно протестировать работу нативного модуля, требуется пройти длинный путь в UI и процесс становится медленным и неудобным.

Команда Callstack предложила элегантное решение

React Native Harness - фреймворк, который позволяет запускать unit-тесты поверх реального приложения, прямо на симуляторе или устройстве.

Как это работает:

1️⃣ С помощью Babel-плагина собирается специальный JS-bundle, который вместо обычного UI запускает Harness Test Runner
2️⃣ Runner выполняет тесты с расширением harness
3️⃣ Результаты выполнения передаются в CLI в формате, совместимом с Jest reporter

Синтаксис написания тестов повторяет Jest, поэтому самое написание тестов не вызовет никаких проблем.

PS: 2-х часовое видео с live coding примерами написания и запуска тестов с помощью Harness

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

Render → Commit → Mount

Чтобы отрисовать JavaScript на нативной платформе, современный React Native проходит несколько фаз рендеринга от вычисления виртуального дерева до отображения UI-компонентов на экране.

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

В этом видео пошагово показано, как JS превращается в UI компоненты,
и на примерах из исходников React Native вы сможете увидеть,
где именно происходят фазы Render, Commit и Mount.

Это отличный способ глубже понять архитектуру RN и увидеть, как работают React Fiber, Fabric и JSI на практике.

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

🚀 Ускоряем локальные билды React Native на 75%

В официальной документации React Native есть отличная страница с инструкциями, как ускорить локальные сборки.

Например, флаг --active-arch-only позволяет собирать Android-приложение только для одной архитектуры той, на которой вы тестируете, вместо всех четырёх.

На iOS, начиная с версии 0.80, можно включить Precompiled React Native for iOS, чтобы пропустить фазу сборки C++ исходников RN.

Иногда причина медленной сборки кроется не в самом React Native, а в сторонних библиотеках. Чтобы разобраться, что именно тормозит процесс, используйте этот гайд.

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

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/