Stack Navigation

In the stack navigation pattern, a user has to go from screen to screen to navigate through all screens, where each one is pushed on a stack. The only UI rendered is a header with the screen title and a back button.

Feed page with button to go to Catalog

Tab Navigation

In the tab navigation pattern, a user uses a tab bar to switch between screens.

Feed page with four tabs at the bottom

Drawer Navigation

In the drawer navigation pattern, a user uses a pane that can be opened by either swiping or tapping a button, which provides a menu where users can switch between screens.

Feed page with at pull-out menu from the right side of the screen

NavigationContainer Component

In the react-navigation library, components to be organized must be wrapped in a NavigationContainer component since it keeps track of the navigation structure and makes sure the navigators can operate.

import { NavigationContainer } from '@react-navigation/native'; const App = () => ( <NavigationContainer> { /* Insert your navigators and content here */ } </NavigationContainer> );

createStackNavigator Factory Method

In the react-navigation library, the stack navigator is created by the createStackNavigator factory method.

const Stack = createStackNavigator(); <Stack.Navigator> <Stack.Screen name="Feed" component={FeedScreen} /> <Stack.Screen name="Catalog" component={CatalogScreen} /> </Stack.Navigator>

createBottomTabNavigator Factory Method

In the react-navigation library, the bottom tab navigator is created by the createBottomTabNavigator factory method.

const Tab = createBottomTabNavigator(); <Tab.Navigator> <Tab.Screen name="Feed" component={FeedScreen} /> <Tab.Screen name="Catalog" component={CatalogScreen} /> </Tab.Navigator>

useNavigation Hook

In the react-navigation library, the useNavigation hook provides access to the navigation API and can be used to move users to different screens. It returns an object which is also passed as a navigation prop to screens and has multiple methods, including navigate (takes a screen name argument) and goBack.

// Using properties, only available in screen components const FeedScreen = (props) => { const nav = props.navigation; return ( <Button title="Go to home" onPress={() => nav.navigate('Home')} /> ); }; // Using the hook, available in all components const HomeButton = () => { const nav = useNavigation(); return ( <Button title="Go to home" onPress={() => nav.navigate('Home')} /> ); };

Factory Methods

In the react-navigation library, all navigators are created by factory methods that use a naming pattern like create<type>Navigator(), which returns an object with Navigator and Screen properties. These properties are unique components that you must use when rendering the navigation structure.

const Stack = createStackNavigator(); const Tab = createBottomTabNavigator(); // You can replace Tab with any other factory method result. <Tab.Navigator> <Tab.Screen name="Feed" component={FeedScreen} /> <Tab.Screen name="Catalog" component={CatalogScreen} /> </Tab.Navigator>

Related Courses

Course

Learn React Native

Intermediate

5 Lessons