React Navigation 8.0 Alpha: Native Bottom Tabs, TypeScript tự suy luận và pushParams cho history

TL;DR

Ngày 19/12/2025, Satyajit Sahoo và core team công bố React Navigation 8.0 Alpha (8.0.0-alpha.0). Tới tháng 4/2026, bản alpha đã chạy tới 8.0.0-alpha.25 và InfoQ vừa có recap chính thức. Ba điểm đáng chú ý nhất: (1) Bottom Tab Navigator dùng native primitives mặc định qua react-native-screens — iOS tự động có hiệu ứng liquid glass của iOS 26; (2) TypeScript inference được làm lại — useNavigation('Profile'), useRoute('Profile') tự infer type từ tên screen, thậm chí từ pattern URL trong linking config (lấy cảm hứng từ TanStack Router); (3) pushParams mới cho phép thêm history entry bằng cách update params, không cần push screen mới — back button trên trình duyệt cuối cùng cũng hoạt động đúng với UI state như filter hay modal. Yêu cầu React 19, React Native 0.83+, Expo SDK 55+. Cài đặt qua tag @next.

Cái gì mới

Highlight chính thức từ blog của React Navigation:

• Native Bottom Tabs by default — bottom tab navigator dùng react-native-screens để render native trên iOS & Android. Opt-out bằng implementation="custom" nếu cần customize sâu hoặc chạy trên Web.
• TypeScript inference đầy đủ — hooks useNavigation, useRoute, useNavigationState tự suy luận type từ screen name. Helper createStackScreen, createBottomTabScreen, createDrawerScreen, createNativeStackScreen infer params từ typed props của component hoặc từ linking.path.
• Linking-driven types — path profile/:userId kèm parse: { userId: (v) => Number(v) } tự động cho ra route.params.userId: number. Linking validation hỗ trợ Zod và Valibot qua Standard Schema.
• Deep link sau auth — option routeNamesChangeBehavior: 'lastUnhandled' lưu navigation action chưa xử lý được, replay tự động khi screen target xuất hiện (ví dụ sau khi login).
• History API pushParams — thêm entry vào history bằng cách update params, screen không re-mount, back button trả về param state cũ.
• Parent-aware hooks — useRoute('TabRoot'), useNavigation('TabRoot') truy cập parent route/navigation thay vì prop drilling.
• Persistor prop — built-in { persist(state), restore() } thay cho boilerplate onStateChange + initialState.
• Theming linh hoạt — chấp nhận PlatformColor, DynamicColorIOS trên native và CSS custom properties trên Web.
• Web a11y — dùng attribute inert để ẩn các screen không focus khỏi assistive tech.
• Performance — option inactiveBehavior dùng React 19 React.Activity để pause screen không active.

Tại sao quan trọng

Trong vài năm qua, React Navigation phải gồng để đuổi kịp hai thứ: (a) cảm giác native thật sự trên iOS/Android mà react-native-screens mang lại, và (b) DX của static-routing-modern (Next.js, TanStack Router) trên web. Bản 8 đặt cả hai vào core: native là default thay vì opt-in, types đến từ chính cấu hình route thay vì một RootStackParamList phải maintain song song. Nói cách khác, đây là bản đầu tiên không bắt bạn phải chọn giữa native feel và type safety — bạn được cả hai, gần như miễn phí.

"This makes it technically possible to write an entire app without any manual type annotations for navigation." — Satyajit Sahoo

Số liệu & kỹ thuật

Ví dụ TypeScript inference từ linking pattern (lấy cảm hứng TanStack Router):

const Stack = createStackNavigator({
  screens: {
    Profile: createStackScreen({
      screen: ProfileScreen,
      linking: {
        path: 'profile/:userId',
        parse: { userId: (v) => Number(v) },
      },
    }),
  },
});
// route.params.userId được tự suy ra là number

So với competitors

vs Expo Router: Expo Router thực ra build trên React Navigation. v8 với deep-link-by-default + auto path generation thu hẹp khoảng cách giữa file-based routing của Expo Router và component-based routing truyền thống. Nếu bạn đang chọn giữa hai cái, lý do để chọn Expo Router không còn nằm ở "types from URL" hay "deep linking ngon" nữa.

vs React Native Navigation (Wix): Lựa chọn quen thuộc khi đội cần fully-native controllers. Khi v8 đã coi react-native-screens là dependency cứng và biến native bottom tabs thành mặc định, performance gap gần như đóng lại — Wix giờ chủ yếu hấp dẫn các đội đã đầu tư hệ sinh thái native imperative.

Use cases thực tế

• Deep link từ email tới màn hình sau login — ví dụ /profile/settings khi user chưa đăng nhập. v8 queue lại action và replay khi isLoggedIn chuyển true. Hết support ticket kiểu "link em gửi không nhảy đúng chỗ".
• Trang list có filter trên web — đổi filter tạo history entry mới qua pushParams, không re-mount list, back/forward button browser hoạt động đúng.
• Modal/drawer mà state cần phản chiếu URL — vẫn dùng được pushParams mà không phá cấu trúc navigator.
• App iOS-first muốn polish native miễn phí — bật v8, tab bar tự có liquid glass và native animation.
• App đa nền tảng dùng design system — share token màu giữa native và web qua PlatformColor + CSS custom properties.

Limitations & pricing

• Alpha — "expect rough edges and breaking changes before the stable release" (BleepingSwift). API có thể còn đổi.
• Yêu cầu stack mới: React 19, React Native 0.83+, Expo SDK 55+. App đang ở RN 0.78/79 phải upgrade nền trước.
• react-native-screens bắt buộc — build fail nếu thiếu. Min react-native-web phải là ~0.21.0.
• Native tabs không có trên Web — fallback về JS implementation. Tùy chỉnh sâu trên iOS/Android cần opt-out bằng implementation="custom".
• API removals: navigators không còn nhận id prop; getParent chỉ nhận route names; headerBackTitleVisible đã bỏ; sceneContainerStyle đổi thành sceneStyle; vài layout args bị drop.
• Community fatigue thật: một số dev trên r/reactnative than "vừa upgrade v7 xong v8 đã ra".
• Pricing: miễn phí, open source, sponsor qua GitHub Sponsors và Callstack.

Cài đặt:

npm install @react-navigation/native@next @react-navigation/bottom-tabs@next

Tiếp theo là gì

Roadmap tới stable theo team core:

• API quản lý insets cho header và tab bar
• Navigation events trong React Navigation Devtools
• Tiếp tục cải thiện a11y trên Web qua inert
• Tích hợp đầy đủ React.Activity cho inactive screens

Bản alpha mới nhất là 8.0.0-alpha.25 (24/04/2026). Ngày stable chưa được công bố. Nếu bạn đang battling deep-link sau auth hoặc muốn thử native bottom tabs với liquid glass, spin một branch riêng cài @next rồi test — đây có vẻ là bản đáng chờ nhất kể từ v5.

Nguồn: InfoQ — Daniel Curtis, React Navigation blog, BleepingSwift, CHANGELOG.md trên GitHub.