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

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