Небольшой тизер, что бы не думали, что я забил))

Разбираюсь с обновлением данных в активити, постараюсь завтра написать что и как 🧐

Как и обещал, продолжение истории с LiveActivity для приложения 🏎

В этот раз много писать не буду, еще не все супер понятно)

История в том, что в идеале бы хотелось получить на экране блокировки, во время гонки информацию:

- какой круг
- первые 3 позиции (позиция, имя пилота, время отставания)
- мб наличие желтых/красных флагов

Пока делаем все в ручном режиме, без наличия подходящего API

Что я на данный момент сделал:

1. Завел на отдельном экране, условный таймер кругов

2. Повесил на события запуска/стопа слушатели, которые должны говорить модулю iOS что что-то происходит

3. Сделал отдельный хук, что бы не городить кучу кода на экране (useRaceUpdate)

4. Немного поправил верстку активностей для Dynamic Island (там аж целых 3 состояния возможно)

Итоговый результат видно на видео в посте + все последние изменения запушил в проект
https://github.com/mbhusty/f1-app

В разборе этого всего, помогла вот эта статья
Так что если хотите повторить у себя, то советую почитать)

React Native developer be like 🔥

Кстати, если что на скрине приложение Minisim.

Удобно использовать для переключения симуляторов устройств + доп фишки есть.

Подробности тут
https://www.minisim.app

Всем привет! Принес вам #пятничный_мем

Ближайшие пару недель я пропаду, так что не теряйте ☺️

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

Всем привет 🖖

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

Буквально недавно наткнулся на канал, у которого сэйм вайб с моим. Даже путь в разработке, очень похож на мой.

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

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

Мне кажется важно расширять кругозор в нашей профессии.

Залетайте и к нему.
Всем удачи 🍀

когда сделал очередной todo лист и показываешь его всем ☺️

ps/ отчитываюсь за пятницу

Если кому интересно, залетайте на стажировку! 👇

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

По приложению решил отложить историю с доработкой 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 и что-то остальное