#5 - Add React Navigation | React Native open-source eCommerce App

Summary

In this tutorial, you'll learn how to integrate React Navigation into your React Native app. The video covers the installation of necessary dependencies, setting up the navigation container, and configuring stack navigation. You'll create a Home screen and a Category screen, organize your routes, and customize titles for each screen. With clear instructions and practical examples, this guide will help you establish basic navigation in your app, enabling smooth transitions between screens. Perfect for developers looking to implement simple navigation with React Navigation.

Takeaways

• 😀 Install necessary dependencies for React Navigation and Expo using `npm install @react-navigation/native @react-navigation/stack` and `expo install react-native-gesture-handler react-native-reanimated react-native-screens`.
• 😀 Use `npx pod-install` to ensure proper linking of dependencies for iOS projects when using Expo.
• 😀 Import `react-native-gesture-handler` before your root component in `index.js` to handle gestures properly.
• 😀 Wrap the entire app's navigation in a `NavigationContainer` to enable React Navigation in the app.
• 😀 Create a separate `Navigation.js` component to handle navigation logic and structure, improving code organization.
• 😀 Use `createStackNavigator` to set up stack-based navigation between screens.
• 😀 Each screen, like `HomeScreen` or `CategoryScreen`, should be created as a separate component for modularity.
• 😀 Define routes in a `routes.js` file to keep navigation paths consistent and manageable across the app.
• 😀 Customize the header title for each screen by passing the `options` prop to the `Stack.Screen` component.
• 😀 Use `expo start` to run the app after setting up navigation, and check the app for correct screen rendering and navigation functionality.
• 😀 Separate your components and routes into different directories (e.g., `src/components`, `src/navigation`) for cleaner project structure.

Q & A

What library is being used for navigation in this tutorial?

The tutorial uses the React Navigation library for implementing navigation in the app.

What is the first step to add navigation to the project?

The first step is to install the required dependencies for React Navigation using Expo.

What additional setup is required after installing the dependencies?

After installing the dependencies, you need to install pods and import the React Native Gesture Handler before the root component is loaded.

Where do you need to add the React Native Gesture Handler?

The React Native Gesture Handler must be added to the `index.js` file before the `App` component is rendered.

What is the purpose of the `NavigationContainer` in React Navigation?

The `NavigationContainer` wraps the navigation structure and provides the context needed for navigation to function in the app.

How should the navigation code be organized in the project?

The navigation code should be organized into a separate component located in a `src/navigation` directory.

What type of navigation is used in the tutorial, and what component is created for it?

The tutorial uses Stack Navigation, and a component named `RootStack` is created to handle it.

What is the purpose of the `routes` file in the navigation setup?

The `routes` file is used to define and export the navigation routes, making it easier to manage and organize the app's screens.

Why is the title not displayed correctly in the navigation bar after setting up the category screen?

The title is not displayed correctly because the screen options were not configured yet. Once you set the `options` for the screen component, the title appears as intended.

How do you fix the issue with the screen title not displaying correctly in the navigation bar?

To fix the issue, you need to add the `options` property to the screen component and specify the title in the `options` object, like `options={{ title: 'Categories' }}`.