**Course Title:** Building Mobile Applications with React Native **Section Title:** Navigation in React Native **Topic:** Implement navigation in a multi-screen app, using stack and tab navigation.(Lab topic) **Overview** In this lab topic, we will implement navigation in a multi-screen app using stack and tab navigation. We will use React Navigation, a popular and widely-used library for navigation in React Native. We will create a simple app with multiple screens, and then add navigation between those screens using stack and tab navigators. **Prerequisites** Before starting this lab, make sure you have: * A good understanding of React Native and its core concepts (covered in previous topics) * A development environment set up with React Native CLI and Expo (covered in the Introduction to React Native and Setup topic) * A basic understanding of React Navigation (covered in the Navigation in React Native topic) **Step 1: Create a new React Native app** Create a new React Native app using the following command: ``` npx react-native init NavigationLab ``` This will create a new React Native app called NavigationLab. **Step 2: Install React Navigation** Install React Navigation using the following command: ```bash npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs ``` This will install the required packages for React Navigation. **Step 3: Create screens** Create four new files in the `components` directory: * `HomeScreen.js` * `DetailsScreen.js` * `SettingsScreen.js` * `ProfileScreen.js` Each of these files will represent a separate screen in our app. For now, just add a basic `Text` component to each file, like this: ```javascript // components/HomeScreen.js import React from 'react'; import { Text, View } from 'react-native'; const HomeScreen = () => { return ( <View> <Text>Home Screen</Text> </View> ); }; export default HomeScreen; ``` **Step 4: Create a stack navigator** Create a new file called `App.js` in the root directory of your app. This file will serve as the main entry point for our app. Add the following code: ```javascript // App.js import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './components/HomeScreen'; import DetailsScreen from './components/DetailsScreen'; const Stack = createStackNavigator(); const App = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); }; export default App; ``` This code sets up a stack navigator with two screens: Home and Details. **Step 5: Create a tab navigator** Create a new file called `TabNavigator.js` in the `components` directory. This file will define a tab navigator that contains two screens: Settings and Profile. Add the following code: ```javascript // components/TabNavigator.js import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import SettingsScreen from './SettingsScreen'; import ProfileScreen from './ProfileScreen'; const Tab = createBottomTabNavigator(); const TabNavigator = () => { return ( <Tab.Navigator> <Tab.Screen name="Settings" component={SettingsScreen} /> <Tab.Screen name="Profile" component={ProfileScreen} /> </Tab.Navigator> ); }; export default TabNavigator; ``` **Step 6: Combine stack and tab navigators** Modify the `App.js` file to include the tab navigator: ```javascript // App.js import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './components/HomeScreen'; import DetailsScreen from './components/DetailsScreen'; import TabNavigator from './components/TabNavigator'; const Stack = createStackNavigator(); const App = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> <Stack.Screen name="Tabs" component={TabNavigator} /> </Stack.Navigator> </NavigationContainer> ); }; export default App; ``` **Step 7: Run the app** Run the app using the following command: ``` npx react-native run-android ``` This will launch the app on an Android emulator or a physical Android device. **What's next?** In the next topic, we will explore working with APIs and data fetching. We will learn how to use REST APIs and GraphQL to fetch data from a server and display it in our app. **External Resources** * React Navigation documentation: [https://reactnavigation.org/docs/getting-started](https://reactnavigation.org/docs/getting-started) * Stack Overflow: [https://stackoverflow.com/tags/react-navigation](https://stackoverflow.com/tags/react-navigation) **Leave a comment or ask for help** If you have any questions or need help with this topic, please leave a comment below. Remember, there are no discussion boards, so your comment will be reviewed by the instructor and responded to accordingly.