Navigation.md

TabNavigator

TabNavigator is not shipped with a Header. The most common case is to make your TabNavigator the root navigator, and make each tab a StackNavigator you would then get the header cause it's part of the StackNavigator by default.

Hiding tab bar in specific screens

createMaterialTopTabNavigator

npm install @react-navigation/material-top-tabs react-native-tab-view

Navigation Options

Root Navigator - used to switch between major navigation flows of the app, consists of

• auth flow - registration, login, etc
• main flow - uses Main Navigator

Main Navigator - displays an auth flow or other user flows

Strongly typed navigators createStackNavigator<Type>
Would prefer if we use MobX State Tree store(s) to handle state rather than navigation params

Type checking with TypeScript

Resetting the navigation stack

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

navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [
      { name: "Home" },
      {
        name: "Profile",
        params: { user: "johnSmith" },
      },
    ],
  })
);

Navigation events - listeners prop on Screen

type ParamList = {
  Home: {
    more: MoreProps;
  };
};

const route = useRoute<RouteProp<ParamList, 'Home'>>();