Navigation

Navigation allows the user to switch from one view seamlessly. This makes it easier to use the app as it eliminates the need for users to search for a link that takes them to where they want to go like in some websites.

Setting Up Navigation

The first step in setting up navigation is to install and import NavigationContainer from @react-navigation/native. NavigationContainer functions similar to Provider in React; we wrap all our views inside the NavigationContainer so that we can switch from one to another.

Once we have our NavigationContainer installed we'll place our screens inside it. We do this by using Stack.Navigator and Stack.Screen. Stack.Navigator is our container for our screens, similar to our Router in React. We can set global options here like our buttons we want to persist on each page.

Our Stack.Screen is what we use to navigate to our different views. It functions like Route in React. This is what links each view and its components to the whole, so that everything is connected. In the end, the set up will look like this:

export const NavigationScreens: FC = ({}) => {
  return (
    <NavigationContainer> 
      <Stack.Navigator
      screenOptions={({navigation}) => ({
      headerRight: () => (
        <TouchableOpacity onPress={() => navigation.navigate("UserProfile")}>
          <Ionicons name="person-circle-outline" size={35} color="white" />
      </TouchableOpacity>
    ),
      headerLeft: () => (
        <TouchableOpacity onPress={() => navigation.navigate("RivalsList")}>
          <Ionicons name="chatbubble-ellipses-outline" size={35} color="white"/>
        </TouchableOpacity>
    ),
    headerTitle: () => (
      <TouchableOpacity onPress={() => navigation.navigate("HomePage")}>
          <Ionicons name="home-outline" size={35} color="white" />
        </TouchableOpacity>
    ),
    headerTitleAlign: "center",
    headerStyle:{
      backgroundColor:"#2D142C"
    },
    headerTintColor:"white"
    })} 
      >
        <Stack.Screen name="LogIn" component={LogIn} options={{ headerShown: false}} />
        <Stack.Screen name="SignUp" component={SignUpScreen} options={{headerShown: false}} />
        <Stack.Screen name="HomePage" component={HomePageScreen} />
        <Stack.Screen name="Chat" component={ChatScreen} />
        <Stack.Screen name="UserProfile" component={UserProfileScreen} />
        <Stack.Screen name="RivalsList" component={RivalsListScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

As you can see, we also have a lot of code in our screenOptions object. This object on our stack navigator allows us to apply a header, with icons you can press to navigate to certain pages, and styling to any screen we're on.

Navigation with Typescript

Because Typescript is a typed language, it gets angry if we try to do things in code without telling it what types they are. Because of this, we have to give our screens a type.

 export type RootStackParamList = {
  Navigation: undefined;
  LogIn: undefined;
  SignUp: undefined;
  HomePage: undefined;
  Chat: undefined;
  UserProfile: undefined;
  RivalsList: undefined
  AppTabs: undefined
}

Here we're telling Typescript that our screens are of the undefined type. Specifying a screen as undefined just means that it has no parameters. Next we define our stack, what we use to connect our screens together.

const Stack = createNativeStackNavigator<RootStackParamList>();

Here we take our type object we created and assign it to our stack which we create with the call createNativeStackNavigator. This allows us to connect our type object with our screens so we don't get errors when creating our routes.