React Native 0.85 ในปี 2026: Animation Backend ใหม่, Strict TypeScript API และคำถามสัมภาษณ์

React Native 0.85 ซึ่งเปิดตัวในเดือนเมษายน 2026 นำเสนอการเปลี่ยนแปลงระบบ animation ที่สำคัญที่สุดนับตั้งแต่ framework นี้ถือกำเนิดขึ้น ด้วย 604 commits จากผู้มีส่วนร่วม 58 คน เวอร์ชันนี้เปิดตัว Shared Animation Backend เสร็จสิ้นการเปลี่ยนผ่าน post-bridge และเพิ่มการรองรับ Metro TLS สำหรับสภาพแวดล้อม enterprise

Shared Animation Backend: รวม Animated และ Reanimated เป็นหนึ่งเดียว

ฟีเจอร์หลักของ React Native 0.85 คือ Shared Animation Backend ที่สร้างขึ้นจากความร่วมมือกับ Software Mansion ก่อนหน้านี้ ไลบรารี Animated ที่มาพร้อมระบบและไลบรารีชุมชน Reanimated ดำเนินการ reconciliation loop แยกจากกัน แต่ละระบบมีตรรกะภายในของตัวเองในการใช้งาน animation updates สร้างระบบนิเวศแบบแยกส่วนที่การปรับปรุงประสิทธิภาพในระบบหนึ่งไม่สามารถเป็นประโยชน์ต่ออีกระบบหนึ่งได้

Shared Animation Backend ย้ายตรรกะหลักของการอัปเดต animation โดยตรงเข้าไปใน renderer ของ React Native แทนที่จะให้ commits ที่ใช้ animation แข่งขันกันใน Shadow Tree ร่วมกับ React และไลบรารี styling กลไกเฉพาะทางจะจัดการแยกต่างหาก

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 จะทำให้เกิดข้อผิดพลาด นักพัฒนาต้องเลือกระหว่าง animation ที่ลื่นไหล 60fps (native driver จำกัดเฉพาะ transform และ opacity) หรือ animation ที่กระตุกบน JS-thread สำหรับการเปลี่ยนแปลง layout Shared Animation Backend แก้ปัญหาข้อจำกัดที่มีมานานห้าปีนี้

กลไกการทำงานภายในของ Animation Backend

C++ Animation Backend ที่ก่อนหน้านี้ถูกควบคุมด้วย compiler flag -DRN_USE_ANIMATION_BACKEND ถูกเปิดใช้งานเป็นค่าเริ่มต้นในเวอร์ชัน 0.85 ระบบใช้สองเส้นทางการอัปเดตเฉพาะ:

• synchronouslyUpdateProps — เส้นทางด่วนสำหรับการเปลี่ยนแปลงที่ไม่เกี่ยวกับ layout (opacity, transforms) ที่ข้ามวงจร Fabric commit แบบเต็ม
• Full Fabric commit — ถูกกระตุ้นเฉพาะเมื่อต้องคำนวณ layout ใหม่ (width, height, flex, padding)

แนวทางสองเส้นทางนี้หมายความว่า animation opacity แบบง่ายยังคงเร็วเท่าเดิม ในขณะที่ animation layout ได้รับประสิทธิภาพ native-thread โดยไม่มี regression

สถาปัตยกรรม Post-Bridge: Bridge หายไปแล้ว

React Native 0.85 เป็นเวอร์ชันเสถียรแรกที่ไม่มี bridge fallback และไม่มีชั้น interop แบบ legacy สถาปัตยกรรมใหม่ที่ใช้ JSI (JavaScript Interface) ให้การสื่อสารโดยตรงแบบ synchronous ระหว่าง JavaScript และโค้ด native ด้วย interop latency ต่ำกว่า 2ms

ผลกระทบในทางปฏิบัติสำหรับการเตรียมสัมภาษณ์:

// 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 โหลดแบบ lazy เป็นค่าเริ่มต้นในเวอร์ชัน 0.85 ลดหน่วยความจำ cold-start ลงเกือบ 40% ซึ่งขจัดบทลงโทษด้านการเริ่มต้นจากการลงทะเบียน native module ทุกตัวแบบ eager — คำถามสัมภาษณ์ที่พบบ่อยเกี่ยวกับการเพิ่มประสิทธิภาพ React Native

Metro TLS: HTTPS สำหรับ Development Server

ทีม enterprise ที่ทำงานอยู่หลัง corporate proxy หรือทดสอบ API ที่รองรับเฉพาะ HTTPS ก่อนหน้านี้ต้องหาวิธีแก้ไขปัญหาเฉพาะหน้าสำหรับ dev server ของ 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 สร้าง certificate ที่เชื่อถือได้โดยไม่ต้องติดตั้ง CA ด้วยตนเอง Fast Refresh ทำงานผ่าน WSS เมื่อเปิดใช้ TLS ทำให้ hot-reload ยังคงทำงานได้ในสภาพแวดล้อมที่ปลอดภัย

Breaking Changes และคู่มือการย้ายระบบ

Breaking changes หลายรายการต้องได้รับความสนใจระหว่างการอัปเกรด:

การแยก Jest Preset — preset ที่มาพร้อมระบบถูกย้ายไปที่ @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) ไม่รองรับ

พฤติกรรม text overflow — ข้อความนอกขอบเขต borderRadius ถูกซ่อนโดยค่าเริ่มต้น Component ที่พึ่งพา overflow: visible สำหรับข้อความที่ขยายเกินมุมมน ต้องกำหนด overflow: 'visible' อย่างชัดเจน

DevTools: การเชื่อมต่อ Debugger พร้อมกันหลายตัว

React Native 0.85 รองรับการเชื่อมต่อ Chrome DevTools Protocol (CDP) หลายตัวพร้อมกัน VS Code, React Native DevTools และ AI-powered coding agent สามารถเชื่อมต่อพร้อมกันโดยไม่ตัดเซสชันของกันและกัน

สิ่งนี้มีความเกี่ยวข้องอย่างยิ่งสำหรับทีมที่ใช้ขั้นตอนการ debug ที่รวมเครื่องมือหลายตัว Network Panel บน Android กู้คืนการแสดงตัวอย่าง body ของ request หลังจาก regression ในเวอร์ชันก่อนหน้า

Shadow Tree Commit Branching

กลไก branching commit ของ Fabric ใหม่เปลี่ยนแปลงวิธีที่ React Native commit การอัปเดตไปยัง Shadow Tree อย่างมีนัยสำคัญ ก่อนหน้านี้ commit ของ animation และการอัปเดต state ของ React แข่งขันกันในเส้นทาง commit เดียวกัน ทำให้เกิดการ drop frame ระหว่าง animation ที่ซับซ้อนที่กระตุ้น re-render

กลไก branching แยกความกังวลเหล่านี้ออกจากกัน — Animation Backend ทำงานบน branch ของตัวเองในขณะที่ commit ของ React ดำเนินการแยกอิสระ ทั้งสอง branch จะ reconcile กันที่ท้ายแต่ละ frame ป้องกันปัญหา interleaving ที่ก่อนหน้านี้ทำให้เกิดภาพกระตุกระหว่างการเลื่อนรายการที่มี animated header

View Transition API (โครงสร้างพื้นฐาน)

Feature flag ใหม่ viewTransitionEnabled ควบคุม View Transition API ที่กำลังจะมา ซึ่งเปิดใช้งาน animated transition ระหว่าง view Flag นี้มีค่าเริ่มต้นเป็น false ในเวอร์ชัน 0.85 — นี่คือโครงสร้างพื้นฐานสำหรับเวอร์ชันในอนาคต ไม่ใช่ฟีเจอร์ที่ผู้ใช้สามารถใช้งานได้ในขณะนี้ สิ่งนี้แสดงถึงทิศทางของ React Native ที่มุ่งสู่ navigation transition ที่มาพร้อมระบบ คล้ายกับ Web View Transitions API

คำถามสัมภาษณ์: สถาปัตยกรรม React Native 0.85

สำหรับผู้ที่กำลังเตรียมตัวสัมภาษณ์ React Native ต่อไปนี้คือคำถามสำคัญที่สะท้อนสถาปัตยกรรม 0.85:

Q: Shared Animation Backend แก้ปัญหาอะไร?

Shared Animation Backend รวมสองระบบ animation reconciliation ที่แยกจากกัน (Animated และ Reanimated) เป็น engine เดียวในแกนหลักของ React Native ก่อนเวอร์ชัน 0.85 การเพิ่มประสิทธิภาพในระบบหนึ่งไม่สามารถเป็นประโยชน์ต่ออีกระบบหนึ่ง Shared backend ยังลบข้อจำกัดที่ป้องกันการ animate คุณสมบัติ layout ด้วย native driver

Q: ทำไม TurboModules จึงโหลดแบบ lazy เป็นค่าเริ่มต้นในเวอร์ชัน 0.85?

การลงทะเบียน TurboModules ทั้งหมดแบบ eager ตอนเริ่มต้นใช้หน่วยความจำสำหรับ module ที่แอปอาจไม่เคยใช้ในระหว่างเซสชัน Lazy-loading เลื่อนการสร้าง instance ออกไปจนกว่าจะมีการเข้าถึงครั้งแรก ลดหน่วยความจำ cold-start ประมาณ 40% โดยไม่เปลี่ยน API ที่นักพัฒนาใช้งาน

Q: อธิบายสองเส้นทางอัปเดตใน Animation Backend

synchronouslyUpdateProps จัดการการเปลี่ยนแปลงคุณสมบัติที่ไม่เกี่ยวกับ layout (opacity, transform) โดยไม่กระตุ้น Fabric commit เมื่อ animation แก้ไขคุณสมบัติ layout (width, height, padding) จะกระตุ้น full Fabric commit สำหรับการคำนวณ layout ใหม่ที่ถูกต้อง แนวทางสองเส้นทางนี้รักษาประสิทธิภาพสำหรับ animation อย่างง่ายพร้อมเปิดใช้งาน animation layout บน native thread

Q: Shadow Tree commit branching คืออะไร?

Commit branching แยกการอัปเดต Shadow Tree ที่ขับเคลื่อนด้วย animation ออกจากการอัปเดตที่ขับเคลื่อนด้วย state ของ React เป็น branch อิสระ แต่ละ branch commit แยกอิสระจากกัน โดย reconcile ที่ขอบเขตของ frame สิ่งนี้ป้องกันการกระตุกของ animation ที่เกิดจาก re-render ของ React ที่แข่งขันในเส้นทาง commit เดียวกัน — สาเหตุทั่วไปของการ drop frame เมื่อเลื่อนรายการที่มีองค์ประกอบ animation

Strict TypeScript API: มุ่งสู่การบังคับใช้

Strict TypeScript API ที่เปิดตัวแบบ opt-in ใน React Native 0.80 ดำเนินเส้นทางต่อไปเพื่อเป็นค่าเริ่มต้น การเปิดใช้งาน:

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

Strict API สร้างประเภทข้อมูลโดยตรงจากซอร์สโค้ดแทนที่จะดูแลรักษาด้วยตนเอง จำกัดการ export เฉพาะไฟล์ index react-native สาธารณะ ป้องกันการพึ่งพาเส้นทางไฟล์ภายในที่อาจเปลี่ยนแปลงระหว่างเวอร์ชัน ทีมที่อัปเกรดเป็น 0.85 ควรเปิดใช้ flag นี้เพื่อเตรียมพร้อมสำหรับการบังคับใช้ในเวอร์ชันอนาคต

สรุป

• Shared Animation Backend รวม Animated และ Reanimated เป็น engine เดียว เปิดใช้งาน animation คุณสมบัติ layout ด้วย useNativeDriver: true เป็นครั้งแรก
• React Native 0.85 เสร็จสิ้นการเปลี่ยนผ่าน post-bridge โดยไม่มี legacy interop ลดหน่วยความจำ cold-start 40% ผ่าน TurboModules แบบ lazy-loaded
• การรองรับ Metro TLS แก้ปัญหาข้อกำหนด HTTPS สำหรับสภาพแวดล้อม development ขององค์กร
• Shadow Tree commit branching ขจัดการกระตุกของ animation ที่เกิดจาก commit ของ React ที่แข่งขันกัน
• Strict TypeScript API ควรเปิดใช้งานตั้งแต่ตอนนี้เพื่อเตรียมพร้อมสำหรับการบังคับใช้
• ทีมควรจัดการ breaking changes (การแยก Jest preset, การลบ StyleSheet.absoluteFillObject, ข้อกำหนด Node.js 20+) ก่อนอัปเกรด