React Native 0.85 nam 2026: Animation Backend moi, Strict TypeScript API va cau hoi phong van

React Native 0.85, được phát hành vào tháng 4 năm 2026, mang đến thay đổi đáng kể nhất cho hệ thống animation kể từ khi framework này ra đời. Với 604 commit từ 58 người đóng góp, phiên bản này giới thiệu Shared Animation Backend, hoàn thành quá trình chuyển đổi post-bridge và thêm hỗ trợ Metro TLS cho môi trường enterprise.

Shared Animation Backend: Thống nhất Animated và Reanimated

Tính năng nổi bật của React Native 0.85 là Shared Animation Backend, được xây dựng thông qua hợp tác với Software Mansion. Trước đây, thư viện Animated tích hợp sẵn và thư viện cộng đồng Reanimated duy trì các vòng reconciliation riêng biệt. Mỗi hệ thống vận hành logic nội bộ riêng để áp dụng các bản cập nhật animation, tạo ra một hệ sinh thái tách biệt trong đó cải thiện hiệu suất ở một hệ thống không thể mang lại lợi ích cho hệ thống kia.

Shared Animation Backend chuyển logic cập nhật animation cốt lõi trực tiếp vào renderer của React Native. Thay vì các commit dựa trên animation cạnh tranh với Shadow Tree cùng React và các thư viện styling, một cơ chế chuyên biệt xử lý chúng riêng rẽ.

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

Trước phiên bản 0.85, việc đặt useNativeDriver: true cho các thuộc tính layout như width hoặc height sẽ gây ra lỗi. Lập trình viên phải lựa chọn giữa animation mượt mà 60fps (native driver, giới hạn ở transform và opacity) hoặc animation giật lag trên JS-thread cho các thay đổi layout. Shared Animation Backend giải quyết hạn chế đã tồn tại suốt năm năm này.

Cơ chế hoạt động nội bộ của Animation Backend

C++ Animation Backend, trước đây được kiểm soát bởi cờ compiler -DRN_USE_ANIMATION_BACKEND, giờ được bật mặc định trong phiên bản 0.85. Hệ thống sử dụng hai đường dẫn cập nhật chuyên biệt:

• synchronouslyUpdateProps — đường dẫn nhanh cho các thay đổi không liên quan đến layout (opacity, transforms) bỏ qua chu kỳ commit Fabric đầy đủ
• Full Fabric commit — chỉ được kích hoạt khi cần tính toán lại layout (width, height, flex, padding)

Cách tiếp cận hai đường dẫn này đảm bảo các animation opacity đơn giản vẫn nhanh như trước, trong khi animation layout đạt được hiệu suất native-thread mà không bị hồi quy.

Kiến trúc Post-Bridge: Bridge đã biến mất

React Native 0.85 là phiên bản ổn định đầu tiên không có fallback bridge và không có lớp interop legacy. Kiến trúc mới dựa trên JSI (JavaScript Interface) cung cấp giao tiếp trực tiếp, đồng bộ giữa JavaScript và mã native với độ trễ interop dưới 2ms.

Tác động thực tế cho việc chuẩn bị phỏng vấn:

// 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 tải lazy theo mặc định trong phiên bản 0.85, giảm bộ nhớ cold-start gần 40%. Điều này loại bỏ hình phạt khởi động do đăng ký mọi native module một cách eager — một câu hỏi phỏng vấn thường gặp về tối ưu hiệu suất React Native.

Metro TLS: HTTPS cho Development Server

Các đội ngũ enterprise làm việc sau proxy công ty hoặc kiểm thử API chỉ hỗ trợ HTTPS trước đây cần giải pháp thay thế cho dev server Metro chỉ hỗ trợ HTTP. Metro giờ đây hỗ trợ TLS 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;

Cho việc phát triển local, mkcert tạo chứng chỉ đáng tin cậy mà không cần cài đặt CA thủ công. Fast Refresh hoạt động qua WSS khi TLS được bật, giữ cho hot-reload hoạt động trong môi trường bảo mật.

Breaking Changes và Hướng dẫn Di chuyển

Một số breaking changes cần được chú ý khi nâng cấp:

Trích xuất Jest Preset — preset tích hợp sẵn được chuyển sang @react-native/jest-preset:

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

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

StyleSheet.absoluteFillObject bị xóa — thay thế bằng StyleSheet.absoluteFill:

const overlay = StyleSheet.absoluteFillObject;

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

Yêu cầu phiên bản Node.js — tối thiểu Node.js 20.19.4. Phiên bản 21 và 23 (cả hai đều EOL) không được hỗ trợ.

Hành vi text overflow — văn bản ngoài giới hạn borderRadius giờ bị ẩn theo mặc định. Các component dựa vào overflow: visible cho văn bản vượt ra ngoài các góc bo tròn cần đặt rõ ràng overflow: 'visible'.

DevTools: Nhiều kết nối Debugger đồng thời

React Native 0.85 hỗ trợ nhiều kết nối Chrome DevTools Protocol (CDP) cùng lúc. VS Code, React Native DevTools và các AI-powered coding agent có thể kết nối đồng thời mà không ngắt phiên của nhau.

Điều này đặc biệt phù hợp với các đội ngũ sử dụng quy trình debug kết hợp nhiều công cụ. Network Panel trên Android khôi phục xem trước body request sau một lỗi hồi quy ở các phiên bản trước.

Shadow Tree Commit Branching

Cơ chế phân nhánh commit Fabric mới thay đổi căn bản cách React Native commit các bản cập nhật vào Shadow Tree. Trước đây, commit animation và cập nhật state React cạnh tranh cho cùng một đường dẫn commit, gây ra hiện tượng rơi frame trong các animation phức tạp kích hoạt re-render.

Cơ chế phân nhánh tách riêng các mối quan tâm này — Animation Backend hoạt động trên nhánh riêng trong khi các commit React tiến hành độc lập. Hai nhánh được reconcile vào cuối mỗi frame, ngăn chặn các vấn đề interleaving trước đây gây ra lỗi hình ảnh khi cuộn danh sách với animated header.

View Transition API (Cơ sở hạ tầng)

Cờ tính năng mới viewTransitionEnabled kiểm soát View Transition API sắp tới, cho phép các chuyển đổi animation giữa các view. Cờ này mặc định là false trong phiên bản 0.85 — đây là cơ sở hạ tầng cho phiên bản tương lai, không phải tính năng người dùng có thể sử dụng ngay. Nó cho thấy hướng đi của React Native về các chuyển đổi navigation tích hợp sẵn tương tự như Web View Transitions API.

Câu hỏi Phỏng vấn: Kiến trúc React Native 0.85

Dành cho những ai đang chuẩn bị phỏng vấn React Native, dưới đây là các câu hỏi quan trọng phản ánh kiến trúc 0.85:

Q: Shared Animation Backend giải quyết vấn đề gì?

Shared Animation Backend thống nhất hai hệ thống reconciliation animation trước đây tách biệt (Animated và Reanimated) thành một engine duy nhất trong lõi React Native. Trước phiên bản 0.85, tối ưu hiệu suất ở một hệ thống không thể mang lại lợi ích cho hệ thống kia. Shared backend cũng loại bỏ hạn chế ngăn cản việc animate các thuộc tính layout với native driver.

Q: Tại sao TurboModules tải lazy theo mặc định trong phiên bản 0.85?

Đăng ký eager tất cả TurboModules khi khởi động tiêu tốn bộ nhớ cho các module mà ứng dụng có thể không bao giờ sử dụng trong suốt phiên làm việc. Lazy-loading trì hoãn việc khởi tạo cho đến lần truy cập đầu tiên, giảm bộ nhớ cold-start khoảng 40% mà không thay đổi API mà lập trình viên sử dụng.

Q: Giải thích hai đường dẫn cập nhật trong Animation Backend.

synchronouslyUpdateProps xử lý các thay đổi thuộc tính không liên quan đến layout (opacity, transform) mà không kích hoạt commit Fabric. Khi animation sửa đổi các thuộc tính layout (width, height, padding), nó kích hoạt full Fabric commit để tính toán lại layout chính xác. Cách tiếp cận hai đường dẫn này duy trì hiệu suất cho animation đơn giản đồng thời cho phép animation layout trên native thread.

Q: Shadow Tree commit branching là gì?

Commit branching tách các cập nhật Shadow Tree được điều khiển bởi animation khỏi các cập nhật được điều khiển bởi state React thành các nhánh độc lập. Mỗi nhánh commit độc lập, reconcile tại ranh giới frame. Điều này ngăn chặn hiện tượng giật animation gây ra bởi các re-render React cạnh tranh cho cùng đường dẫn commit — nguồn gây rơi frame phổ biến khi cuộn danh sách với các phần tử animation.

Strict TypeScript API: Hướng tới Bắt buộc

Strict TypeScript API, được giới thiệu dưới dạng opt-in trong React Native 0.80, tiếp tục hành trình trở thành mặc định. Để kích hoạt:

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

Strict API tạo kiểu trực tiếp từ mã nguồn thay vì duy trì chúng thủ công. Nó giới hạn export vào file index react-native công khai, ngăn việc phụ thuộc vào đường dẫn file nội bộ có thể thay đổi giữa các phiên bản. Các đội ngũ nâng cấp lên 0.85 nên kích hoạt cờ này để chuẩn bị cho việc bắt buộc trong phiên bản tương lai.

Kết luận

• Shared Animation Backend thống nhất Animated và Reanimated thành một engine, cho phép animate thuộc tính layout với useNativeDriver: true lần đầu tiên
• React Native 0.85 hoàn thành quá trình chuyển đổi post-bridge không còn legacy interop, giảm bộ nhớ cold-start 40% thông qua TurboModules lazy-loaded
• Hỗ trợ Metro TLS giải quyết yêu cầu HTTPS cho môi trường development enterprise
• Shadow Tree commit branching loại bỏ hiện tượng giật animation gây ra bởi các commit React cạnh tranh
• Strict TypeScript API nên được kích hoạt ngay bây giờ để chuẩn bị cho việc bắt buộc
• Các đội ngũ cần giải quyết các breaking changes (trích xuất Jest preset, xóa StyleSheet.absoluteFillObject, yêu cầu Node.js 20+) trước khi nâng cấp