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

Оптимизация старта iOS приложений

Команда Sentry и Emerge Tools (создают топовые инструменты для оптимизации перфоманса мобильных приложений) выпустили open source пакет FaultOrdering

Этот продукт позволяет автоматизировать технику Order Files

Когда приложение запускается на iOS, система загружает его код из binary-файла в оперативную память постранично, блоками по 16 КБ. Даже если используется небольшая часть страницы, вся страница целиком подгружается в память (это называется page fault).

Если при запуске важные символы (методы и классы) разбросаны по binary-файлу, возникает большое число page faults, что замедляет запуск. Техника Order Files решает эту проблему, группируя вместе символы, необходимые на старте, чтобы минимизировать число страниц памяти, которые нужно загрузить.

Технически для использования Order Files нужно создать текстовый файл, в котором будет описан порядок загрузки символов. Но здесь и кроется сложность - как сделать это оптимально.

FaultOrdering автоматически отслеживает вызовы функций и классов, необходимых для запуска приложения. Для этого:

1️⃣ В приложение динамически добавляются breakpoints на каждую функцию.

2️⃣ Приложение запускается в тестовом режиме (обычно через XCUITest).

3️⃣ Минималистичный встроенный дебаггер (SimpleDebugger) фиксирует срабатывание этих breakpoints.

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

В результате приложения запускаются быстрее без изменений кода. Airbnb, Snapchat и Spotify уже используют Order Files и ускоряют запуск своих приложений на 20% и больше.

📈 В React Native приложениях Order Files даст заметную пользу, если приложение содержит много нативного кода или кастомных модулей, активно задействованных при старте

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

💸 Экономим на Expo билдах

Нашёл классный инструмент, который помогает генерировать GitHub Actions workflows и собирать Expo-приложения на бесплатном тарифе GitHub

Базовый тариф Expo за $19 в месяц даёт максимум:

· 30 билдов Android или
· 15 билдов iOS

С помощью expobuilder можно использовать 2000 бесплатных минут GitHub Actions, чего хватит примерно на:

· 200 Android билдов или
· 20 iOS билдов в месяц (macos использует бесплатные минуты x10)

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

· с помощью expobuilder генерирует workflow, который использует expo-cli --local для сборки на раннерах GitHub
· нужен аккаунт в Expo и сгенерированный Expo Token
· даже если ты не знаком с GitHub Actions, следуя инструкции, можно с нуля настроить CI/CD пайплайн

🔐 Настройка секретов:

· базово нужен только EXPO_TOKEN
· для уведомлений и публикации в сторах - добавьте остальные ключи

☁️ Хранение билдов:

· артефакты сохраняются в GitHub Releases по умолчанию, но можно подключить своё хранилище

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

Как экономить на промтах?

Инфоцигане будут продавать эти приёмы на курсах, а у нас - пока бесплатно.

Подробная статья на примере демонстрирует разницу в цене и времени генерации одного и того же проекта (в статье делают генератор кроссвордов) с помощью одной и той же LLM.

Мне понравился трюк с описанием структуры проекта и его архитектуры с помощью ASCII, поэтому от себя добавлю 2 инструмента, с помощью которых можно удобно это делать:

🔹 Генератор структуры папок ascii-tree-generator
🔹 Крутейший генератор ASCII-диаграмм cascii.app

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

React Native Wallet

Хотите выпускать свои карты и добавлять их в Apple Wallet / Google Wallet как модные необанки?

Команда Software Mansion в партнёрстве с Expensify выпустила решение react-native-wallet

Эта библиотека уже поддерживает карты Visa, MasterCard, Amex и Discover cards

Помимо API для работы с кошельками, есть подробнейшая инструкция по интеграции для обеих платформ.

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

Ждете новый HermesJS? Я жду!

Последние бенчмарки показывают x2-x4 увеличение производительности по сравнению со стабильной текущей версией. Обещают скорый стабильный релиз.

Попробовать эту версию можно собрав из ветки static_h

Название ветки обманчиво - это не Static Hermes о котором я писал а версия v2 с поддержкой jit компиляции и кучей оптимизации движка

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

React Native Date Picker

Библотека закрывает вопрос по Date / Time picker компонетам для вашего приложения

· Полностью нативная реализация под все платформы
· Поддержка TurboModules
· Modal и Inline режимы
· Широкий набор кастомизаций

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

Извлекаем локализацию из JS-бандла

Большинство приложений хранят локализации внутри JSON-файлов, которые в свою очередь включаются в JS-бандл.

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

Чтобы избежать этого, вынесите ресурсы в нативную часть приложения и читайте их внутри бандла.

В статье подробно рассказывается, как это сделать для Android.

А чтобы проанализировать JS-бандл, попробуйте инструмент от того же автора: react-native-bundle-discovery

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

Хотите кнопку в стиле Apple Intelligence?

С помощью react-native-animated-glow можно воплотить самые смелые идеи анимаций с эффектом Glow ✨

Есть визуальный билдер, можно сразу посмотреть результат в web и скопировать готовый код

Библиотека использует Animation API, поэтому производительность сильно зависит от версии React Native

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