React Native World

Одно из преимуществ React Native - это система рендеринга, построенная вокруг нативных платформенных компонентов. Если платформа вносит какие-то кардинальные изменения, например выкатывает обновление уровня Liquid Glass, в RN мы получаем максимально плавную миграцию. Чего не скажешь о коллегах из Flutter - официально Liquid Glass поддерживаться не будет, хотите - идите и рисуйте сами 😅 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 | Навигация по каналу

+100 к аргументам в споре за пивком про RN vs Native Научная статья сравнивающая RN и нативную разработку по множеству аспектов React Native World | Навигация по каналу

умирающий RN

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

10-30 карачаровское

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

AI агенты на TypeScript Если вы, как и я, давно хотели попробовать написать собственного AI-агента, но не хотелось глубоко погружаться в разработку на Python (например, как в agno.com), то этот инструмент для вас. mastra.ai — это современный open-source фреймворк для построения систем на базе LLM-моделей (Agents, RAG, Workflow automation) с поддержкой продакшн-фич, таких как метрики перформанса и трейсинг исполнения. В документации — много примеров с реализацией различных сценариев. От себя добавлю, что залог эффективной работы с LLM — это качественный промптинг. Недавно Google дропнули свежий гайд по этой теме. 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 | Навигация по каналу

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

Making WebViews Feel Native Статья от Shopify о том, как они улучшали работу с WebView внутри своих приложений по трём направлениям: производительность, внешний вид и интеграция с приложением. Очень подробно освещены различные проблемы и способы их решения по каждому аспекту, но, к сожалению, реализация, например, их нативного WebView осталась закрытой. React Native World | Навигация по каналу

А нужен ли вам react-native-svg? Подробный разбор от создателей react-native-svg с кейсами, когда действительно стоит использовать эту библиотеку. Если кратко - почти никогда 😅 Дело в том, что react-native-svg представляет ваш SVG как набор React-узлов (есть два подхода реализации). И это может стать реальной проблемой для производительности, потому что количество узлов может доходить до сотен. Поэтому стоит заранее подумать, как именно вы используете SVG: · Если нужно просто отображать SVG как картинку или иконку, лучше использовать Expo Image, сделать иконки шрифтом или конвертировать SVG в растровое изображение · Если SVG анимированный, стоит обратить внимание на Lottie или Rive · Также альтернативой могут быть react-native-skia или react-native-vector-image Единственный случай, когда стоит использовать react-native-svg - если вам нужно управлять элементами SVG как React-компонентами. Подробнее как устроен react-native-svg в блоге swmansion 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 | Навигация по каналу

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

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

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

Холодный старт 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 | Навигация по каналу

Опубликованы результаты State of ReactNative 2024 https://results.2024.stateofreactnative.com/ Мне нравится сортировать библиотеки по полю Never Heard of It и смотреть, сколько таких решений есть у меня в проекте. 😁 Длинный разбор и сравнение с предыдущим годом от Callstack если любите такой формат. React Native World | Навигация по каналу

До 50% прироста производительности одной строчкой конфига? 🤔 Звучит как кликбейт, но давайте разберёмся. Итак, React Native Boost состоит из двух частей: 1️⃣ Babel-плагин, который применяет микрооптимизации к вашему коду. Оптимизации применяются только в том случае, если они не ломают логику приложения. 2️⃣ Рантайм-библиотека, которая оптимизирует код, когда это невозможно сделать на этапе сборки. В текущей реализации оптимизации затрагивают два компонента: View и Text. Идея в том, что эти компоненты — JS-обёртки над нативными TextNativeComponent и ViewNativeComponent. Они добавляют много кода для обработки краевых случаев, например View, вложенные в Text. Плагин статически анализирует ваш код, находит места, где можно избавиться от обёрток и использовать нативные компоненты напрямую. Кроме того, плагин генерирует рантайм-библиотеку, которая применяет оптимизации, невозможные на этапе сборки. Установка и настройка:

// cli
npm install react-native-boost
// or expo
npx expo customize babel.config.js

// babel.config.js
module.exports = {
  plugins: ['react-native-boost/plugin'],
};

⚠️ Важно: плагин экспериментальный и возможно, может что-то сломать в вашем коде. React Native World | Навигация по каналу