Принес вам свежий бенчмарк производительности самых популярных библиотек для стилизации в React Native!

Задача бенчмарка — измерить среднее время, которое требуется для рендеринга 1000 компонентов View с одинаковыми стилями. За базовый ориентир взят стандартный StyleSheet.

const Native = () => {
  return (
    <View style={{ display: "flex", flexDirection: "row" }}>
      {new Array(COUNT).fill(0).map((_, i) => (
        <View key={i} style={styles.styledView} />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  styledView: {
    borderColor: "red",
    borderWidth: 2,
    padding: 5,
  },
});

Первое место с результатом, наиболее близким к нативному, заняла библиотека Unistyles V2.

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

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

Продолжая тему Performance

Вот набор метрик, которые нужно отслеживать для получения идеального пользовательского опыта. Метрики разделены на 3 группы:

⚛️ React Native JS
⚙️ Native
📱 Device

⚛️ JS Frame Rate
Измеряет время выполнения кода в JS потоке (в Android Navigator использует этот поток).
Базовый уровень: Идеально - 60 FPS, Разумно - 30 FPS, Меньше 30 FPS (замедленное приложение).

⚛️ Navigation Render Time
1. Таймер стартует при нажатии на Touchable на экране A.
2. Переход на экран B.
3. Таймер останавливается, когда экран B полностью отрисован.

Базовый уровень:
- Простые приложения - до 0.3 сек (300 мс)
- Средние приложения - 0.3 до 1 сек
- Сложные приложения - до 1 сек

⚛️ Screen re-render Time
1. Таймер стартует при определенном UI событии (например, pull-to-refresh).
2. В процессе происходит обновление (например, сетевые запросы).
3. Таймер останавливается, когда экран снова полностью отрисован.

Базовый уровень: Стандарт - 60 FPS, Повышенный - 90 и 120, Пониженный - 30 FPS.

⚛️ Javanoscript Bundle Size
Базовый уровень:
- Малые и средние приложения: 4-6 MB или меньше
- Большие и сложные приложения: 6-10 MB или меньше

⚛️ UI Frame Rate (Main Thread)
Измеряет время для выполнения layout/UI отрисовки (NavigatorIOS использует этот поток, поэтому работает лучше чем Navigator для Android).

Базовый уровень: Идеально - 60 FPS, Разумно - 30 FPS, Меньше 30 FPS (замедленное приложение).

⚙️ Frame Drop
Задержка в отрисовке экранов (менее 60 fps).
Базовый уровень: 0 Frame Drops

⚙️ Slow Frame
Если приложение тратит больше 16.67 мс на кадр.
Базовый уровень: 0 Slow Frames

⚙️ Frozen Frame
UI кадры, занимающие более 700 мс.
Базовый уровень: 0 Frozen Frames

⚙️ TTI (Time-to-Interactive)
Время до интерактивности экрана/компонента.
Базовый уровень: 2-3 сек или меньше

📱App Stability / Crashes
Стабильность приложения измеряется количеством сбоев на сессию или пользователя.

📱ANRs (Application Not Responding)
Ошибка ANR возникает, когда основной поток приложения не отвечает более 5 секунд.
Базовый уровень: ANR = 0

📱App startup render time (App Launch Time)
1. Таймер стартует при запуске нативной части приложения.
2. Таймер останавливается, когда первый экран полностью отрисован.

Базовый уровень:
- Холодный старт: 2–4 сек
- Теплый старт: 2-3 сек
- Горячий старт: 1–1.5 сек

📱CPU Usage
Утилизация процессора показывает нагрузку на ядра для выполнения различных программ.

Базовый уровень:
- Идеально (без взаимодействия пользователя и фоновых задач) - ниже 5%
- Во время взаимодействия - ниже 20-30%
- Без продолжительных пиков до 100% (кратковременные пики допустимы)

📱Memory Usage
Использование памяти показывает средний процент занятости доступной памяти в данный момент.

Базовый уровень:
- При первом запуске - ниже 100MB
- В процессе использования - до 200-300MB
- Минимизировать утечки памяти

⚡️В следующем посте я расскажу какие инструменты использовать для получения этих метрик.

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

⚡️Skia List - fastest react-native list renderer

Skia List - построенный на базе Skia высокопроизводительный список разработан для быстрой и эффективной работы.

Но есть нюанс. В библиотеке пока что доступны только два компонента: SkiaScrollView и построенный на его основе SkiaFlatList. Оба могут использовать внутри только рендеринг Skia и не поддерживают компоненты React Native 🤔

Демо-сравнение с FlashList, конечно, впечатляет, но пока непонятно, сколько усилий потребуется для реализации подобного функционала, как работает доступность (accessibility) и т.д.

Будем наблюдать.

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

🔦 Flashlight — измеряем производительность приложения на React Native

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

Реальность такова, что не существует единого инструмента для сбора всех метрик в одном месте.

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

Flashlight агрегирует различные метрики производительности (FPS, использование CPU, использование RAM) и предоставляет их оценку, на основе которой можно сделать вывод о состоянии производительности вашего приложения.

Давайте рассмотрим, как можно получить такой отчет.

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

1. flashlight measure
2. flashlight test

*На данный момент Flashlight работает только с эмуляторами или устройствами на базе Android. Подробнее о ситуции с iOS тут

Команда flashlight measure генерирует отчет в реальном времени и показывает изменения различных метрик на графике. Удобно для быстрой оценки производительности.

С помощью flashlight test мы можем автоматизировать измерения, интегрировав их с запуском e2e теста. Вот пример запуска приложения и генерации отчета:

flashlight test --bundleId com.twitter.android \
--testCommand "maestro test twitter.yaml" \
--duration 10000 \
--resultsFilePath results.json

После генерации отчет можно посмотреть командой flashlight report results.json, или, предоставив несколько отчетов, сравнить их между собой.

Ставьте эксперименты, анализируйте отчеты и делайте свое приложение еще лучше с Flashlight

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

Улучшенные нативные BottomSheet завезли в RNScreens 4

Настрока максимально простая в options настройки экрана задайте свойство

presentation: “formSheet”

алтернатив для RNBS все больше - порадуйте своих пользователей, подарите им настоящий нативный опыт

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

Virtualization vs Recycling

Давайте разберемся, какие бывают подходы к оптимизации списков на React Native.

Начнем с базы. ScrollView рендерит все child-элементы сразу.
Как только ваш список станет длиннее экрана, это может стать проблемой.

Для решения этой проблемы React Native предоставляет VirtualizedList и реализованные на его базе FlatList и SectionList.

Вместо того чтобы рендерить все элементы списка, мы как бы создаем окно, которое "идет" вместе со скроллом по списку и рендерит только то, что попадает в это окно.

Настраивать параметры виртуализации можно следующими свойствами:

windowSize — число, задающее размер вашего окна. Значение по умолчанию — 21, что означает, что окно равно 10 экранам сверху, 10 экранам снизу и одному текущему. Уменьшение этого числа позволит сократить количество элементов, которые будут рендериться одновременно.

maxToRenderPerBatch — параметр, задающий количество элементов, которые будут рендериться за раз во время события скролла. Значение по умолчанию — 10.

Итак, давайте представим, что у вас есть список из 100 элементов, и на экран умещается 10 из них.
При открытии этого списка с дефолтными настройками FlatList произойдет рендеринг 10 экранов вниз (то есть всего вашего списка).

Единственное отличие от ScrollView будет в том, что рендеринг этот будет происходить не сразу, а батчами по 10 элементов, что сделает UI более отзывчивым.

Как же нам оптимизировать список так, чтобы не рендерить лишние элементы и при этом избежать проблем с быстрой прокруткой?

Ответ — использовать ♻️ Recycling.

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

В примере выше, если мы уменьшим размер окна, каждый раз, когда элемент будет выходить за пределы окна, он будет утилизироваться.

А что если вместо этого мы создадим окно размером в 2 экрана? И вместо того чтобы каждый раз пересоздавать компоненты с новыми свойствами, будем менять свойства существующих компонентов в соответствии с текущими элементами в окне.

Именно этот принцип реализует RecyclerListView и построенный на его базе FlashList, который предоставляет API, максимально похожий на FlatList.

Используя FlashList, вы значительно сократите потребление памяти и увеличите производительность списков. Однако стоит помнить о следующих принципах:

1️⃣ Старайтесь избегать использования useState внутри элементов списка или продумайте логику его сброса (например, через useRef).

2️⃣Если ваш список состоит из нескольких типов компонентов, реализуйте метод getItemType.

3️⃣Посчитайте примерный размер элемента списка для параметра estimatedItemSize — это позволит лучше определить размер окна для списка.

4️⃣Если вам нужен аналог SectionList, посмотрите пример реализации через getItemType.

Если придерживаться этих правил, практически во всех случаях замена FlatList на FlashList принесет значительное увеличение производительности ваших списков.

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

🦄 Вышел Unistyles 3.0 и это новое слово в стилизации для React Native

Используя преимущества новой архитектуры, такие как интеграция с Fabric и взаимодействие с Shadow Tree, разработчики смогли перенести большую часть работы со стилями на сторону C++ и избежать ре-рендеров, а также дополнительных обёрток компонентов на стороне JS.

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

Вместо того чтобы вычислять стили в рантайме и применять их через ре-рендер компонента с новым объектом стиля, Unistyles использует совершенно иной подход:

1️⃣ Babel-плагин анализирует стили на этапе сборки и конвертирует код в формат, подходящий для работы с ShadowNode. Примеры трансформаций можно найти в документации.

2️⃣ На основе анализа генерируются:

— C++ представление стилей (StyleSheetRegistry),
— биндинги для View (ShadowRegistry), к которым эти стили применяются.

Внутри приложения вы всё так же работаете с объектом StyleSheet как с обычным JS-объектом. Но магия начинается, когда стили нужно изменить!

Что происходит при изменении стилей?

Например, при:
— нажатии на кнопку которая вызывает изменения стиля,
— переключении в dark mode,
— обновлении настроек Accessibility.

Unistyles поддерживает 14 различных событий, которые вызывают обновление стилей. После получения события библиотека вычисляет новое состояние стилей и, благодаря ShadowRegistry, применяет их напрямую на нативной стороне, без ре-рендеров.

Полный список всех новых функций можно посмотреть на официальном сайте.

* важно новый unistyles работает только на RN 0.76+ и только с новой архитектурой

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

Декабрь — время адвент-календарей.

Собрал для вас три адвент-календаря, которые помогут отвлечься от рутины и порешать задачки и пазлы на JS и TS.
А ещё это отличное комьюнити, где каждый день люди делятся своими решениями и обсуждают интересные, а порой даже экзотические подходы к решению задач.

🎅🏻Самый популярный, собравший огромное комьюнити — Advent of Code.
Особенность в том, что вам не нужно выбирать конкретный язык программирования или использовать редактор, как на LeetCode. Для проверки достаточно предоставить результат работы вашей программы. Поэтому в сети можно найти множество экзотических вариантов решений, например, решение задач этого календаря на GameBoy. Используйте хэштег #AdventOfCode для поиска интересных обсуждений и решений.

🎄Advent of TS — календарь от создателей Typehero.
Это более классическая версия, где нужно решать TypeScript-пазлы в онлайн-редакторе. Отличный способ прокачать свои навыки и узнать что-то новое.

⛄️AdventJS — календарь, задачки которого ближе к формату LeetCode.
У него приятное оформление и удобная разбивка задач по сложности. Поддерживает JavaScript, TypeScript и Python.

Присоединяйтесь решайте задачки и заряжайтесь рождественским и новогодним настроением!

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

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