React Navigation 8.0 Alpha ra mắt: Tab dưới nền tảng gốc và TypeScript được cải tiến mạnh mẽ

React Navigation, thư viện định tuyến và điều hướng phổ biến dành cho các ứng dụng React Native và web, vừa công bố bản phát hành alpha 8.0 cùng với báo cáo tiến triển tháng 3 năm 2026. Bản cập nhật này giới thiệu thanh tab dưới (bottom tabs) gốc làm mặc định, cải thiện khả năng suy luận TypeScript và mang lại nhiều tính năng mới nhằm nâng cao trải nghiệm cho nhà phát triển.

Bản alpha, được công bố vào tháng 12 năm 2025, tập trung vào việc giảm thiểu các thay đổi lớn gây phá vỡ (breaking changes) trong khi vẫn mang đến những cải tiến mà cộng đồng đã mong đợi. Báo cáo tiến triển tiếp theo vào tháng 3 năm 2026 đã thêm các tinh chỉnh bổ sung, bao gồm việc bật deep linking theo mặc định, hỗ trợ Standard Schema và tích hợp biểu tượng gốc.

Thanh tab dưới sử dụng nền tảng gốc

Một trong những thay đổi dễ thấy nhất trong React Navigation 8.0 là Bottom Tab Navigator giờ đây sử dụng các nguyên thủy gốc (native primitives) của nền tảng làm mặc định trên iOS và Android, được hỗ trợ bởi react-native-screens. Điều này bao gồm hỗ trợ cho hiệu ứng kính lỏng (liquid glass effect) mới trên iOS 26.

Những nhà phát triển muốn sử dụng bản triển khai dựa trên JavaScript trước đây có thể chuyển lại bằng cách chuyển prop implementation thành custom cho bộ điều hướng. HB Nguyen, viết trên Medium, đã nhấn mạnh các tab gốc và hỗ trợ liquid glass là những lý do chính để áp dụng phiên bản mới, lưu ý rằng thư viện giờ đây "tương tác sâu hơn với giao diện người dùng gốc của thiết bị".

Cải thiện TypeScript

Hỗ trợ TypeScript đã nhận được các bản cập nhật quan trọng. API tĩnh được giới thiệu trong React Navigation 7 đã được thiết kế lại để các hook như useNavigation, useRoute và useNavigationState giờ đây tự động suy luận các kiểu dựa trên tên màn hình được cung cấp.

Thư viện cũng có thể suy luận trực tiếp các kiểu tham số từ các mẫu đường dẫn (path patterns) trong cấu hình liên kết (linking configuration), một cách tiếp cận lấy cảm hứng từ TanStack Router. Điều này giúp về mặt kỹ thuật có thể viết một ứng dụng hoàn chỉnh mà không cần bất kỳ chú thích kiểu thủ công nào cho việc điều hướng.

Tuy nhiên, không phải ai cũng hào hứng với chu kỳ nâng cấp liên tục. Một người dùng trên Reddit đã chia sẻ sự thất vọng:

"Tôi bị kiệt sức bởi cả chuỗi nâng cấp này. Nó dường như không bao giờ kết thúc. Mong ước Giáng sinh của tôi là một khung React Native ổn định."

"Tôi vừa nâng cấp xong lên kiến trúc mới và tất cả các vấn đề của nó (sự không ổn định của react-native-maps là một ví dụ). Vừa xong việc nâng cấp lên react navigation v7 mà v8 đã đến rồi."

Tính năng mới và tối ưu hóa

Báo cáo tiến triển tháng 3 đã giới thiệu các tính năng bổ sung, bao gồm tùy chọn inactiveBehavior mới tận dụng React.Activity của React 19 để tạm dừng các màn hình không hoạt động, giúp giảm thiểu việc kết xuất (re-render) không cần thiết.

Deep linking hiện được bật theo mặc định với khả năng tạo đường dẫn tự động từ tên màn hình. Thư viện cũng đã thêm hỗ trợ cho các thư viện xác thực Standard Schema như Zod và Valibot trong cấu hình liên kết. Khả năng truy cập trên web cũng được cải thiện, với thuộc tính inert hiện được sử dụng trên tất cả các bộ điều hướng để ẩn đúng cách các màn hình không được tập trung khỏi các công nghệ hỗ trợ.

Một API pushParams mới cho phép các nhà phát triển thêm mục vào ngăn xếp lịch sử bằng cách cập nhật tham số mà không cần đẩy một màn hình hoàn toàn mới. Điều này đặc biệt quan trọng trên web, nơi người dùng mong đợi rằng việc thay đổi một số trạng thái giao diện người dùng nhất định sẽ tạo một mục lịch sử mới có thể điều hướng bằng các nút quay lại và tiếp tục của trình duyệt.

Yêu cầu hệ thống

React Navigation 8.0 yêu cầu React 19, nghĩa là React Native 0.83 trở lên và Expo SDK 55 trở lên. Một hướng dẫn nâng cấp chi tiết đã được cung cấp, bao gồm tất cả các thay đổi phá vỡ và các bước di chuyển từ phiên bản 7.x.

React Navigation là một thư viện mã nguồn mở được duy trì bởi Satyajit Sahoo. Các nhà phát triển có thể dùng thử bản alpha ngay hôm nay bằng cách cài đặt các gói với thẻ @next.