React NativeMặ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:
import { enableScreens } from 'react-native-screens'
enableScreens()Gọi một lần ở top file index.js/App.tsx trước khi import navigation.
Lưu ý: 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.
In old RN defaults, each react-navigation screen rendered as a <View> inside the same React tree. Every screen in the stack stayed mounted → the React tree grew → memory and performance suffered as you navigated deeper.
enableScreens() (default true since react-navigation v6+) turns on react-native-screens — each screen is wrapped in a native screen container (UIViewController on iOS, Fragment on Android). Benefits:
1. OS-managed memory: off-screen screens have their native views detached by the OS → smaller memory footprint.
2. Native iOS back gesture: swipe-back works correctly (built-in UINavigationController behaviour).
3. Native iOS large title: the large-title scroll-collapse animation runs natively.
4. Faster navigation: transitions run on the native thread, the JS thread stays free.
5. Required for native-stack: @react-navigation/native-stack mandates react-native-screens.
Setup:
import { enableScreens } from 'react-native-screens'
enableScreens()Call once at the top of index.js/App.tsx, before importing navigation.
Pitfall: a few legacy libraries (e.g. react-native-keyboard-aware-scroll-view) misbehave when screens detach. By 2026 most are fixed. To debug, enableScreens(false) lets you verify whether the issue is related.