Опубликованы результаты State of ReactNative 2024

https://results.2024.stateofreactnative.com/

Мне нравится сортировать библиотеки по полю Never Heard of It и смотреть, сколько таких решений есть у меня в проекте. 😁

Длинный разбор и сравнение с предыдущим годом от Callstack если любите такой формат.

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

Холодный старт Metro быстрее в 3-5 раз одной настройкой

В новой версии Metro 0.81.2 появился экспериментальный lazy режим хеширования файлов.

Разработчики обещают, что это ускорит холодный старт в крупных проектах в 3-5 раз, с минимальным замедлением первой сборки (<2%).

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

Metro теперь считает SHA1-хеш только для файлов, которые реально попадают в сборку (обычно это менее 5% от всех node_modules). Таким образом, работа сокращается в разы, а также уменьшается нагрузка на файловую систему, что поможет избежать ошибок типа «too many open files».

Попробовать фичу можно уже сейчас:

config.watcher.unstable_lazySha1 = true;

Важно: фича экспериментальная, не входит в semver и может измениться в будущем. Но уже стоит того, чтобы попробовать!

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

React Native Legal 🧑‍⚖️ - автоматическая генерация лицензий

Сегодня расскажу о полезной библиотеке: react-native-legal

Это инструмент, который сам собирает и формирует список лицензий всех open-source зависимостей, используемых в вашем приложении.

Что умеет:

· Полностью автоматическая генерация списка лицензий без дополнительной настройки
· Поддержка Expo приложений через config плагин
· Поддержка проектов на Community CLI
· Работает на iOS, Android, tvOS и AndroidTV

Зачем это нужно:

Указывать лицензии сторонних библиотек - не только хорошая практика, но и юридическое требование во многих странах

Под капотом используются нативные библиотеки:

AboutLibraries - для Android
LicensePlist - для iOS

⚠️ Сейчас react-native-legal проверяет только прямые зависимости. Поддержка рекурсивной проверки всех уровней зависимостей в планах на будущее.

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

Работа с Android edge-to-edge

Начиная с версии Android 15 (API level 35) функция edge-to-edge будет включена на всех приложениях по умолчанию.

На iOS уже давно реализован подобный подход, теперь UI на обоих платформах будет более консистентным.

react-native-edge-to-edge упрощает подключение режима edge-to-edge

· Автоматически включает прозрачный статус-бар и навигационный бар
· Позволяет удобно управлять стилями системных панелей через специальный компонент SystemBars
· Позволяет выбрать готовую «тему» для Android, не тратя время на ручное изменение styles.xml

⚠️ Перед использованием внимательно изучите возможные конфликты с другими библиотеками для работы с StatusBar или KeyboardAvoidingView

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

Turbo Modules

Недавно на проекте мне пришлось погрузиться в работу Turbo Modules (даже сделал небольшой пул-реквест в React Native).

Информации по этой теме сейчас немного, поэтому решил собрать тут полезные материалы, которые встретились мне на просторах сети.

📖 Базовые материалы:

Официальная документация: Native Modules

Turbo Module может быть как под конкретную платформу Android/iOS (введение), так и кроссплатформенный на C++ (Pure C++ Modules).

Почему-то Codegen в документации вынесен в отдельную главу, хотя является неотъемлемой частью генерации Turbo Modules, так как именно с помощью Codegen на основе типов (спецификации Turbo Modules) генерируются биндинги (как раз в нем я и нашёл баг).

Чтобы правильно объявлять типы, нужно перейти в отдельный раздел документации и посмотреть, как они мапятся между TypeScript и целевой платформой: Codegen Typings

Документация по работе с событиями: Event Emitting Capabilities

📺 Видео с примерами создания Turbo Modules:

· Modern C++ Turbo Module Tutorial
· How to build a React Native C++ Turbo Module (iOS)
· How to build a React Native C++ Turbo Module (Android)
· Learn React Native iOS Turbo Modules by Building a Photo Picker with Swift

👨🏻‍🏫 Свежие гайды:

· Guide to React Native modules
· Build Native and Turbo Modules in React Native with Swift
· Build a custom React Native Turbo Module for Android (Kotlin)

Вы можете создавать Turbo Module как часть вашего приложения, так и в виде отдельной библиотеки. Для библиотеки удобно использовать шаблон, который генерируется, например, с помощью React Native Builder Bob

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

🔥 Подробнейший гайд по запуску LLM-моделей с помощью llama.rn

В статье на HuggingFace пошагово создаётся мобильное приложение - чaт с возможностью выбора модели, поставляемой вместе с бандлом, либо загрузкой модели из облака.

Гайд максимально подробный: начиная от выбора подходящих моделей и настройки окружения, заканчивая реализацией загрузки моделей, написанием UI и взаимодействием с LLM.

Также доступна ссылка на исходники проекта

В тему запуска LLM, я уже писал про проект Executorch. У них вышла новая версия 0.3 в которую добавили:

🗣️ Speech to Text – с помощью Whisper и Moonshine
📖 OCR – извлечения текста из изображений.
🚀 Поддержка MPS – оптимизированное выполнение моделей на iOS с использованием Metal Performance Shaders
⚡ Hookless API – запуск моделей вне компонентов React для большей гибкости
🧠 История сообщений для LLM – предоставление моделям контекста переписки
⬇️ Фоновая загрузка моделей – бесшовное скачивание моделей в фоне
📊 Бенчмарки – получение данных о производительности AI-моделей
🧭 Roadmap для версии 0.4

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

А нужен ли вам react-native-noscript?

Подробный разбор от создателей react-native-noscript с кейсами, когда действительно стоит использовать эту библиотеку.

Если кратко - почти никогда 😅

Дело в том, что react-native-noscript представляет ваш SVG как набор React-узлов (есть два подхода реализации). И это может стать реальной проблемой для производительности, потому что количество узлов может доходить до сотен.

Поэтому стоит заранее подумать, как именно вы используете SVG:

· Если нужно просто отображать SVG как картинку или иконку, лучше использовать Expo Image, сделать иконки шрифтом или конвертировать SVG в растровое изображение

· Если SVG анимированный, стоит обратить внимание на Lottie или Rive

· Также альтернативой могут быть react-native-skia или react-native-vector-image

Единственный случай, когда стоит использовать react-native-noscript - если вам нужно управлять элементами SVG как React-компонентами.

Подробнее как устроен react-native-noscript в блоге swmansion

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

Making WebViews Feel Native

Статья от Shopify о том, как они улучшали работу с WebView внутри своих приложений по трём направлениям: производительность, внешний вид и интеграция с приложением.

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

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

WebGPU to React Native

Если вам нравятся презентации в стиле Apple - посмотрите это видео, в котором William Candillon презентует WebGPU для React Native и несколько инструментов, построенных на его основе.

🔋 Поддержка запуска Three.js, Compute Toys и TensorFlow.js с использованием WebGPU и TypeGPU

⚡️ Skia Graphite - новый бэкенд для Skia на базе WebGPU. Хотя он не добавляет новых фич, даёт значительный прирост производительности, глубокую интеграцию с Reanimated и поддержку новых платформ: tvOS, macOS и Node.

В презентации много примеров приложений, использующих Skia - например, Runna app, которую недавно приобрела Strava.

Приятного просмотра 😉

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

React Native MLC LLM

Ещё один фреймворк для запуска LLM на мобильном устройстве получил поддержку в React Native.

Библиотека react-native-ai объединяет возможность запуска моделей, скомпилированных с помощью MLC LLM, и работу с ними через Vercel AI SDK.

Что такое MLC LLM?

Это открытая система, которая с помощью методов компиляции машинного обучения (Apache TVM) превращает любой открытый LLM-модельный файл в высокопроизводительную библиотеку и запускает её на любой современной платформе - от серверных GPU до веб-браузера, iOS и Android. Главный компонент - MLCEngine - компилирует модель под конкретное «железо», а затем предоставляет единый интерфейс, совместимый с OpenAI API.

Что такое Vercel AI SDK?

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

Так как MLC LLM генерирует модели с API, совместимым с AI SDK, работа с моделями в React Native максимально упрощается.

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

AI агенты на TypeScript

Если вы, как и я, давно хотели попробовать написать собственного AI-агента, но не хотелось глубоко погружаться в разработку на Python (например, как в agno.com), то этот инструмент для вас.

mastra.ai — это современный open-source фреймворк для построения систем на базе LLM-моделей (Agents, RAG, Workflow automation) с поддержкой продакшн-фич, таких как метрики перформанса и трейсинг исполнения.

В документации — много примеров с реализацией различных сценариев.

От себя добавлю, что залог эффективной работы с LLM — это качественный промптинг. Недавно Google дропнули свежий гайд по этой теме.

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

Начался App.js Conf 2025

Расписание на ближайшие 2 дня:

📅 Day 1 – 29th May

Evan Bacon – Deploy everywhere with Expo Router
Aaron Grider – Expo on Orbit

Nico Corti & Riccardo Cipolleschi – Life After Legacy: The New Architecture Future
Jay Meistrich – Legend List: Optimizing for Peak List Performance
Kim Chouard – Mozart Never Had React Native: You Do
Krzysztof Magiera - Radon IDE – Code with Glee

Krzysztof Piaskowy – WebGPU === High performant 3D animations in React Native
Michael Blanchard – Scaling Enterprise CI/CD: A Migration Success Story
Alex Chou – The Next Evolution of the Party Invite is an App Clip
Anisha Malde & Łukasz Chludziński – The Bigger Picture

Mateusz Kopciński – Running Small Language Models on Your Phone with React Native & ExecuTorch
Saúl Sharma – Building React Native Apps with Premium Feel and Quality UX

📅 Day 2 – 30th May

Rafael Mendiola – Large-Scale React Native Development in the Age of AI
Sojin Park – Brownfield React Native at Scale
Keith Kurak – Embracing Native Code in Your Expo App

Alex Hunt – Towards a Stable JavaScript API
Delphine Bugner – Le Chat and a Brief History of Streaming
Enzo Manuel Mangano – Everybody can cook with React Native
Devlin Duldulao – TanStack Query in Expo apps: Improving DX and UX


Miłosz Filimowski – Let’s Go Live: React Native live streaming
Jacob Arvidsson – Building Secure React Native Apps
Laura Beatris – The Future of Authentication in React Native
Tomasz Sułkowski – Software Composing: Expo development for your PM

Kiryl Ziusko – Keyboard management evolution in React Native
Perttu Lähteenlahti – Unlocking Revenue: Monetizing with In-App Purchases

ссылка на стрим Day 1 - https://youtu.be/K2JTTKpptGs
ссылка на стрим Day 2 - https://youtu.be/UTaJlqhTk2g

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

❄️ Freezing the Legacy Architecture

С 2 июня 2025 года поддержка старой архитектуры официально завершается.

Что это значит:

· новая функциональность, багфиксы и патчи больше не будут поддерживаться в старой архитектуре

· некоторые критические фиксы всё ещё будут портироваться, но только если это будет затрагивать большое количество пользователей

· Interop Layers продолжит работать, но его поддержка будет постепенно сокращаться и в итоге отключится

· разработчики библиотек будут продолжать мигрировать на новую архитектуру

📌План действий, если вы ещё на старой архитектуре или версии RN:

· сделайте ревью зависимостей - например, с помощью: rn-chk-new-arch

· начните адаптацию приложения под новую архитектуру в отдельной ветке

· при миграции со старых версий лучше обновляться поэтапно: 75 → 76 → 77 → 78 - так проще отследить возможные критические проблемы, используйте upgrade-helper

· поиск альтернатив для библиотек, которые не поддерживают новую архитектуру: reactnative.directory

· при необходимости - пишите свою реализацию функционала через TurboModules

Удачной миграции 🙈

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

умирающий RN

+100 к аргументам в споре за пивком про RN vs Native

Научная статья сравнивающая RN и нативную разработку по множеству аспектов

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

Apple on-device LLM

На последнем WWDC Apple представила обновление для своих on-device AI-моделей, которые начиная iOS26 теперь можно использовать напрямую в приложениях.

Хотя Apple пока отстает в гонке больших языковых моделей, их on-device модель по бенчмаркам сопоставима с конкурентами. Главное - она уже встроена в систему, оптимизирована под железо, и вам не нужно встраивать в приложение отдельную модель весом 800+ МБ.

Для работы с LLM используется новый Foundation Models Framework. Модель заточена для генерации текста, поддержки диалога (например в играх), классификации и сумаризации. Более подробно в видео с демонстрацией возможностей

Есть ранний wrapper для React Native (очень сырая бета, но код простой и при желании функциональность можно расширить).

Для разработки потребуется Mac с процессором M1 и установленная beta macOS 26.0

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

Одно из преимуществ React Native - это система рендеринга, построенная вокруг нативных платформенных компонентов.

Если платформа вносит какие-то кардинальные изменения, например выкатывает обновление уровня Liquid Glass, в RN мы получаем максимально плавную миграцию.

Чего не скажешь о коллегах из Flutter - официально Liquid Glass поддерживаться не будет, хотите - идите и рисуйте сами 😅

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

Оптимизация старта iOS приложений

Команда Sentry и Emerge Tools (создают топовые инструменты для оптимизации перфоманса мобильных приложений) выпустили open source пакет FaultOrdering

Этот продукт позволяет автоматизировать технику Order Files

Когда приложение запускается на iOS, система загружает его код из binary-файла в оперативную память постранично, блоками по 16 КБ. Даже если используется небольшая часть страницы, вся страница целиком подгружается в память (это называется page fault).

Если при запуске важные символы (методы и классы) разбросаны по binary-файлу, возникает большое число page faults, что замедляет запуск. Техника Order Files решает эту проблему, группируя вместе символы, необходимые на старте, чтобы минимизировать число страниц памяти, которые нужно загрузить.

Технически для использования Order Files нужно создать текстовый файл, в котором будет описан порядок загрузки символов. Но здесь и кроется сложность - как сделать это оптимально.

FaultOrdering автоматически отслеживает вызовы функций и классов, необходимых для запуска приложения. Для этого:

1️⃣ В приложение динамически добавляются breakpoints на каждую функцию.

2️⃣ Приложение запускается в тестовом режиме (обычно через XCUITest).

3️⃣ Минималистичный встроенный дебаггер (SimpleDebugger) фиксирует срабатывание этих breakpoints.

Это позволяет собрать точные данные о том, какие функции вызываются при старте, без необходимости изменения кода или сборки приложения.

В результате приложения запускаются быстрее без изменений кода. Airbnb, Snapchat и Spotify уже используют Order Files и ускоряют запуск своих приложений на 20% и больше.

📈 В React Native приложениях Order Files даст заметную пользу, если приложение содержит много нативного кода или кастомных модулей, активно задействованных при старте

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

💸 Экономим на Expo билдах

Нашёл классный инструмент, который помогает генерировать GitHub Actions workflows и собирать Expo-приложения на бесплатном тарифе GitHub

Базовый тариф Expo за $19 в месяц даёт максимум:

· 30 билдов Android или
· 15 билдов iOS

С помощью expobuilder можно использовать 2000 бесплатных минут GitHub Actions, чего хватит примерно на:

· 200 Android билдов или
· 20 iOS билдов в месяц (macos использует бесплатные минуты x10)

🔧 Как это работает?

· с помощью expobuilder генерирует workflow, который использует expo-cli --local для сборки на раннерах GitHub
· нужен аккаунт в Expo и сгенерированный Expo Token
· даже если ты не знаком с GitHub Actions, следуя инструкции, можно с нуля настроить CI/CD пайплайн

🔐 Настройка секретов:

· базово нужен только EXPO_TOKEN
· для уведомлений и публикации в сторах - добавьте остальные ключи

☁️ Хранение билдов:

· артефакты сохраняются в GitHub Releases по умолчанию, но можно подключить своё хранилище

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