Голосовое управление для react-native приложения, реализовано с помощью react-native-voice/voice, выглядит очень эффектно, реализация достаточно примитивная и простая.

Реальный кейс:
В режиме разработки можно делать reload приложения, если распознать матеренные слова 😁

Исходный код можно посмотреть на гит

@react_native_info

Remotion — это фреймворк для создания видео с помощью React.js!

Да-да, вам не показалось, теперь крутые и стильные видео можно верстать на реакте!

Также если интерестно, то можно посмотерть уже готовые use-case: remotion.dev/showcase

@react_native_info

Вышла новая бета-версия TypeScript v4.9, в которой представлен новый оператор satisfies (в переводе с английского "удовлетворяет").

Оператор satisfies позволяет проверить удовлетворяет ли переменная какому-либо типу, но не присвает этот тип для переменной.

@react_native_info

Привет товарищи! Что-то рускоговорящем сегменте совсем нету никаких эвентов для react-native, есть у кого-то желание организивать что-то интерестное в формате хакатона или собраться с докладами о своих достижениях в решении интерестных кейсов и сложных задач в react-native, да и просто поделиться опытом?

Предлагайте варианты в коментарии и высказывайте свое мнение по этому поводу 😉

@react_native_info

Под капотом у Mobx. Пишем свою реактивную библиотеку с нуля

Автор данной статьи описывает процесс написания копии Mobx с нуля, с интеграцией для React через собственно написанный HOC observer. В конце у вас будет общее понимание реактивности, которое поможет в самостоятельном осмыслении не только Mobx, но и других реактивных библиотек и фреймворков.

@react_native_info

Ребята из Software Mansion готовят новый релиз reanimated2, где будут представлены новый хуки useAnimatedKeyboard и useFrameCallback.

Хуки уже доступны в @next версии пакета и их может попробовать каждый желающий.
Стоит обратить внимание на то что для Android хук useAnimatedKeyboard помечен как эксперементальная фича и иногда может работать нестабильно.

useAnimatedKeyboard будет предоставлять доступ к SharedValue переменным height и state:
✓ height – хранит текущее значение высоты клавиатуры;
✓ state – хранит одно из значений енама { CLOSED, OPEN, CLOSING, OPENING };

useFrameCallback позволяет запускать фрагмент кода при каждом обновлении фрейма.

У данного хука есть два аргумента, callback функция и autostart флаг.
При каждом вызове вашей callback функции в нее будут приходить следущие аргументы:
✓ timestamp: number – системное время (в миллисекундах), когда был отрендерен последний кадр;
✓ timeSincePreviousFrame: number | null – время (в миллисекундах) с момента последнего кадра. Это значение будет null в первом кадре после активации хука. Начиная со второго кадра должно быть ~16 мс на 60 Гц или ~8 мс на 120 Гц дисплеях (когда нет задержки);
✓ timeSinceFirstFrame: number – время (в миллисекундах) с момента последнего вызова вашей callback функции;

Хук возвращает объект FrameCallback, для управления состоянием вашей callback функции и имеет следущие параметры:
✓ setActive: (isActive: boolean) => void – начинает/останавливает прослушивание обновлений кадров;
✓ isActive: boolean – указывает, активен ли обратный вызов (true) или нет (false);
✓ callbackId: number – уникальный идентификатор функции обратного вызова;

В видео реализован пример из документации к useAnimatedKeyboard

@react_native_info

Интересный кейс анимации на react-native с использованием useAnimatedSensor из reanimated2.

Исходный код можно посмотреть на гит

@react_native_info

Skia — высокопроизводительная 2D графика для React Native

Автор данной статьи кратко описывает основные возможности Skia в react-native. В статье очень много примеров кода с картинками того что должно получиться.

@react_native_info

ВКонтакте пропал из эпл стора.

Также удалены другие приложения этой экосистемы: VK Музыка, VK Клипы и VK Мессенджер, VK Play и VK Админ и почта Mail․ru.

@react_native_info

React Native недавно достиг 1 миллиона загрузок в неделю на npm 🎉

@react_native_info

Пользователь GitHub под ником lklima реализовал приложение Rive из этого SwiftUI курса на react-native (expo).

Все анимации выполнены с помощью reanimated2 и rive.

Исходный код можно посмотреть на гит

@react_native_info

Руководство по Supabase

Supabase — это альтернатива Firebase с открытым исходным кодом, предоставляющая все базовые функции, необходимые для создания продукта.

@react_native_info

Энтузиаст создал красивую анимацию покемона volcarona на react-native с использованием хука useAnimatedSensor из reanimated2.

Исходный код можно посмотреть на гит

@react_native_info

Ребята из Callstack подготовили отличный пример реализации Fabric библиотеки с использованием C++ стэйта для react-native!

Исходный код можно посмотреть на гит

@react_native_info

Сегодня Expo ломает границы нативной навигации для мира react-native с помощью Expo Router!

Основные особенности:
✓ Автоматическое создание навигации на основе файлов в вашем проекте;
✓ Автоматические диплинки;
✓ Построен на базе React Navigation;

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

Более подробно можно ознакомится в статье «RFC: File System-Based Native Routing with Expo and React Native», а также в оффициальной документации Expo Router.

@react_native_info

Что такое мемоизация? Как и когда использовать мемоизацию в JavaScript и React

Автор данной статьи рассказывет о мемоизации (запоминании), методе оптимизации, который может помочь сделать тяжелые вычислительные процессы более эффективными.Автор начнет с разговора о том, что такое мемоизация (запоминание) и когда его лучше всего реализовать, позже перейдет к практическим примерам.

@reac_native_info

Пользователь GitHub под ником lklima реализовал необычные транзишены на reanimated2, готовый пример выполнен на expo.

Исходный код можно посмотреть на гит

@react_native_info

На Android появился сервис с открытым исходным кодом, для безопасного тестирования приложений из неизвестных источников — Insular.

Принцип работы прост: Insular создаёт на вашем телефоне «песочницу» в виде нового профиля, на который вы можете загружать и тестировать любые приложения — они не будут иметь доступа к фотографиям, контактам и личным данным, а так же не смогут вносить изменения в настройках телефона.

@react_native_info

TypeScript Tips – коллекция полезных советов, которые вы хотели бы знать, когда начинали использовать TypeScript.

Напомню что ранее выкладывал отличную методичку по TypeScript

@react_native_info