Ну что, пора возвращаться к делам и сейчас самая сложная задача - вспомнить все.

По приложению решил отложить историю с доработкой Live Activity, пока не найду подходящую апиху с данными.

Сейчас планирую заняться всякими фантиками, вроде сплэш скрина, онбординга и тд. Подрубить реанимэйтед и начать наводить красоту)

Скорее всего, эту историю буду вести отдельно, так что скоро ждите голосование на выбор темы для поста.

Всем хороших выходных 🖖

Ребят, сорян, но пока ничего кроме работы не вывожу(

Напишите плиз в комменты, о чем написать или что разобрать, постараюсь в выходные добраться.

🍀

Всем привет 🖖

Начинаю раскачиваться и пора бы возвращаться к всевозможным ковыряниям)

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

Всех с пятницей и хороших выходных 👾

#пятничный_мем

Ребят, привет!

При подготовке выбранной вами темы (Reanimated) понял, что наверное сначала будет пост с общей вводной частью про эту либу, а потом еще несколько постов с примерами того, что можно сделать

Так что не скучайте, скоро запушу.

И всем хорошей недели 🍀

React Native Reanimated

Изначально эта библиотека была написана коммьюнити RN, но сейчас ее в основном поддерживают инженеры из Software mansion.

Это мощная библиотека, с помощью которой можно легко создавать плавные анимации и взаимодействия с элементами. Мы же хотим сделать наше приложение красивым и плавным, верно?

Основным отличием Reanimated от, например Animated API который идет с RN из коробки, это то, что в нем все анимации вынесены из основного JS-потока в отдельный поток, который связан с UI-потоком синхронно.

Получается, главный поток не мешает работе анимаций, а анимации не мешают исполняться бизнес-логике — win win! Так что, если нам нужно реализовать какую-то сложную анимацию, с большим количеством нод, то лучше использовать Reanimated, в других случаях, скорее всего подойдет и Animated из коробки.

Ну что, погнали ставить!

Если создаем новый проект на Expo, то достаточно выполнить:

npx create-expo-app my-app -e with-reanimated //expo

yarn create expo-app my-app -e with-reanimated //yarn

Если у нас уже есть проект и нужно подключить Reanimated, действуем так:

npx expo install react-native-reanimated // for expo
npm install react-native-reanimated //npm
yarn add react-native-reanimated //yarn

Обязательно в babel.config.js проекта нужно подключить плагин react-native-reanimated/plugin

module.exports = {
presets: [
// ... // don't add it here 🙂
],
plugins: [
// ...
'react-native-reanimated/plugin',
],
};

И тут важно не забыть, что react-native-reanimated/plugin должен быть указан последним!
Это необходимо сделать, чтобы плагин Reanimated babel автоматически преобразовывал специальные JavaScript-функции (worklet’ы) таким образом, чтобы они могли быть переданы и запущены в потоке UI.

Затем чистим кэш

npx expo start -c // expo
npm start -- --reset-cache //npm
yarn start --reset-cache //yarn

После всех этих действий, для работы на Android больше ничего не требуется, а для iOS нужно переустановить поды

cd ios && pod install && cd ..

На этом пока все, пошел готовить примеры.
Для удобства постараюсь все выложить с ссылками на snack, что бы вы сами смогли посмотреть и поковырять)

Начинаем утро с нового релиза React Native версии 0.74 🎉

Важное из обновления:

Yoga версии 3.0: Улучшена предсказуемость поведения стилей и совместимость с веб-компонентами. Например, добавили поддержку align-content: 'space-evenly'

Bridgeless архитектура по умолчанию: Тут про скорость и производительность

Batched обновления `onLayout`: Обновления состояния в обратных вызовах onLayout теперь объединяются, что снижает количество перерисовок. Раньше, каждый вызов onLayout приводил к ререндеру.

Yarn 3 теперь является менеджером пакетов по умолчанию для новых проектов

Так же, с 0.74, минимальная версия Android SDK — 23 (Android 6.0). Раньше это был Android 5.0 (API 21)

Подробности тут

Ребята, налетаем!

Всем хорошего завершения этой длинной рабочей недели 🤳

#пятничный_мем

⚡️ReactNative и что-то остальное

Пацаны не спят, пацаны сейчас будут новый инструмент тестить 👀

⚡️ReactNative и что-то остальное

Привет! Из-за длинных выходных не успел добраться до примеров с реанимэйтед, после выходных обязательно подобью)

Пока только успел настроить и поковырять RNIDE. 
Могу сказать, что продукт для разработки классный и судя по гитхабу, комьюнити активно участвует в развитии.

Понятно, что еще далеко до полноценного релиза, много непонятных багов с настройками и работой, слабая производительность.

Но учавствовать в тестировании очень приятно, может даже получиться что-то законтрибьютить 🤔

⚡️ReactNative и что-то остальное

У канала есть свой чатик, велком https://news.1rj.ru/str/+ZBdY2WKGczUwOTli

Реанимэйт Ит!

Ну что, наконец я добрался до примеров. Сразу хочу сказать, что типовые примеры использования можно найти в доке. Я же решил посмотреть сначала базу по ним, а потом попробовал сделать кастомную анимацию.

Погнали!

Пример #1
Тут все просто. Нарисовали пустой бокал и будем наполнять его пивом по клику 😊

Для этого создаем переменную, используя useSharedValue() в которую будем складывать количество напитка.

Дальше через useAnimatedStyle() будем брать полученное значение и возвращать его как стиль.

useAnimatedStyle похоже на useEffect, но возвращает style object.

При клике добавляем значение к ранее созданной переменной, а дальше useAnimatedStyle уже возвращает новое значение height для отрисовки. Вот и все, бокал полон)

Пример #2
Просто чуть доработал первый (добавил clamp, что бы не переборщить с количеством пива) + попробовал использовать useAnimatedSensor для получения значений с сенсоров устройства (акселерометр, гироскоп и тд). Можно через ExpoGo запустить пример и заценить результат.

Последний пример в следующем посте 👇

⚡️ReactNative и что-то остальное

Пример #3
Поигравшись с useAnimatedSensor, я вспомнил что видел прикольный велком скрин тут и решил сделать что-то похожее с кастомной анимацией элементов на экране.

Создал два ворклета enteringLeft и enteringRight что бы разнести анимации элементов, которые расположены слева и справа.

В ворклете мы по сути описываем изначальное состояние анимации (initialValues) и сами изменения в ней (animations)

В моем случае это opacity, originX и transform.

Так же для каждого из элемента на экране я создал отдельные стили, которые завязаны на значения сенсора телефона
useAnimatedSensor(SensorType.GRAVITY) + rotate

Да, получилось не точь-в-точь, но основной смысл понятен 😂

На этом пока все, пишите свои вопросы в комменты или в чатик, может что еще интересного сделаю по этому инструменту 🖖

⚡️ReactNative и что-то остальное

Ребят, а у кого есть премиум и кто не против бустануть канал, велком

https://news.1rj.ru/str/boost/react_pain

Всем причастным сердечек в карму ❤️‍🔥

Всем привет!

На офф сайте RN в разделе "Get Started with React Native" теперь настоятельно рекомендуют использовать Expo, а информацию про чистую установку убрали сюда

⚡️ReactNative и что-то остальное