React Navigation

react-navigation is the most popular navigation library for React Native. It is easy to use and provides a lot of features out of the box. It is also highly customizable and extensible. It is a great choice for most apps nowadays, while waiting for Expo Router to become stable and ready for production. It looks promising! 🔥

Probably nothing we can add here that doesn’t exist in the official docs except that we are using native stack navigation instead of the default one.

All the navigation-related code is located in the src/navigation folder. We opted for this approach to keep the project structure clean and easy to navigate.

One last thing to mention is that we added a global declaration for the ReactNavigation namespace to add TypeScript support to the navigate function from the useNavigation hook.

import type { RouteProp as NRouteProp } from '@react-navigation/native';

import type { AuthStackParamList } from './auth-navigator';
import type { FeedStackParamList } from './feed-navigator';

export type RootStackParamList = AuthStackParamList & FeedStackParamList; //  & FooStackParamList & BarStackParamList
// very important to type check useNavigation hook
declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RouteProp<T extends keyof RootStackParamList> = NRouteProp<
  RootStackParamList,
  T
>;

Once you add a new stack navigator, you need to include it in the RootStackParamList type, as mentioned in the snippet above.

The Demo app comes with a simple stack and tabs navigator. Feel free to remove what is not working for you and add your own using the same approach as the existing ones. Also, remember to add the typing to the RootStackParamList type.

Here is a simple example of the feed stack navigator.

import { useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';

import { AddPost, Feed, Post } from '@/screens';
import { Pressable, Text } from '@/ui';

export type FeedStackParamList = {
  Feed: undefined;
  Post: { id: number };
  AddPost: undefined;
};

const Stack = createNativeStackNavigator<FeedStackParamList>();

const GoToAddPost = () => {
  const { navigate } = useNavigation();
  return (
    <Pressable onPress={() => navigate('AddPost')} className="p-2">
      <Text className="text-primary-300">Create</Text>
    </Pressable>
  );
};

export const FeedNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Group
        screenOptions={{
          // eslint-disable-next-line react/no-unstable-nested-components
          headerRight: () => <GoToAddPost />,
        }}
      >
        <Stack.Screen name="Feed" component={Feed} />
        <Stack.Screen name="Post" component={Post} />
      </Stack.Group>

      <Stack.Screen name="AddPost" component={AddPost} />
    </Stack.Navigator>
  );
};

Make sure to check the official docs for more information and examples about react-navigation.