10/2/23, 1:10 PM Learn React Native: Navigation Cheatsheet | Codecademy

Cheatsheets / Learn React Native

Navigation

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.

https://www.codecademy.com/learn/learn-react-native/modules/navigation-react-native/cheatsheet 1/6
10/2/23, 1:10 PM Learn React Native: Navigation Cheatsheet | Codecademy

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

https://www.codecademy.com/learn/learn-react-native/modules/navigation-react-native/cheatsheet 2/6
10/2/23, 1:10 PM Learn React Native: Navigation Cheatsheet | Codecademy

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.

NavigationContainer Component
In the react-navigation library, components to be import { NavigationContainer } from
organized must be wrapped in a
'@react-navigation/native';
NavigationContainer component since it keeps
track of the navigation structure and makes sure the
navigators can operate. const App = () => (
<NavigationContainer>
{ /* Insert your navigators and
content here */ }
</NavigationContainer>
);

https://www.codecademy.com/learn/learn-react-native/modules/navigation-react-native/cheatsheet 3/6
10/2/23, 1:10 PM Learn React Native: Navigation Cheatsheet | Codecademy

createStackNavigator Factory Method

In the react-navigation library, the stack navigator is const Stack = createStackNavigator();
created by the createStackNavigator factory
method.
<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 const Tab = createBottomTabNavigator();
navigator is created by the
createBottomTabNavigator factory method.
<Tab.Navigator>
<Tab.Screen name="Feed" component=
{FeedScreen} />
<Tab.Screen name="Catalog" component=
{CatalogScreen} />
</Tab.Navigator>

https://www.codecademy.com/learn/learn-react-native/modules/navigation-react-native/cheatsheet 4/6
10/2/23, 1:10 PM Learn React Native: Navigation Cheatsheet | Codecademy

useNavigation Hook
In the react-navigation library, the useNavigation // Using properties, only available in
hook provides access to the navigation API and can be
screen components
used to move users to different screens. It returns an
object which is also passed as a navigation prop to const FeedScreen = (props) => {
screens and has multiple methods, including navigate const nav = props.navigation;
(takes a screen name argument) and goBack .

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 const Stack = createStackNavigator();
created by factory methods that use a naming pattern
const Tab = createBottomTabNavigator();
like create<type>Navigator() , which returns an
object with Navigator and Screen properties.
These properties are unique components that you // You can replace Tab with any other
must use when rendering the navigation structure.
factory method result.
<Tab.Navigator>
<Tab.Screen name="Feed" component=
{FeedScreen} />
<Tab.Screen name="Catalog" component=
{CatalogScreen} />
</Tab.Navigator>

https://www.codecademy.com/learn/learn-react-native/modules/navigation-react-native/cheatsheet 5/6
10/2/23, 1:10 PM Learn React Native: Navigation Cheatsheet | Codecademy

Print Share

https://www.codecademy.com/learn/learn-react-native/modules/navigation-react-native/cheatsheet 6/6