React Native World

Making WebViews Feel Native

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

React Native Optimization - The Ultimate Guide 2025

Вышел обновлённый гайд от компании Callstack, где собраны лучшие практики по оптимизации React Native приложений.

Гайд состоит из 3 частей:

1️⃣ JavaScript

- Оптимизации JavaScript и React-части React Native
- Профилирования JS и React, измерение FPS, memory leaks
- Uncontrolled & specialized components, state management, Concurrent React, Animations

2️⃣ Native

- Оптимизации нативной части React Native на iOS, Android и в C++
- Профилирование нативной части, измерение TTI, memory management, threading model
- View flattening, Dedicated SDKs, native modules, memory leaks

3️⃣ Bundling

- Компиляции ahead-of-time и методы упаковки как для JavaScript, так и для нативного кода
- Анализ JS и App bundle size
- Third-party libraries, barrel exports, tree-shaking, remote code loading, code shrinking, native assets folder, JS bundle compressions

Лучшее практическое руководство по перфомансу для React Native.

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

Холодный старт 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 | Навигация по каналу

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

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

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

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

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

До 50% прироста производительности одной строчкой конфига? 🤔

Звучит как кликбейт, но давайте разберёмся.

Итак, React Native Boost состоит из двух частей:

1️⃣ Babel-плагин, который применяет микрооптимизации к вашему коду. Оптимизации применяются только в том случае, если они не ломают логику приложения.

2️⃣ Рантайм-библиотека, которая оптимизирует код, когда это невозможно сделать на этапе сборки.

В текущей реализации оптимизации затрагивают два компонента: View и Text.

Идея в том, что эти компоненты — JS-обёртки над нативными TextNativeComponent и ViewNativeComponent. Они добавляют много кода для обработки краевых случаев, например View, вложенные в Text.

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

Кроме того, плагин генерирует рантайм-библиотеку, которая применяет оптимизации, невозможные на этапе сборки.

Установка и настройка:

// cli
npm install react-native-boost
// or expo
npx expo customize babel.config.js

// babel.config.js
module.exports = {
  plugins: ['react-native-boost/plugin'],
};

⚠️ Важно: плагин экспериментальный и возможно, может что-то сломать в вашем коде.

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

Shader Animation с использованием Skia

Skia позволяет создавать шейдеры, используя свой синтаксис, похожий на OpenGL, под названием SkSL (Skia Shading Language).

Пример работы с шейдерами:

import {Skia, Canvas, Shader, Fill} from "@shopify/react-native-skia";
 
const source = Skia.RuntimeEffect.Make(`
vec4 main(vec2 pos) {
  // normalized x,y values go from 0 to 1, the canvas is 256x256
  vec2 normalized = pos/vec2(256);
  return vec4(normalized.x, normalized.y, 0.5, 1);
}`)!;
 
const SimpleShader = () => {
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Fill>
        <Shader source={source} />
      </Fill>
    </Canvas>
  );
};

Поиграться с шейдерами можно в Playground, а на видео — пример реализации Shader для анимации кредитной карты на базе туториала.

В нём подробно описан процесс и ментальная модель создания подобных эффектов.

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

Бенчмарки для запуска моделей на девайсе с помощью ExecuTorch

Swmansion обновили документацию и представили бенчмарки для 4 типов ML-моделей, которые можно запускать на устройстве:

- Classification
- Object Detection
- Style Transfer
- LLMs

Три ключевых бенчмарка:

- Размер модели
- Использование памяти
- Скорость инференса

Запуск моделей на телефонах с помощью RN - уже реальность 🚀

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

React Native Bottom Tabs

Еще больше нативного опыта для наших пользователей.

Сегодня поговорим о замене react-navigation/bottom-tabs, реализованных на JS, на нативную реализацию от React Native Bottom Tabs.

Библиотека использует SwiftUI's TabView для iOS и BottomNavigationView для Android, что обеспечивает максимально близкий к нативному пользовательский опыт.

- Адаптация под UI платформы
- Анимации на уровне нативного компонента, что разгружает JS поток
- Автоматический scroll to top для вложенных ScrollView
- Поддержка Haptic Feedback из коробки
- Автоматическое избегание наложения в режиме Picture In Picture
- Адаптация под разные платформы (iPadOS, visionOS, tvOS)

Когда НЕ подойдет и стоит использовать JS Bottom Tabs:

- Если вам нужно полностью кастомизировать Bottom Tabs
- Если требуется кастомные, не системные элементы Bottom Tabs

Поддерживается интеграция с React Navigation и Expo Router.

Если вдруг пропустили, то существует также несколько нативных реализаций Bottom Sheet, о которых я писал тут и тут

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

Роль C++ в развитии JS-приложений будущего

Интересное видео от Oscar Franco — создателя op-sqlite и других библиотек для React Native. В нем он проводит увлекательную линию от старой архитектуры до Static Hermes, показывая на каждом этапе, с примерами библиотек, как и куда развивается React Native.

Я считаю важным для разработчиков на React Native понимать, в чем заключается проблематика и почему C++ все чаще используется для написания как ядра React Native, так и библиотек к нему.

Если хотите углубиться в корни этого вопроса, рекомендую выпуск подкаста «Подлодка» про интеропы, где подробно обсуждаются проблемы межъязыкового взаимодействия. После него вы точно лучше поймёте, какие проблемы решает команда React Native, а также другие фреймворки, такие как Flutter или KMP.

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

ShadowList и LegendList — альтернативы FlashList

В 2022 году FlashList прогремел и стал одной из главных альтернатив встроенному в React Native FlatList.
Благодаря применению recycling (подробно о котором я писал), удалось достичь значительной производительности.

Но время идет, баги копятся, а Shopify не спешит их решать. На этом фоне появляются интересные решения, которые могут исправить проблемы FlashList:

LegendList — решение, использующее оба подхода: виртуализацию и recycling. Реализовано полностью на JS поверх ScrollView. Имеет API, схожий с FlatList, и обладает набором уникальных функций:

- Dynamic item sizes
- Optional recycling и recycling hooks
- Bidirectional infinite lists
- Chat list without inverting
- Maintain content view position

ShadowList — в отличие от остальных решений, использует виртуализацию с реализацией на нативной стороне, что, в теории, должно обеспечить максимальный перформанс. Пока находится в альфа-версии и работает только с новой архитектурой, так как использует Fabric.

Функциональность ListItem компонентов пока ограничена, но разработчики обещают исправить это в будущих версиях.

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

Запуск LLM в мобильном приложении на React Native

Хочу поделиться двумя проектами для запуска современных LLM локально в ваших мобильных приложениях.

🦙llama.rn – обёртка над llama.cpp, которая позволяет запускать модели в формате GGUF (Graphical General Unified Format) – оптимизированный формат, специально разработанный для мобильных приложений.

Пример использования этой библиотеки: проект ChatterUI, который предоставляет интерфейс чата для локальных моделей.

На Hugging Face можно найти множество различных моделей в формате GGUF, оптимизированных под разные задачи, например уже есть omni модели оптимизированные под мобильные девайсы.

🔦RN ExecuTorch – обёртка над фреймворком ExecuTorch, разработанным для оптимизации запуска моделей PyTorch на различных устройствах, в том числе мобильных.

В документации проекта можно найти пример запуска квантованных версий LLaMA 3.2 с интерфейсом чата.

Так как фреймворк ExecuTorch относительно новый, формат моделей PTE ещё не сильно распространён.

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

Expo Storage Benchmark

Обновленный бенчмарк с результатами тестирования производительности решений для persistent storage.

Тестовое окружение: Expo 52, React Native 0.76, New Architecture enabled.

Суть бенчмарка — замер выполнения get-операции для получения значения 1000 раз.

Результаты:

1. react-native-mmkv: 2ms 👑
2. realm-js: 20ms
3. async-storage: 50ms
4. expo-sqlite: 197ms
5. react-native-keychain: 263ms
6. expo-secure-store: 290ms

Хорошим дополнением к этому бенчмарку может быть op-sqlite и его тесты производительности, где op-sqlite опережает mmkv в режиме HostObject.

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