Module 05 — Navigation

🎯 MỤC TIÊU HỌC TẬP

• Hiểu kiến trúc React Navigation: NavigationContainer, navigation state, navigator hierarchy
• Phân biệt và sử dụng đúng các loại navigator: Stack, Tab, Drawer
• Thiết kế nested navigation phức tạp cho ứng dụng thực tế
• Implement type-safe navigation với TypeScript ParamList
• Cấu hình Deep Linking với URL scheme, Universal Links, App Links
• Xây dựng Auth flow pattern chuẩn với conditional stack
• Tối ưu performance navigation với react-native-screens và lazy loading
• Điều hướng từ bên ngoài component bằng navigationRef

📖 HƯỚNG DẪN HỌC

🧭 Vòng lặp học module này

📚 LÝ THUYẾT CHI TIẾT

1. React Navigation Architecture

Navigation state trong React Navigation là một plain JavaScript object có cấu trúc cây. Mỗi navigator quản lý một phần state, các navigator lồng nhau tạo thành cây state phân cấp.

Cấu trúc cơ bản của navigation state:

{
  routes: [
    {
      name: "Home",
      key: "home-xxx",
      params: undefined
    },
    {
      name: "Profile",
      key: "profile-xxx",
      params: { userId: "42" }
    }
  ],
  index: 1,
  type: "stack"
}

Trong đó index trỏ tới route đang active trong mảng routes. Mỗi navigator type (stack, tab, drawer) có thể thêm các field riêng vào state.

Setup cơ bản của NavigationContainer:

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. Navigator Types — Khi nào dùng cái nào

3. Nested Navigation

Pattern phổ biến nhất trong ứng dụng thực tế: Tab chứa Stack. Mỗi tab có stack navigator riêng, cho phép navigate sâu vào detail mà vẫn giữ tab bar.

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Tab = createBottomTabNavigator();
const HomeStack = createNativeStackNavigator();
const ProfileStack = createNativeStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="HomeMain" component={HomeScreen} />
      <HomeStack.Screen name="ProductDetail" component={ProductDetailScreen} />
    </HomeStack.Navigator>
  );
}

function ProfileStackScreen() {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="ProfileMain" component={ProfileScreen} />
      <ProfileStack.Screen name="EditProfile" component={EditProfileScreen} />
      <ProfileStack.Screen name="Settings" component={SettingsScreen} />
    </ProfileStack.Navigator>
  );
}

function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeStackScreen}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileStackScreen}
        options={{ headerShown: false }}
      />
    </Tab.Navigator>
  );
}

Khi nest Tab trong Stack, nhớ set headerShown: false cho tab screen để tránh double header (header của Stack + header của Tab).

Stack chứa Modal

Pattern cho modal full-screen: đặt modal screen trong group riêng với presentation: "modal".

function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
      </Stack.Group>
      <Stack.Group screenOptions={{ presentation: "modal" }}>
        <Stack.Screen name="CreatePost" component={CreatePostScreen} />
        <Stack.Screen name="ImagePicker" component={ImagePickerScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
}

Modal screen sẽ slide lên từ dưới (iOS) hoặc fade in (Android), và có thể dismiss bằng swipe down.

4. Screen Options

Screen options cho phép cấu hình header, animation, gesture cho từng screen hoặc toàn bộ navigator.

<Stack.Screen
  name="Profile"
  component={ProfileScreen}
  options={{
    title: "Hồ sơ",
    headerShown: true,
    headerStyle: { backgroundColor: "#1a1d27" },
    headerTintColor: "#fff",
    headerTitleStyle: { fontWeight: "bold" },
    headerRight: () => (
      <TouchableOpacity onPress={handleSettings}>
        <Icon name="settings" size={24} color="#fff" />
      </TouchableOpacity>
    ),
  }}
/>

Có thể set options động từ bên trong screen bằng navigation.setOptions():

function ProfileScreen({ navigation, route }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: route.params?.userName ?? "Profile",
    });
  }, [navigation, route.params?.userName]);

  return <View>...</View>;
}

Custom Header

<Stack.Navigator
  screenOptions={{
    header: ({ navigation, route, options }) => (
      <SafeAreaView style={{ backgroundColor: "#1a1d27" }}>
        <View style={{ flexDirection: "row", alignItems: "center", height: 56, paddingHorizontal: 16 }}>
          {navigation.canGoBack() && (
            <TouchableOpacity onPress={navigation.goBack}>
              <Icon name="arrow-back" size={24} color="#fff" />
            </TouchableOpacity>
          )}
          <Text style={{ color: "#fff", fontSize: 18, fontWeight: "bold", marginLeft: 12 }}>
            {options.title ?? route.name}
          </Text>
        </View>
      </SafeAreaView>
    ),
  }}
>

5. Navigation Actions — Navigate vs Push vs Replace vs Reset

6. Passing Params & Type-Safe Navigation

Để truyền dữ liệu giữa các screen, dùng params:

navigation.navigate("ProductDetail", { productId: "abc123", title: "iPhone 15" });

Nhận params trong screen đích:

function ProductDetailScreen({ route }) {
  const { productId, title } = route.params;
  return <Text>{title} - {productId}</Text>;
}

Type-Safe với TypeScript

Khai báo ParamList — một type map giữa tên screen và params tương ứng:

type RootStackParamList = {
  Home: undefined;
  ProductDetail: { productId: string; title: string };
  Cart: { couponCode?: string };
  Search: { query: string; category?: string };
};

Tạo typed navigator:

import { NativeStackScreenProps } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator<RootStackParamList>();

Typed screen props:

type ProductDetailProps = NativeStackScreenProps<RootStackParamList, "ProductDetail">;

function ProductDetailScreen({ route, navigation }: ProductDetailProps) {
  const { productId, title } = route.params;

  const goToCart = () => {
    navigation.navigate("Cart", { couponCode: "SAVE10" });
  };

  return (
    <View>
      <Text>{title}</Text>
      <Button title="Go to Cart" onPress={goToCart} />
    </View>
  );
}

Khi dùng useNavigation hook bên ngoài screen component:

import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";

type NavigationProp = NativeStackNavigationProp<RootStackParamList>;

function ProductCard({ product }: { product: Product }) {
  const navigation = useNavigation<NavigationProp>();

  return (
    <TouchableOpacity
      onPress={() =>
        navigation.navigate("ProductDetail", {
          productId: product.id,
          title: product.title,
        })
      }
    >
      <Text>{product.title}</Text>
    </TouchableOpacity>
  );
}

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

Sau khai báo này, useNavigation() sẽ tự có type-safe mà không cần generic.

7. Navigation State Persistence

Lưu navigation state qua app restart (hữu ích cho development hoặc user experience):

import AsyncStorage from "@react-native-async-storage/async-storage";

const PERSISTENCE_KEY = "NAVIGATION_STATE_V1";

function App() {
  const [isReady, setIsReady] = React.useState(false);
  const [initialState, setInitialState] = React.useState();

  React.useEffect(() => {
    const restoreState = async () => {
      try {
        const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
        const state = savedStateString
          ? JSON.parse(savedStateString)
          : undefined;
        setInitialState(state);
      } finally {
        setIsReady(true);
      }
    };

    if (!isReady) {
      restoreState();
    }
  }, [isReady]);

  if (!isReady) return null;

  return (
    <NavigationContainer
      initialState={initialState}
      onStateChange={(state) =>
        AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
      }
    >
      <RootStack />
    </NavigationContainer>
  );
}

8. Navigate từ bên ngoài Component — navigationRef

Khi cần navigate từ nơi không có access đến navigation prop (service, saga, interceptor), dùng navigationRef:

import { createNavigationContainerRef } from "@react-navigation/native";

export const navigationRef = createNavigationContainerRef<RootStackParamList>();

export function navigateOutside(name: string, params?: object) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name as any, params as any);
  }
}

Gắn ref vào NavigationContainer:

<NavigationContainer ref={navigationRef}>
  <RootStack />
</NavigationContainer>

Sử dụng trong axios interceptor:

axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      navigateOutside("Login");
    }
    return Promise.reject(error);
  }
);

9. Deep Linking

Cấu hình linking trong React Navigation:

const linking = {
  prefixes: ["myapp://", "https://myapp.com"],
  config: {
    screens: {
      Main: {
        screens: {
          Home: {
            screens: {
              HomeMain: "home",
              ProductDetail: "product/:productId",
            },
          },
          Profile: "profile",
        },
      },
      Cart: "cart",
      NotFound: "*",
    },
  },
};

function App() {
  return (
    <NavigationContainer linking={linking} fallback={<LoadingScreen />}>
      <RootStack />
    </NavigationContainer>
  );
}

Với config trên, URL myapp://product/123 sẽ navigate đến ProductDetail screen với route.params.productId = "123".

Test deep linking trong development:

npx uri-scheme open "myapp://product/123" --ios

adb shell am start -W -a android.intent.action.VIEW -d "myapp://product/123" com.myapp

10. Prevent Going Back — beforeRemove

Dùng beforeRemove event để cảnh báo user trước khi rời khỏi screen có unsaved changes:

function EditProfileScreen({ navigation }) {
  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);

  React.useEffect(() => {
    const unsubscribe = navigation.addListener("beforeRemove", (e) => {
      if (!hasUnsavedChanges) return;

      e.preventDefault();

      Alert.alert(
        "Bỏ thay đổi?",
        "Bạn có thay đổi chưa lưu. Bạn chắc chắn muốn rời đi?",
        [
          { text: "Ở lại", style: "cancel" },
          {
            text: "Rời đi",
            style: "destructive",
            onPress: () => navigation.dispatch(e.data.action),
          },
        ]
      );
    });

    return unsubscribe;
  }, [navigation, hasUnsavedChanges]);

  return <View>...</View>;
}

11. Auth Flow Pattern

Pattern chuẩn: dùng conditional rendering để switch giữa Auth stack và Main stack dựa trên authentication state. Không dùng navigate/reset để chuyển — React Navigation sẽ tự handle transition animation.

function RootNavigator() {
  const { isSignedIn, isLoading } = useAuth();

  if (isLoading) {
    return <SplashScreen />;
  }

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {isSignedIn ? (
        <Stack.Screen name="Main" component={MainTabs} />
      ) : (
        <Stack.Screen
          name="Auth"
          component={AuthStack}
          options={{ animationTypeForReplace: "pop" }}
        />
      )}
    </Stack.Navigator>
  );
}

12. Performance Optimization

react-native-screens

react-native-screens sử dụng native view (UIViewController trên iOS, Fragment trên Android) thay vì giữ tất cả screen trong cùng một React Native view hierarchy. Screen không hiển thị sẽ bị detach khỏi view hierarchy → tiết kiệm memory.

import { enableScreens } from "react-native-screens";

enableScreens();

Từ React Navigation v6+, react-native-screens được enable tự động khi dùng @react-navigation/native-stack.

Lazy Loading Screens

Mặc định, tất cả tab screen render ngay khi Tab Navigator mount. Dùng lazy để chỉ render khi user navigate đến tab đó:

<Tab.Navigator screenOptions={{ lazy: true }}>
  <Tab.Screen name="Home" component={HomeStack} />
  <Tab.Screen name="Search" component={SearchStack} />
  <Tab.Screen name="Profile" component={ProfileStack} />
</Tab.Navigator>

Detach Inactive Screens (Stack)

<Stack.Navigator screenOptions={{ detachPreviousScreen: true }}>
  ...
</Stack.Navigator>

Khi detachPreviousScreen: true, screen phía dưới sẽ bị unmount khi không nhìn thấy, giảm memory usage cho stack sâu.

13. Custom Tab Bar

Khi design yêu cầu tab bar khác mặc định (custom icon, animation, floating tab bar):

function CustomTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{
      flexDirection: "row",
      backgroundColor: "#1a1d27",
      paddingBottom: 20,
      paddingTop: 10,
      borderTopWidth: 1,
      borderTopColor: "#2e3347",
    }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel ?? options.title ?? route.name;
        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: "tabPress",
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
          <TouchableOpacity
            key={route.key}
            onPress={onPress}
            style={{ flex: 1, alignItems: "center" }}
          >
            <Icon
              name={getIconName(route.name)}
              size={24}
              color={isFocused ? "#6c63ff" : "#8b8fa8"}
            />
            <Text style={{
              color: isFocused ? "#6c63ff" : "#8b8fa8",
              fontSize: 11,
              marginTop: 4,
            }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

<Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>
  ...
</Tab.Navigator>

❓ CÂU HỎI PHỎNG VẤN + ĐÁP ÁN

🛠️ Debug playbook: navigation bug

navigation.navigate("Main", {
  screen: "Home",
  params: {
    screen: "ProductDetail",
    params: { productId: "123" },
  },
});

🏋️ BÀI TẬP

🧩 MINI EXERCISE THỰC TẾ REACT NATIVE

⚠️ LỖI THƯỜNG GẶP

🏢 CASE ĐI LÀM THẬT

🧠 GHI NHỚ NHANH

❔ CÂU HỎI TỰ KIỂM TRA

✅ CHECKLIST TỰ ĐÁNH GIÁ

📎 TÀI NGUYÊN