React Native 0.85 у 2026: Новий Backend Анімацій, Строгий TypeScript API та Питання для Співбесід

React Native 0.85, випущений у квітні 2026, представляє найбільш значну перебудову системи анімацій від моменту створення фреймворку. З 604 комітами від 58 контриб'юторів, цей реліз вводить Shared Animation Backend, завершує перехід на архітектуру post-bridge та додає підтримку Metro TLS для корпоративних середовищ.

Shared Animation Backend: Об'єднання Animated та Reanimated

Головною функцією React Native 0.85 є Shared Animation Backend, побудований у співпраці з Software Mansion. Раніше вбудована бібліотека Animated та бібліотека спільноти Reanimated підтримували окремі цикли reconciliation. Кожна з них працювала зі своєю внутрішньою логікою застосування оновлень анімацій, створюючи ізольовану екосистему, де покращення продуктивності однієї системи не могли принести користі іншій.

Shared Animation Backend переміщує основну логіку оновлення анімацій безпосередньо в рендерер React Native. Замість того, щоб коміти анімацій змагалися за Shadow Tree поряд з React та бібліотеками стилізації, спеціалізований механізм обробляє їх окремо.

import { Animated, Pressable, View, StyleSheet } from 'react-native';
import { useRef, useState } from 'react';

function ExpandableCard() {
  const widthAnim = useRef(new Animated.Value(120)).current;
  const heightAnim = useRef(new Animated.Value(80)).current;
  const [expanded, setExpanded] = useState(false);

  const toggle = () => {
    const toWidth = expanded ? 120 : 300;
    const toHeight = expanded ? 80 : 200;

    // Layout props with useNativeDriver — new in 0.85
    Animated.parallel([
      Animated.spring(widthAnim, {
        toValue: toWidth,
        useNativeDriver: true, // Now supports layout props
      }),
      Animated.spring(heightAnim, {
        toValue: toHeight,
        useNativeDriver: true,
      }),
    ]).start();

    setExpanded(!expanded);
  };

  return (
    <Pressable onPress={toggle}>
      <Animated.View
        style={[
          styles.card,
          { width: widthAnim, height: heightAnim },
        ]}
      />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#61DAFB',
    borderRadius: 8,
  },
});

До версії 0.85 встановлення useNativeDriver: true на властивостях layout таких як width чи height призводило до помилки. Розробники мали обирати між плавними анімаціями 60fps (native driver, обмежений transform та opacity) та смиканими анімаціями на JS-потоці для змін layout. Shared Animation Backend розв'язує це п'ятирічне обмеження.

Як Backend Анімацій Працює Внутрішньо

C++ Animation Backend, раніше захований за прапорцем компілятора -DRN_USE_ANIMATION_BACKEND, увімкнений за замовчуванням у версії 0.85. Система використовує два спеціалізовані шляхи оновлення:

• synchronouslyUpdateProps — швидкий шлях для змін, не пов'язаних з layout (opacity, transforms), що обходить повний цикл коміту Fabric
• Повний коміт Fabric — запускається тільки коли потрібний перерахунок layout (width, height, flex, padding)

Цей двошляховий підхід означає, що прості переходи opacity залишаються такими ж швидкими як раніше, тоді як анімації layout отримують продуктивність нативного потоку без регресій.

Архітектура Post-Bridge: Bridge Більше Немає

React Native 0.85 — це перший стабільний реліз з нульовим fallback на bridge та без шару зворотної сумісності. Нова архітектура на основі JSI (JavaScript Interface) забезпечує пряму, синхронну комунікацію між JavaScript та нативним кодом з затримкою interop менше 2мс.

Практичні наслідки для підготовки до співбесід:

// TurboModules now lazy-load by default in 0.85
// Cold-start memory reduced by ~40%
import { TurboModuleRegistry } from 'react-native';

// Module loads only when first accessed, not at app startup
const CameraModule = TurboModuleRegistry.getEnforcing('Camera');

// Direct synchronous call via JSI — no bridge serialization
const hasPermission = CameraModule.checkPermission();

TurboModules за замовчуванням завантажуються ліниво у версії 0.85, зменшуючи пам'ять холодного старту приблизно на 40%. Це усуває штраф запуску від жадібної реєстрації кожного нативного модуля — поширене питання співбесіди про оптимізацію продуктивності React Native.

Metro TLS: HTTPS для Серверів Розробки

Корпоративні команди, що працюють за корпоративними проксі або тестують API, які вимагають безпечного з'єднання, раніше потребували обхідних рішень для сервера розробки Metro, що підтримував лише HTTP. Metro тепер нативно підтримує TLS:

const fs = require('fs');
const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

// Enable HTTPS + WSS (Fast Refresh over secure WebSocket)
config.server.tls = {
  ca: fs.readFileSync('./certs/ca.pem'),
  cert: fs.readFileSync('./certs/cert.pem'),
  key: fs.readFileSync('./certs/key.pem'),
};

module.exports = config;

Для локальної розробки mkcert генерує довірені сертифікати без ручного встановлення CA. Fast Refresh працює через WSS коли TLS увімкнений, зберігаючи hot-reload функціональним у безпечних середовищах.

Зміни, що Ламають Сумісність, та Гід з Міграції

Декілька змін, що ламають сумісність, потребують уваги при оновленні:

Виділення пресету Jest — вбудований пресет переміщено до @react-native/jest-preset:

module.exports = {
  preset: 'react-native',
};

// jest.config.js — after
module.exports = {
  preset: '@react-native/jest-preset',
};

Видалення StyleSheet.absoluteFillObject — замінити на StyleSheet.absoluteFill:

const overlay = StyleSheet.absoluteFillObject;

// After (0.85+)
const overlay = StyleSheet.absoluteFill;

Вимоги до версії Node.js — мінімум Node.js 20.19.4. Версії 21 та 23 (обидві EOL) не підтримуються.

Поведінка переповнення тексту — текст за межами borderRadius тепер приховується за замовчуванням. Компоненти, що покладаються на overflow: visible для тексту, який виходить за округлені кути, потребують явного стилю overflow: 'visible'.

DevTools: Множинні Одночасні Підключення Дебагера

React Native 0.85 підтримує множинні одночасні підключення Chrome DevTools Protocol (CDP). VS Code, React Native DevTools та AI-інструменти для кодування можуть підключатися одночасно без завершення сесій інших інструментів.

Це особливо актуально для команд, що використовують робочі процеси налагодження з комбінуванням кількох інструментів. Network Panel на Android відновлює попередній перегляд тіла запитів після регресії у попередніх версіях.

Розгалуження Комітів Shadow Tree

Новий механізм розгалуження комітів Fabric фундаментально змінює спосіб, яким React Native застосовує оновлення до Shadow Tree. Раніше коміти анімацій та оновлення стану React конкурували за один шлях коміту, спричиняючи падіння кадрів під час складних анімацій, що викликали повторні рендери.

Механізм розгалуження розділяє ці проблеми — Animation Backend працює на власній гілці, тоді як коміти React просуваються незалежно. Дві гілки узгоджуються в кінці кожного кадру, запобігаючи проблемам переплетення, які раніше спричиняли візуальні збої під час прокрутки списків з анімованими заголовками.

View Transition API (Інфраструктура)

Новий прапорець функції viewTransitionEnabled контролює майбутній View Transition API, що дозволяє анімовані переходи між видами. Прапорець за замовчуванням встановлений на false у 0.85 — це інфраструктура для майбутнього релізу, а не функція для користувачів. Він сигналізує напрямок React Native до вбудованих навігаційних переходів, подібних до Web View Transitions API.

Питання для Співбесід: Архітектура React Native 0.85

Для тих, хто готується до співбесід з React Native, ось ключові питання, що відображають архітектуру 0.85:

П: Яку проблему розв'язує Shared Animation Backend?

Shared Animation Backend об'єднує дві раніше окремі системи reconciliation анімацій (Animated та Reanimated) в єдиний рушій у ядрі React Native. До версії 0.85 оптимізації продуктивності в одній системі не могли принести користі іншій. Спільний backend також усуває обмеження, що перешкоджало анімації властивостей layout за допомогою native driver.

П: Чому TurboModules за замовчуванням завантажуються ліниво у 0.85?

Жадібна реєстрація всіх TurboModules при запуску споживала пам'ять на модулі, які додаток міг ніколи не використати протягом сесії. Ліниве завантаження відкладає створення екземпляра до першого звернення, зменшуючи пам'ять холодного старту приблизно на 40% без зміни API з боку розробника.

П: Поясніть два шляхи оновлення в Animation Backend.

synchronouslyUpdateProps обробляє зміни властивостей, не пов'язаних з layout (opacity, transform), без запуску комітів Fabric. Коли анімація модифікує властивості layout (width, height, padding), вона запускає повний коміт Fabric для правильного перерахунку layout. Цей двошляховий підхід зберігає продуктивність для простих анімацій, одночасно забезпечуючи анімацію layout на нативному потоці.

П: Що таке розгалуження комітів Shadow Tree?

Розгалуження комітів розділяє оновлення Shadow Tree, керовані анімаціями, від оновлень, керованих станом React, у незалежні гілки. Кожна гілка комітить незалежно, узгоджуючись на межах кадрів. Це запобігає смиканню анімацій, спричиненому повторними рендерами React, що конкурують за той самий шлях коміту — поширене джерело втрачених кадрів під час прокрутки списків з анімованими елементами.

Строгий TypeScript API: Рух до Примусового Застосування

Строгий TypeScript API, введений як opt-in у React Native 0.80, продовжує шлях до стандарту за замовчуванням. Щоб увімкнути:

{
  "compilerOptions": {
    "customConditions": ["react-native-strict-api"]
  }
}

Строгий API генерує типи безпосередньо з вихідного коду замість ручного їх підтримання. Він обмежує експорти до публічного файлу індексу react-native, запобігаючи залежності від внутрішніх шляхів файлів, які ламаються між версіями. Команди, що оновлюються до 0.85, повинні увімкнути цей прапорець для підготовки до обов'язкового застосування у майбутньому релізі.

Висновок

• Shared Animation Backend об'єднує Animated та Reanimated в один рушій, вперше дозволяючи анімацію властивостей layout з useNativeDriver: true
• React Native 0.85 завершує перехід post-bridge з нульовим шаром сумісності, зменшуючи пам'ять холодного старту на 40% завдяки ліниво завантажуваним TurboModules
• Підтримка Metro TLS розв'язує вимоги HTTPS для корпоративних середовищ розробки
• Розгалуження комітів Shadow Tree усуває смикання анімацій, спричинене конкуруючими комітами React
• Строгий TypeScript API слід увімкнути зараз для підготовки до обов'язкового застосування
• Команди повинні вирішити зміни, що ламають сумісність (виділення пресету Jest, видалення StyleSheet.absoluteFillObject, вимога Node.js 20+) перед оновленням