Tab-based Navigation
Learn how to navigate in React Native applications using tabs.
We'll cover the following...
Tab-based navigation is another form of navigation that is used in many mobile applications, such as Twitter, Facebook, and Instagram. In this approach, a certain number of tabs are grouped either at the bottom (as a footer), or the top of the application (as a header), and clicking on each tab routes the user to a specific screen of the application. The illustration below shows how tab-based navigation works.
Usage
To implement and use tab-based navigation, we first have to import NavigationContainer from the @react-navigation/native library.
import { NavigationContainer } from '@react-navigation/native'
Next, we need to wrap our whole application inside the NavigationContainer using the <NavigationContainer></NavigationContainer> tag.
import React from "react";import { NavigationContainer } from '@react-navigation/native'const App = () => {return (<NavigationContainer>{/* Children components */}</NavigationContainer>);};export default App;
Now we have to import createBottomTabNavigator from the @react-navigation/bottom-tabs library and use it to create an instance of the tab-based navigator.
import React from "react";import { NavigationContainer } from '@react-navigation/native'import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';const Tab = createBottomTabNavigator();const App = () => {return (<NavigationContainer>{/* Children components */}</NavigationContainer>);};export default App;
Adding screen details
Once all the steps above have been completed successfully, we can use the Navigator and Screen methods of the created tab-navigator instance to add screen details. The user will be routed to these screens once they interact with the respective ...