Reanimated 4 у React Native: повний гайд з анімацій 2026

Оновлено: 17 червня 2026

Reanimated 4 — це найновіша версія бібліотеки анімацій для React Native, побудована повністю на Новій Архітектурі (Fabric) із підтримкою CSS-подібного синтаксису, який значно скорочує бойлерплейт у порівнянні з Reanimated 3. У 2026 році бібліотека стала стандартом де-факто для високопродуктивних 60–120 FPS анімацій у React Native, оскільки виконує всю логіку безпосередньо на UI-потоці через worklets, обходячи Bridge та React reconciler. У цьому гайді я покажу, як перейти з Animated API, налаштувати Reanimated 4 у Expo SDK 53+, написати жести, layout-анімації та діагностувати лаги.

• Reanimated 4 (стабільний реліз, серпень 2025) працює тільки з Новою Архітектурою. Paper більше не підтримується.
• Новий CSS-подібний API (animation, transition) дозволяє анімувати стилі без useSharedValue для простих кейсів.
• Worklets виконуються на UI-потоці, тож це усуває джанк навіть під час важкої роботи JS-потоку.
• Expo SDK 53+ підтримує Reanimated 4 «з коробки» через config plugin. Ручні правки в babel.config.js більше не потрібні.
• Інтеграція з react-native-gesture-handler 2.20+ дає декларативні жести з фізикою (spring, decay) на UI-потоці.
• Layout animations (FadeIn, SlideInRight, Layout) тепер працюють зі списками FlatList та FlashList без додаткової конфігурації.

Що нового в Reanimated 4

Reanimated 4, чесно кажучи, це не просто інкрементальний реліз, а суттєвий редизайн API. Команда Software Mansion переписала ядро на C++ і прив'язала його напряму до Fabric renderer, що дозволило анімувати будь-які стилі, включно з тими, що раніше потребували setNativeProps. Найпомітніша зміна, на мою думку, це поява CSS-подібного API, який дозволяє декларувати анімації прямо в стилях, без явного створення shared values для тривіальних кейсів. Поріг входження падає, а код стає схожим на веб-розробку.

Ще одна ключова відмінність: повна відмова від підтримки старої архітектури (Paper). Якщо ваш застосунок ще не мігрував, прочитайте мій гайд з оптимізації React Native у 2026, де детально розглянуто перехід на Fabric та TurboModules. Для довідки про офіційні зміни рекомендую офіційну документацію Reanimated.

Серед інших оновлень:

• Animation primitives: withTiming, withSpring, withDecay, withRepeat, withSequence, оптимізовані під нову модель часу.
• Easing curves: розширений набір включає Easing.steps, Easing.elastic та власні Bézier-криві.
• Worklets runtime: тепер можна створювати окремі рантайми для аудіо, мережі та фізики.
• Кращі помилки: stack traces з worklets тепер мапляться до вихідного TypeScript.

Встановлення у Expo та bare React Native

У 2026 році встановлення Reanimated 4 значно спростилося завдяки інтеграції з Expo CNG (Continuous Native Generation). Для нового проєкту на Expo SDK 53 виконайте:

npx create-expo-app@latest my-app --template default
cd my-app
npx expo install react-native-reanimated react-native-worklets

Далі додайте плагін у app.json:

{
  "expo": {
    "plugins": [
      "react-native-reanimated/plugin"
    ],
    "newArchEnabled": true
  }
}

Для bare React Native 0.79+ встановіть пакет і додайте Babel-плагін:

// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-worklets/plugin', // ВАЖЛИВО: має бути останнім
  ],
};

Перевірте інсталяцію, додавши простий компонент:

import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
import { Pressable, View } from 'react-native';

export default function Demo() {
  const offset = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  return (
    <Pressable onPress={() => (offset.value = withSpring(offset.value === 0 ? 120 : 0))}>
      <Animated.View style={[{ width: 80, height: 80, backgroundColor: '#5A67D8' }, animatedStyle]} />
    </Pressable>
  );
}

Worklets, shared values та UI-потік

Розуміння worklets, насправді, є ключем до Reanimated. Worklet — це JavaScript-функція, позначена директивою 'worklet', яку Babel-плагін серіалізує і запускає на окремому UI-потоковому runtime. Це означає, що worklet виконується синхронно з кожним кадром (60 або 120 Hz залежно від пристрою) і не блокується важкою роботою JS-потоку. useSharedValue створює об'єкт, який синхронізує дані між JS і UI runtime через атомарні операції.

import { runOnUI, runOnJS } from 'react-native-worklets';

function logFromUI(value: number) {
  console.log('JS thread:', value);
}

function uiTask() {
  'worklet';
  const result = Math.sqrt(144) * 2;
  runOnJS(logFromUI)(result); // повертаємось у JS-потік
}

runOnUI(uiTask)();

Цей патерн критично важливий для жестів. Обчислення нової позиції з velocity, перевірка меж і виклик spring-анімації відбуваються без жодного hop на JS-потік. У моїй практиці перенесення swipe-actions у списку контактів на worklets знизило джанк з 18% до 0% на iPhone SE 2-го покоління (так, на тому самому пристрої, який тестери досі люблять використовувати для нагадувань про продуктивність).

Кілька правил, які я виніс з продакшен-досвіду:

• Worklets не мають доступу до React state і refs, тож використовуйте shared values.
• Імпортуйте функції-залежності всередині worklet або позначайте їх 'worklet'.
• Уникайте важких обчислень. Математика OK, JSON.parse — ні.
• Для асинхронних дій повертайтеся в JS через runOnJS.

CSS-подібні анімації у Reanimated 4

Нова CSS-подібна API, мабуть, є найбільшою зміною у досвіді розробки. Замість оголошення shared values і animated styles для простих переходів можна писати декларативно:

import Animated from 'react-native-reanimated';

<Animated.View
  style={{
    width: 100,
    height: 100,
    backgroundColor: 'tomato',
    transitionProperty: ['transform', 'opacity'],
    transitionDuration: '300ms',
    transitionTimingFunction: 'easeInOut',
  }}
/>

Для keyframe-анімацій є властивість animationName, схожа на CSS @keyframes:

const pulse = {
  '0%': { transform: [{ scale: 1 }] },
  '50%': { transform: [{ scale: 1.15 }] },
  '100%': { transform: [{ scale: 1 }] },
};

<Animated.View
  style={{
    animationName: pulse,
    animationDuration: '1.2s',
    animationIterationCount: 'infinite',
  }}
/>

Жести з Gesture Handler 2.20

Reanimated 4 ідеально поєднується з react-native-gesture-handler 2.20+. Новий Gesture API дозволяє писати декларативні жести з композицією (.simultaneousWithExternalGesture, .requireExternalGestureToFail). Ось приклад draggable-картки з spring-поверненням:

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

function DraggableCard() {
  const x = useSharedValue(0);
  const y = useSharedValue(0);

  const pan = Gesture.Pan()
    .onChange((e) => {
      x.value += e.changeX;
      y.value += e.changeY;
    })
    .onEnd(() => {
      x.value = withSpring(0, { damping: 12 });
      y.value = withSpring(0, { damping: 12 });
    });

  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: x.value }, { translateY: y.value }],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[card, style]} />
    </GestureDetector>
  );
}

Для повного занурення в навігаційні жести (свайп для повернення, bottom sheet) дивіться мій гайд з Expo Router v6, де я показую, як інтегрувати кастомні переходи між екранами з Reanimated.

Layout animations і списки

Layout animations автоматично анімують зміни позиції та розміру при додаванні, видаленні або переупорядкуванні елементів. У Reanimated 4 ця система була переписана і тепер коректно працює з віртуалізованими списками (FlatList, FlashList 2.x):

import Animated, { FadeInDown, FadeOut, LinearTransition } from 'react-native-reanimated';

<Animated.FlatList
  data={items}
  itemLayoutAnimation={LinearTransition.springify()}
  renderItem={({ item }) => (
    <Animated.View
      entering={FadeInDown.duration(220)}
      exiting={FadeOut.duration(150)}
    >
      <Text>{item.title}</Text>
    </Animated.View>
  )}
/>

Доступні preset-и: FadeIn/Out, SlideIn*, ZoomIn/Out, RotateInDownLeft, BounceIn. Кожен підтримує модифікатори .duration(), .delay(), .springify(), .damping().

Як оптимізувати продуктивність анімацій Reanimated

Навіть Reanimated не магічно швидкий, погано написані worklets легко перетворюють 60 FPS на 24 FPS. Ось чек-лист, який я використовую перед релізом:

1. Уникайте читання React state у worklet. Передавайте дані через useSharedValue або useDerivedValue.
2. Мемоїзуйте стилі. useAnimatedStyle вже мемоїзований, але об'єкти всередині, ні. Виносьте константи за межі компонента.
3. Спрощуйте transform. Браузерні правила діють і тут: transform та opacity найдешевші, а backgroundColor через worklet, на жаль, найдорожчий.
4. Профілюйте з Hermes Profiler. Подробиці в моєму гайді зі зневадження React Native.
5. Використовуйте shouldRasterizeIOS та renderToHardwareTextureAndroid для статичних шарів, що рухаються.

Зневадження анімацій

Зневадження worklets довгий час було болем, але в 2026 році ситуація стала значно кращою. Radon IDE (від тих самих Software Mansion) показує overlay з UI-потоковим runtime прямо у симуляторі. Альтернативно, додайте console.log з директивою 'worklet', і він замапиться через source maps.

const animatedStyle = useAnimatedStyle(() => {
  'worklet';
  console.log('UI thread offset:', offset.value);
  return { transform: [{ translateX: offset.value }] };
});

Для глибокого профілювання використовуйте флаг __reanimatedLoggerConfig у index.js:

import { configureReanimatedLogger, ReanimatedLogLevel } from 'react-native-reanimated';

configureReanimatedLogger({
  level: ReanimatedLogLevel.warn,
  strict: false,
});

Корисні офіційні матеріали: Reanimated GitHub releases для відстеження breaking changes і Expo SDK довідка для перевірки сумісності.

Часті запитання

Чи працює Reanimated 4 з Expo Go?

Так, але лише в Expo SDK 53 і пізніше, оскільки Reanimated 4 потребує Нової Архітектури, яка стала стандартом у SDK 53. У старших версіях SDK Expo Go ви побачите помилку Reanimated 4 requires the New Architecture. У такому разі або оновіть SDK, або використовуйте development build через npx expo run:ios.

У чому різниця між Animated API і Reanimated 4?

Animated API (вбудований у React Native) виконує JS-логіку на JS-потоці і пересилає значення через Bridge або JSI, що призводить до джанку при складних анімаціях. Reanimated 4 виконує worklets на окремому UI-runtime, повністю минаючи JS-потік. На практиці це різниця між 30 FPS під час прокручування й одночасною анімацією та стабільними 120 FPS.

Чому моя Reanimated анімація лагає?

Найпоширеніші причини: (1) у worklet викликаються JS-функції без runOnJS; (2) анімуються дорогі стилі (border-radius, shadow) замість transform; (3) велика кількість одночасних shared values без useDerivedValue для агрегації. Профілюйте з Hermes Profiler або Radon IDE, щоб побачити блокування UI-потоку.

Як перейти з Reanimated 3 на 4?

Основні кроки: оновіть пакет до ^4.0.0, встановіть окремий react-native-worklets, увімкніть New Architecture (newArchEnabled: true), замініть Babel-плагін на react-native-worklets/plugin. Більшість API сумісна, але useAnimatedReaction тепер вимагає явного списку залежностей, а measure() повертає Promise.

Чи можна використовувати Reanimated 4 без TypeScript?

Так, бібліотека повністю працює з чистим JavaScript, але TypeScript наполегливо рекомендується. Типи допомагають уникнути поширених помилок з worklets (наприклад, типів shared values) і дають краще автодоповнення для CSS-подібного API, де властивості залежать від типу стилю.