Tab Navigator

Let's switch to the Tab Navigator, which facilitates switching between screens or tabs. It is typically located at the bottom of the screen.

First, if you haven't already, make sure you have React Navigation installed:

Now, let's create three screens: HomeScreen, ProfileScreen, and SettingsScreen.

Now, let's set up navigation in our App.js using the Tab Navigator:

In this example we've set up navigation using the Tab Navigator in App.js. Each screen is added as a separate tab in the Tab Navigator. We can switch between screens by tapping on the corresponding tab at the bottom of the screen.

Let's analyze each component individually

Step 1

import Statements: Necessary modules from React and React Navigation are imported, as well as the custom screen components (HomeScreen, ProfileScreen, and SettingsScreen).

Step 2

Using createBottomTabNavigator(), a tab navigator is created.

Step 3

Define the App Component: The App component renders the navigation container and the tab navigator.

Step 4

The NavigationContainer component wraps the entire navigation structure.

Step 5

Inside the NavigationContainer, the Tab.Navigator component defines the tab navigation structure.

Step 6

Tab.Screen components are added to the tab navigator. Each screen has a unique name and is associated with a component.