🦀 Rust-Powered Turbo Modules с использованием UniFFI

Mozilla представила uniffi-bindgen-react-native — набор инструментов для создания биндингов, которые позволяют использовать библиотеки на Rust в Turbo Modules через UniFFI.

Что такое UniFFI?

UniFFI — это библиотека и инструмент от Mozilla, который автоматизирует процесс создания межъязыковых биндингов (bindings) для библиотек на Rust. С его помощью функциональность Rust-библиотек можно экспортировать в языки, такие как Kotlin (Android), Swift (iOS), Python и Ruby.

Для этого используется UniFFI Definition Language (UDL), с помощью которого описывается интерфейс библиотеки. На его основе генерируются динамические библиотеки под конкретные платформы (.so, .dll, .dylib), которые безопасно интегрируются в целевые приложения.

Как UniFFI работает с React Native?

В специальном конфигурационном файле ubrn.config.yaml указываются Rust-библиотека или библиотеки, которые нужно использовать.

С помощью команд yarn ubrn:ios и yarn ubrn:android приложение и Rust-библиотеки собираются под нужные платформы.

Эти команды используют инструменты UniFFI и генерируют TypeScript-биндинги на основе UDL-интерфейса библиотеки. Эти биндинги можно сразу использовать в приложении.

Пример и подробные инструкции вы найдете на сайте проекта uniffi-bindgen for React Native.

Когда использовать UniFFI?

Самый популярный сценарий — это быстрое написание UDL-интерфейса к существующим Rust-библиотекам (или использование библиотеки с уже написаным UDL) и интеграция ее в React Native.

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

Low latency аудио для React Native

Если вы разрабатываете игру, VR/AR или приложение-синтезатор, то обычно вы хотите добиться моментальной скорости проигрывания звуков, даже если они идут из нескольких источников, например, как в драм-машине.

В этом вам поможет библиотека react-native-audio-playback. Она построена с использованием Android C++ Oboe и iOS Audio Unit и позволяет вам проигрывать несколько аудиодорожек без задержек.

В библиотеке есть две ключевые концепции: Stream и Player. Stream — это выходной аудиопоток, который объединяет множество потоков, приходящих с плеера. Важно, что каждый плеер может управлять проигрывателем независимо.

import { AudioManager } from 'react-native-audio-playback';

AudioManager.shared.setupAudioStream(44100, 2);

const player1 = AudioManager.shared.loadSound(require('./assets/sound1.wav'));
const player2 = AudioManager.shared.loadSound(require('./assets/sound2.wav'));

player1.loopSound(true); // boolean: whether to loop or not
player2.playSound();
player1.pauseSound();
player2.seekTo(1000); // timeInMs

При настройке стрима используются два параметра: Sample Rate и Channel Count.

Подробное видео по работе с библиотекой от её создателя смотрите по ссылке.

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

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

Добро пожаловать в мой телеграм-канал о React Native. Этот пост поможет тебе быстро ориентироваться среди контента канала.

Подборка постов:

· Подборка React Native приложений разработка которых ведется в Open Source
· Бенчмарк производительности библиотек для стилизации
· Flashlight — измеряем производительность приложения на React Native
· Что такое Virtualization и Recycling
· Как устроен новый Unistyles 3.0
· Интеграция Rust библиотек через UniFFI
· Запуск LLM в мобильном приложении на React Native
· ShadowList и LegendList - альтернативы FlashList
· React Native Boost - до 50% прироста производительности одной строчкой конфига
· React Native Ultimate performance guide 2025

Если есть вопросы или предложения, не стесняйся обращаться.

Контакты:

Telegram

Подписывайся и не пропускай самое интересное из мира React Native

State of React Native 2024

Стартовал третий по счёту опрос State of React Native!

Почему стоит пройти текущий опрос и ознакомиться с результатами предыдущих?

1️⃣ Будь в курсе быстро меняющейся экосистемы React Native.

В опросе охвачены практически все темы, связанные с библиотеками для разработки приложения: state managers, анимация, стилизация, UI и многое другое. Также рассмотрены инструменты для дебага, деплоя и автоматизации.

2️⃣ Понимание общей картины поможет принимать более взвешенные архитектурные решения.

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

3️⃣ Опрос полезен для поиска идей

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

4️⃣ Внеси свой вклад в развитие React Native.

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

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

Multiple Image Picker 2.0

Одна из причин, почему React Native так популярен, — это возможность использовать лучшее из мира нативной разработки.

Вторая версия Multiple Image Picker — классный пример, который это демонстрирует.

В новой версии разработчики использовали популярные нативные реализации Image Pickers. Для iOS это HXPhotoPicker, а для Android — PictureSelector.

Большинство функций этих библиотек, такие как:

· Обрезка изображений (Image crop)
· Просмотр изображений/видео (Preview Image/Video)
· Камера для захвата фото и видео (Camera)

И многое другое доступны через такой простой конфиг:

import { openPicker, Config } from '@baronha/react-native-multiple-image-picker'

const config: Config = {
  maxSelect: 10,
  maxVideo: 10,
  primaryColor: '#FB9300',
  backgroundDark: '#2f2f2f',
  numberOfColumn: 4,
  mediaType: 'all',
  selectBoxStyle: 'number',
  selectMode: 'multiple',
  language: 'vi', // 🇻🇳 Vietnamese
  theme: 'dark',
  isHiddenOriginalButton: false,
  primaryColor: '#F6B35D',
}

const onPicker = async () => {
  try {
    const response = await openPicker(config)
    setImages(response)
  } catch (e) {
    // catch error for multiple image picker
  }
}

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

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

Hermes ECMAScript Compliance

Хорошие новости от разработчиков Hermes!

Я уже писал, что они активно работают над разработкой Static Hermes, который должен обеспечить практически нативную производительность для типизированного JS. Но они также продолжают улучшать работу обычного JS.

В недавнем обновлении Tzvetan Mikov рассказал, что в следующей версии Hermes мы получим:

- Полную поддержку спецификации ES6-классов (Full spec-compliant implementation of ES6 classes).

- Полную поддержку блочной области видимости для let, const и Temporal Dead Zone (TDZ) с возможностью отключения TDZ для увеличения производительности.

В среднем нас ожидает ускорение выполнения JS в 1.5–2 раза, а также уменьшение использования Babel для трансформаций на этапе сборки.

На картинке к посту — результаты работы ветки static_h Hermes на бенчмарке Octane

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

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

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

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

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

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

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

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

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

- Classification
- Object Detection
- Style Transfer
- LLMs

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

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

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

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

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

Опубликованы результаты 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 | Навигация по каналу