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, что бы вы сами смогли посмотреть и поковырять)

Всем привет!

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

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