**Course Title:** Building Mobile Applications with React Native **Section Title:** Navigation in React Native **Topic:** Setting up stack, tab, and drawer navigators ### Introduction to Navigators in React Native In the previous topic, we introduced the concept of navigation in React Native using the React Navigation library. In this topic, we'll dive deeper into setting up different types of navigators, including stack, tab, and drawer navigators. ### Step 1: Install Required Packages Before we start setting up navigators, make sure you have the required packages installed. Run the following command in your terminal: ```bash npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer ``` If you're using Expo, you can use the following command: ```bash expo install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer ``` ### Setting up Stack Navigator A stack navigator is a type of navigator that allows users to navigate between screens by pushing and popping screens onto a stack. Here's an example of how to set up a stack navigator: ```jsx import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './HomeScreen'; import DetailsScreen from './DetailsScreen'; const Stack = createStackNavigator(); function MyStack() { return ( <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> ); } function App() { return ( <NavigationContainer> <MyStack /> </NavigationContainer> ); } export default App; ``` In this example, we create a stack navigator using the `createStackNavigator` function and define two screens: `Home` and `Details`. We then wrap the stack navigator in a `NavigationContainer` component. ### Setting up Tab Navigator A tab navigator is a type of navigator that allows users to navigate between screens by tapping on tabs at the bottom of the screen. Here's an example of how to set up a tab navigator: ```jsx import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import HomeScreen from './HomeScreen'; import SettingsScreen from './SettingsScreen'; const Tab = createBottomTabNavigator(); function MyTabs() { return ( <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Settings" component={SettingsScreen} /> </Tab.Navigator> ); } function App() { return ( <NavigationContainer> <MyTabs /> </NavigationContainer> ); } export default App; ``` In this example, we create a tab navigator using the `createBottomTabNavigator` function and define two screens: `Home` and `Settings`. We then wrap the tab navigator in a `NavigationContainer` component. ### Setting up Drawer Navigator A drawer navigator is a type of navigator that allows users to navigate between screens by sliding a drawer from the side of the screen. Here's an example of how to set up a drawer navigator: ```jsx import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import HomeScreen from './HomeScreen'; import SettingsScreen from './SettingsScreen'; const Drawer = createDrawerNavigator(); function MyDrawer() { return ( <Drawer.Navigator> <Drawer.Screen name="Home" component={HomeScreen} /> <Drawer.Screen name="Settings" component={SettingsScreen} /> </Drawer.Navigator> ); } function App() { return ( <NavigationContainer> <MyDrawer /> </NavigationContainer> ); } export default App; ``` In this example, we create a drawer navigator using the `createDrawerNavigator` function and define two screens: `Home` and `Settings`. We then wrap the drawer navigator in a `NavigationContainer` component. ### Conclusion In this topic, we learned how to set up different types of navigators in React Native, including stack, tab, and drawer navigators. We also learned how to install required packages and create a navigation container. **What to Do Next** * Practice setting up different types of navigators in your React Native application. * Experiment with customizing the appearance and behavior of navigators. * Read the official React Navigation documentation for more information on navigators and other navigation components: <https://reactnavigation.org/docs/getting-started/> **Leave a Comment or Ask for Help** If you have any questions or need help with setting up navigators in your React Native application, leave a comment below. **Next Topic** In the next topic, we'll learn how to pass parameters between screens in React Navigation.