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

🔐 React Native Security

Наверное, лучшее, что я видел по безопасности React Native приложений:

- Обфускация кода
- Jailbreak protection
- RASP
- Device Binding
- SSL Pinning

И многое другое, собранно в одном gist

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

99$ за годовую подписку на оптимизированные биндинги Tailwind в Unistyles

Скоро за css селекторы начнем платить...

Хотя вайбкодеры уже платят 🤔

⚡️FlashList v2

Вторая версия FlashList в продакшне и это отличная иллюстрация бонусов которые мы получаем при переходе на новую архитектуру

Благодаря полностью синхронной работе с UI стало возможным реализовать всю функциональность на стороне JS

Новый алгоритм расчета размера элемента избавляет от estimatedItemSize. Теперь размеры предсказываются точнее, а вероятность появления белого экрана снизилась на 50%

🛠 Что изменилось:

· более точная работа scrollToIndex
· улучшен горизонтальный скроллинг
· минимизированы ререндеры при изменении данных
· улучшена работа в Web благодаря удалению нативного кода

🚀 Новые фичи:

Расширеная работа с индикатором прокрутки:

· новое свойство maintainVisibleContentPosition позволяет лучше контролировать позицию скрола при изменении контента (например при смене ориентации)

Улучшенная работа с Masonry

· с помощью overrideItemLayout можно строить более сложные мультиколоночные списки

Контроль над recycle pool

· теперь можно задать максимальное кол-во типов элементов находящихся в recycle pool, полезно когда у вас много разных типов элементов списка

📖 Полный список изменений на обновлённом сайте с документацией

На видео бенчмарк сравнение FlashList vs LegendList на 10K елементов

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

React Native Enriched

EnrichedTextInput - rich text editor компонет построенный на базе uncontrolled input.

Благодоря этому компонент напрямую взаимодействует с платформенной реализацией и обеспечивает нативную производительность.

Поддерживает:

· стилизацию
· html парсинг
· инлайн изображения

Работает только с new architecture.

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

The Past, Present & Future of Nitro

Если вы еще не знакомы с NitroModules, то выступление её создателя на конференции CallStack, отличный шанс начать знакомство и, возможно, попробовать реализовать что-то у себя.

Из видео вы узнаете причины создания ещё одного фреймворка для нативных модулей,
технические детали реализации, почему используется jsi::NativeState и зачем нужен Nitrogen.

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

Nitro Fetch

В продолжение темы Nitro Modules пример на видео показывает, как даже с использованием новой архитектуры Nitro Modules позволяют сократить расходы на сериализацию уже на уровне JSI.

Nitro Fetch реализует fetch-совместимый интерфейс. Для нативной реализации используется Cronet для Android и URLSession для iOS.

Поддерживает HTTP/2, QUIC, Brotli (но не поддерживает стриминг и WebSockets).

Функции Prefetching и возможность запуска парсинга результата ответа на Worklets позволяют не блокировать JS-поток во время работы с сетью.

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

С новым релизным циклом React Native старая архитектура скоро лишится поддержки

Подробнее о пути к RN 1.0, новой системе релизов и тестирования смотрите в видео

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

Best Practices of using WebSockets

Планируете или уже используете WebSockets в своих приложения?

Эта статья поможет вам оптимизировать работу на стороне RN

Внутри вы найдете пример реализации Singleton WebSocket Service

Способы работы с reconnection

Offline Support и много других полезных приемов

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

Если вам вдруг не зашел Liquid Glass то вот подробная инструкция как минимизировать его влияние на всех платформах от macOS и iOS до tvOS

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

React Native Harness

Unit-тесты в React Native выполняются в среде Node.js, что ограничивает их возможности. Они не видят нативную часть приложения и не могут протестировать поведение модулей, зависящих от iOS/Android.

Можно, использовать E2E-тесты (Detox, Maestro), но их написание и поддержка обходятся дорого.

Например, если нужно протестировать работу нативного модуля, требуется пройти длинный путь в UI и процесс становится медленным и неудобным.

Команда Callstack предложила элегантное решение

React Native Harness - фреймворк, который позволяет запускать unit-тесты поверх реального приложения, прямо на симуляторе или устройстве.

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

1️⃣ С помощью Babel-плагина собирается специальный JS-bundle, который вместо обычного UI запускает Harness Test Runner
2️⃣ Runner выполняет тесты с расширением harness
3️⃣ Результаты выполнения передаются в CLI в формате, совместимом с Jest reporter

Синтаксис написания тестов повторяет Jest, поэтому самое написание тестов не вызовет никаких проблем.

PS: 2-х часовое видео с live coding примерами написания и запуска тестов с помощью Harness

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