React Native 0.85 w 2026: Nowy Backend Animacji, Ścisłe API TypeScript i Pytania Rekrutacyjne

React Native 0.85, wydany w kwietniu 2026, dostarcza najbardziej znaczącą przebudowę systemu animacji od początku istnienia frameworka. Dzięki 604 commitom od 58 kontrybutorów, to wydanie wprowadza Shared Animation Backend, kończy przejście na architekturę post-bridge i dodaje obsługę Metro TLS dla środowisk korporacyjnych.

Shared Animation Backend: Unifikacja Animated i Reanimated

Główną funkcją React Native 0.85 jest Shared Animation Backend, zbudowany we współpracy z Software Mansion. Wcześniej wbudowana biblioteka Animated i biblioteka społecznościowa Reanimated utrzymywały oddzielne pętle rekoncyliacji. Każda z nich operowała własną wewnętrzną logiką stosowania aktualizacji animacji, tworząc odizolowany ekosystem, w którym ulepszenia wydajności jednego systemu nie mogły przynieść korzyści drugiemu.

Shared Animation Backend przenosi główną logikę aktualizacji animacji bezpośrednio do renderera React Native. Zamiast commita animacji walczących o Shadow Tree obok Reacta i bibliotek stylowania, dedykowany mechanizm obsługuje je oddzielnie.

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,
  },
});

Przed wersją 0.85 ustawienie useNativeDriver: true na właściwościach layoutu takich jak width czy height powodowało błąd. Deweloperzy musieli wybierać między płynnymi animacjami 60fps (native driver, ograniczony do transform i opacity) a szarpiącymi animacjami na wątku JS dla zmian layoutu. Shared Animation Backend rozwiązuje to pięcioletnie ograniczenie.

Jak Backend Animacji Działa Wewnętrznie

C++ Animation Backend, wcześniej kontrolowany flagą kompilatora -DRN_USE_ANIMATION_BACKEND, jest domyślnie włączony w wersji 0.85. System wykorzystuje dwie dedykowane ścieżki aktualizacji:

• synchronouslyUpdateProps — szybka ścieżka dla zmian niezwiązanych z layoutem (opacity, transforms), omijająca pełny cykl commita Fabric
• Pełny commit Fabric — uruchamiany tylko gdy potrzebne jest przeliczenie layoutu (width, height, flex, padding)

To podwójne podejście oznacza, że proste przejścia opacity pozostają tak szybkie jak wcześniej, podczas gdy animacje layoutu zyskują wydajność na wątku natywnym bez regresji.

Architektura Post-Bridge: Most Został Usunięty

React Native 0.85 to pierwsze stabilne wydanie z zerowym fallbackiem na bridge i bez warstwy kompatybilności wstecznej. Nowa architektura oparta na JSI (JavaScript Interface) zapewnia bezpośrednią, synchroniczną komunikację między JavaScriptem a kodem natywnym z opóźnieniem interop poniżej 2ms.

Praktyczne implikacje dla przygotowania do rozmów kwalifikacyjnych:

// 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 domyślnie ładują się leniwie w wersji 0.85, redukując pamięć cold-start o prawie 40%. Eliminuje to karę startową wynikającą z eagere rejestracji każdego modułu natywnego — częste pytanie rekrutacyjne dotyczące optymalizacji wydajności React Native.

Metro TLS: HTTPS dla Serwerów Deweloperskich

Zespoły korporacyjne pracujące za proxy firmowymi lub testujące API wymagające bezpiecznego połączenia potrzebowały wcześniej obejść dla serwera deweloperskiego Metro obsługującego wyłącznie HTTP. Metro teraz natywnie wspiera 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;

Do lokalnego developmentu mkcert generuje zaufane certyfikaty bez ręcznej instalacji CA. Fast Refresh działa przez WSS gdy TLS jest włączony, utrzymując hot-reload funkcjonalnym w bezpiecznych środowiskach.

Zmiany Łamiące Kompatybilność i Przewodnik Migracji

Kilka zmian łamiących kompatybilność wymaga uwagi podczas aktualizacji:

Ekstrakcja presetu Jest — wbudowany preset został przeniesiony do @react-native/jest-preset:

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

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

Usunięcie StyleSheet.absoluteFillObject — należy zastąpić StyleSheet.absoluteFill:

const overlay = StyleSheet.absoluteFillObject;

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

Wymagania dotyczące wersji Node.js — minimum Node.js 20.19.4. Wersje 21 i 23 (oba EOL) nie są wspierane.

Zachowanie przepełnienia tekstu — tekst poza granicami borderRadius jest teraz domyślnie ukrywany. Komponenty polegające na overflow: visible dla tekstu wykraczającego poza zaokrąglone rogi wymagają jawnego stylu overflow: 'visible'.

DevTools: Wiele Jednoczesnych Połączeń Debuggera

React Native 0.85 obsługuje wiele jednoczesnych połączeń Chrome DevTools Protocol (CDP). VS Code, React Native DevTools i narzędzia AI do kodowania mogą łączyć się równocześnie bez zamykania sesji innych narzędzi.

Jest to szczególnie istotne dla zespołów korzystających z przepływów debugowania łączących wiele narzędzi. Panel sieci na Androidzie przywraca podgląd treści żądań po regresji we wcześniejszych wersjach.

Rozgałęzienie Commitów Shadow Tree

Nowy mechanizm rozgałęziania commitów Fabric fundamentalnie zmienia sposób, w jaki React Native stosuje aktualizacje do Shadow Tree. Wcześniej commity animacji i aktualizacje stanu React rywalizowały o tę samą ścieżkę commita, powodując spadki klatek podczas złożonych animacji wyzwalających ponowne renderowanie.

Mechanizm rozgałęziania oddziela te zagadnienia — Animation Backend operuje na własnej gałęzi, podczas gdy commity React postępują niezależnie. Obie gałęzie rekoncyliują się na końcu każdej klatki, zapobiegając problemom z przeplotem, które wcześniej powodowały usterki wizualne podczas przewijania list z animowanymi nagłówkami.

View Transition API (Infrastruktura)

Nowa flaga viewTransitionEnabled kontroluje nadchodzące View Transition API umożliwiające animowane przejścia między widokami. Flaga domyślnie ustawiona jest na false w wersji 0.85 — to infrastruktura dla przyszłego wydania, nie funkcja dostępna dla użytkownika. Sygnalizuje kierunek React Native w stronę wbudowanych przejść nawigacyjnych podobnych do Web View Transitions API.

Pytania Rekrutacyjne: Architektura React Native 0.85

Dla osób przygotowujących się do rozmów kwalifikacyjnych z React Native, oto kluczowe pytania odzwierciedlające architekturę 0.85:

P: Jaki problem rozwiązuje Shared Animation Backend?

Shared Animation Backend łączy dwa wcześniej oddzielne systemy rekoncyliacji animacji (Animated i Reanimated) w jeden silnik w rdzeniu React Native. Przed wersją 0.85 optymalizacje wydajności w jednym systemie nie mogły przynieść korzyści drugiemu. Współdzielony backend usuwa również ograniczenie uniemożliwiające animowanie właściwości layoutu za pomocą native drivera.

P: Dlaczego TurboModules domyślnie ładują się leniwie w 0.85?

Eagere rejestracja wszystkich TurboModules przy starcie zużywała pamięć na moduły, których aplikacja mogła nigdy nie użyć podczas sesji. Leniwe ładowanie odracza instancjację do pierwszego dostępu, redukując pamięć cold-start o około 40% bez zmiany API po stronie dewelopera.

P: Wyjaśnij dwie ścieżki aktualizacji w Animation Backend.

synchronouslyUpdateProps obsługuje zmiany właściwości niezwiązanych z layoutem (opacity, transform) bez wyzwalania commitów Fabric. Gdy animacja modyfikuje właściwości layoutu (width, height, padding), wyzwala pełny commit Fabric dla prawidłowego przeliczenia layoutu. To podwójne podejście utrzymuje wydajność dla prostych animacji, jednocześnie umożliwiając animację layoutu na wątku natywnym.

P: Czym jest rozgałęzienie commitów Shadow Tree?

Rozgałęzienie commitów oddziela aktualizacje Shadow Tree napędzane animacjami od aktualizacji napędzanych stanem React w niezależne gałęzie. Każda gałąź commituje niezależnie, rekoncyliując się na granicach klatek. Zapobiega to szarpaniu animacji spowodowanemu re-renderami React rywalizującymi o tę samą ścieżkę commita — częste źródło utraconych klatek podczas przewijania list z animowanymi elementami.

Ścisłe API TypeScript: Droga do Wymuszenia

Ścisłe API TypeScript, wprowadzone jako opt-in w React Native 0.80, kontynuuje drogę do stania się domyślnym. Aby je włączyć:

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

Ścisłe API generuje typy bezpośrednio z kodu źródłowego zamiast utrzymywać je ręcznie. Ogranicza eksporty do publicznego pliku indeksu react-native, zapobiegając poleganiu na wewnętrznych ścieżkach plików, które łamią się między wersjami. Zespoły aktualizujące do 0.85 powinny włączyć tę flagę, aby przygotować się na obowiązkowe wymuszenie w przyszłym wydaniu.

Podsumowanie

• Shared Animation Backend łączy Animated i Reanimated w jeden silnik, umożliwiając animowanie właściwości layoutu z useNativeDriver: true po raz pierwszy
• React Native 0.85 kończy przejście post-bridge z zerową warstwą kompatybilności, redukując pamięć cold-start o 40% dzięki leniwie ładowanym TurboModules
• Wsparcie Metro TLS rozwiązuje wymagania HTTPS dla korporacyjnych środowisk deweloperskich
• Rozgałęzienie commitów Shadow Tree eliminuje szarpanie animacji powodowane konkurującymi commitami React
• Ścisłe API TypeScript powinno być włączone już teraz, aby przygotować się na obowiązkowe wymuszenie
• Zespoły powinny zaadresować zmiany łamiące kompatybilność (ekstrakcja presetu Jest, usunięcie StyleSheet.absoluteFillObject, wymaganie Node.js 20+) przed aktualizacją