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

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