`react-native-screens` `enableScreens(true)` — tác dụng gì?

Question

Luyện Phỏng Vấn IT · Accepted Answer

Mặc định trong RN cũ, mỗi screen của react-navigation render thành một <View> trong cùng cây React. Tất cả screen trong stack đều mount → giữ nguyên React tree → tốn memory và slow xuống khi navigate sâu.

enableScreens() (default true từ react-navigation v6+) bật react-native-screens package — wrap mỗi screen trong native screen container (UIViewController iOS, Fragment Android). Lợi ích:

1. OS-managed memory: screen không visible bị OS detach native views → giảm memory footprint.
2. Native back gesture iOS: swipe-back hoạt động đúng (built-in iOS UINavigationController behavior).
3. Native large title iOS: large title scroll-collapse animation chạy native.
4. Performance navigate: transition trên native thread, JS thread tự do.
5. Required cho native-stack: @react-navigation/native-stack mandate react-native-screens.

Setup:

ts

import { enableScreens } from 'react-native-screens'
enableScreens()

Gọi một lần ở top file index.js/App.tsx trước khi import navigation.

Pitfall: vài lib cũ (vd react-native-keyboard-aware-scroll-view) bị bug khi screen detach. 2026 đa số lib đã sync compat. Nếu cần debug, enableScreens(false) để verify problem có liên quan không.