React Native 0.85 di 2026: Animation Backend Baru, TypeScript Strict API, dan Pertanyaan Interview

React Native 0.85, yang dirilis pada April 2026, menghadirkan perubahan paling signifikan pada sistem animasi sejak framework ini pertama kali dibuat. Dengan 604 commit dari 58 kontributor, rilis ini memperkenalkan Shared Animation Backend, menyelesaikan transisi post-bridge, dan menambahkan dukungan Metro TLS untuk lingkungan enterprise.

Shared Animation Backend: Menyatukan Animated dan Reanimated

Fitur utama dari React Native 0.85 adalah Shared Animation Backend, yang dibangun melalui kolaborasi dengan Software Mansion. Sebelumnya, library Animated bawaan dan library komunitas Reanimated menjalankan loop rekonsiliasi yang terpisah. Masing-masing mengoperasikan logika internal sendiri untuk menerapkan pembaruan animasi, menciptakan ekosistem yang terisolasi di mana peningkatan performa di satu sistem tidak dapat menguntungkan sistem lainnya.

Shared Animation Backend memindahkan logika inti pembaruan animasi langsung ke dalam renderer React Native. Alih-alih commit berbasis animasi bersaing memperebutkan Shadow Tree bersama React dan library styling, mekanisme khusus menangani mereka secara terpisah.

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

Sebelum versi 0.85, mengatur useNativeDriver: true pada property layout seperti width atau height akan menghasilkan error. Developer harus memilih antara animasi 60fps yang halus (native driver, terbatas pada transform dan opacity) atau animasi JS-thread yang tersendat untuk perubahan layout. Shared Animation Backend menyelesaikan batasan yang sudah ada selama lima tahun ini.

Cara Kerja Internal Animation Backend

C++ Animation Backend, yang sebelumnya disembunyikan di balik flag compiler -DRN_USE_ANIMATION_BACKEND, kini dikirimkan dalam keadaan aktif secara default di versi 0.85. Sistem ini menggunakan dua jalur pembaruan khusus:

• synchronouslyUpdateProps — jalur cepat untuk perubahan non-layout (opacity, transforms) yang melewati siklus commit Fabric secara penuh
• Full Fabric commit — dipicu hanya ketika perhitungan ulang layout diperlukan (width, height, flex, padding)

Pendekatan jalur ganda ini berarti animasi opacity sederhana tetap secepat sebelumnya, sementara animasi layout mendapatkan performa native-thread tanpa regresi.

Arsitektur Post-Bridge: Bridge Telah Hilang

React Native 0.85 adalah rilis stabil pertama tanpa fallback bridge dan tanpa lapisan interop legacy. Arsitektur baru berbasis JSI (JavaScript Interface) menyediakan komunikasi langsung dan sinkron antara JavaScript dan kode native dengan latensi interop di bawah 2ms.

Dampak praktis untuk persiapan interview:

// 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 melakukan lazy-load secara default di versi 0.85, memotong penggunaan memori cold-start hingga hampir 40%. Ini menghilangkan penalti startup akibat registrasi setiap native module secara eager — pertanyaan interview yang umum tentang optimisasi performa React Native.

Metro TLS: HTTPS untuk Development Server

Tim enterprise yang bekerja di belakang proxy korporat atau menguji API yang hanya mendukung HTTPS sebelumnya membutuhkan solusi alternatif untuk dev server Metro yang hanya mendukung HTTP. Metro kini mendukung TLS secara native:

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;

Untuk development lokal, mkcert menghasilkan sertifikat tepercaya tanpa instalasi CA manual. Fast Refresh beroperasi melalui WSS ketika TLS diaktifkan, menjaga hot-reload tetap berfungsi di lingkungan yang aman.

Breaking Changes dan Panduan Migrasi

Beberapa breaking changes memerlukan perhatian selama upgrade:

Ekstraksi Jest Preset — preset bawaan dipindahkan ke @react-native/jest-preset:

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

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

StyleSheet.absoluteFillObject dihapus — ganti dengan StyleSheet.absoluteFill:

const overlay = StyleSheet.absoluteFillObject;

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

Persyaratan versi Node.js — minimal Node.js 20.19.4. Versi 21 dan 23 (keduanya EOL) tidak didukung.

Perilaku text overflow — teks di luar batas borderRadius kini disembunyikan secara default. Komponen yang mengandalkan overflow: visible untuk teks yang melampaui sudut membulat perlu styling eksplisit overflow: 'visible'.

DevTools: Koneksi Debugger Simultan

React Native 0.85 mendukung beberapa koneksi Chrome DevTools Protocol (CDP) secara bersamaan. VS Code, React Native DevTools, dan AI-powered coding agent dapat terhubung pada waktu yang sama tanpa memutus sesi satu sama lain.

Hal ini sangat relevan bagi tim yang menggunakan alur kerja debugging yang menggabungkan berbagai tools. Network Panel di Android memulihkan pratinjau body request setelah regresi pada versi sebelumnya.

Shadow Tree Commit Branching

Mekanisme branching commit Fabric yang baru secara fundamental mengubah cara React Native melakukan commit pembaruan ke Shadow Tree. Sebelumnya, commit animasi dan pembaruan state React bersaing untuk jalur commit yang sama, menyebabkan frame drop selama animasi kompleks yang memicu re-render.

Mekanisme branching memisahkan concern ini — Animation Backend beroperasi pada branch-nya sendiri sementara commit React berlangsung secara independen. Kedua branch tersebut melakukan rekonsiliasi di akhir setiap frame, mencegah masalah interleaving yang sebelumnya menyebabkan glitch visual selama scrolling list dengan animated header.

View Transition API (Infrastruktur)

Flag fitur baru viewTransitionEnabled mengontrol View Transition API yang akan datang, yang memungkinkan transisi animasi antar view. Flag ini secara default bernilai false di versi 0.85 — ini adalah infrastruktur untuk rilis mendatang, bukan fitur yang dapat digunakan pengguna saat ini. Ini menandakan arah React Native menuju transisi navigasi bawaan yang mirip dengan Web View Transitions API.

Pertanyaan Interview: Arsitektur React Native 0.85

Bagi yang mempersiapkan interview React Native, berikut adalah pertanyaan kunci yang mencerminkan arsitektur 0.85:

Q: Masalah apa yang dipecahkan oleh Shared Animation Backend?

Shared Animation Backend menyatukan dua sistem rekonsiliasi animasi yang sebelumnya terpisah (Animated dan Reanimated) menjadi satu engine di inti React Native. Sebelum 0.85, optimisasi performa di satu sistem tidak dapat menguntungkan sistem lainnya. Shared backend juga menghilangkan batasan yang mencegah animasi property layout dengan native driver.

Q: Mengapa TurboModules melakukan lazy-load secara default di versi 0.85?

Registrasi eager semua TurboModules saat startup mengonsumsi memori untuk modul yang mungkin tidak pernah digunakan aplikasi selama sesi berlangsung. Lazy-loading menunda instansiasi hingga akses pertama, mengurangi penggunaan memori cold-start sekitar 40% tanpa mengubah API yang dihadapi developer.

Q: Jelaskan dua jalur pembaruan pada Animation Backend.

synchronouslyUpdateProps menangani perubahan property non-layout (opacity, transform) tanpa memicu commit Fabric. Ketika animasi memodifikasi property layout (width, height, padding), ini memicu full Fabric commit untuk perhitungan ulang layout yang tepat. Pendekatan jalur ganda ini mempertahankan performa untuk animasi sederhana sambil memungkinkan animasi layout pada native thread.

Q: Apa itu Shadow Tree commit branching?

Commit branching memisahkan pembaruan Shadow Tree yang didorong oleh animasi dari pembaruan yang didorong oleh state React ke dalam branch independen. Setiap branch melakukan commit secara independen, melakukan rekonsiliasi pada batas frame. Ini mencegah jank animasi yang disebabkan oleh re-render React yang bersaing untuk jalur commit yang sama — sumber umum frame drop pada scrolling list dengan elemen animasi.

Strict TypeScript API: Menuju Penegakan

Strict TypeScript API, yang diperkenalkan sebagai opt-in di React Native 0.80, melanjutkan perjalanannya untuk menjadi default. Untuk mengaktifkannya:

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

Strict API menghasilkan tipe langsung dari source code daripada mengelolanya secara manual. Ini membatasi export ke file indeks react-native publik, mencegah ketergantungan pada path file internal yang dapat berubah antar versi. Tim yang melakukan upgrade ke 0.85 sebaiknya mengaktifkan flag ini untuk mempersiapkan penegakan wajib di rilis mendatang.

Kesimpulan

• Shared Animation Backend menyatukan Animated dan Reanimated menjadi satu engine, memungkinkan animasi property layout dengan useNativeDriver: true untuk pertama kalinya
• React Native 0.85 menyelesaikan transisi post-bridge tanpa legacy interop, memotong memori cold-start 40% melalui TurboModules yang lazy-loaded
• Dukungan Metro TLS menyelesaikan kebutuhan HTTPS untuk lingkungan development enterprise
• Shadow Tree commit branching menghilangkan jank animasi yang disebabkan oleh commit React yang bersaing
• Strict TypeScript API sebaiknya diaktifkan sekarang untuk mempersiapkan penegakan wajib
• Tim harus mengatasi breaking changes (ekstraksi Jest preset, penghapusan StyleSheet.absoluteFillObject, persyaratan Node.js 20+) sebelum melakukan upgrade