React Native Tab Navigation Component
In this article, we are going to see how to implement Tab Navigation in react-native. For this, we are going to use createBottomTabNavigator component. It is basically used for navigation from one page to another. These days mobile apps are made up of a single screen, so create various navigation components in React Native. We want to use React Navigation.
Syntax:
const Tab = createBottomTabNavigator();
<Tab.Navigator >
<Tab.Screen/>
</Tab.Navigator>
Props in Tab Navigation:
- initialRouteName: It is the initial route that opens when the application loads.
- order: It basically sets the order of the tabs.
- paths: It controls the mapping of the route screen to path config.
- lazy: If its value is true, then the tab is rendered when it becomes active for the first time. Its default value is true.
- tabBarComponent: It is an optional prop. It overrides the component which is used as a tab bar.
- tabBarOptions: It is an object of many properties like tabStyle , showLabel, showIcon, style, etc…
Now let’s start with the implementation:
-
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
-
Step 2: Now create a project by the following command.
expo init myapp
-
Step 3: Now go into your project folder i.e. myapp
cd myapp
-
Step 4: Now install react-navigation into your project. React Navigation is used to navigate between one page to another. Install it by using the following command.
npm install @react-navigation/native
-
Step 5: Now install dependencies into your react-native project by using the following command.
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
-
Step 6: Now install bottom-tabs from react-navigation.
npm install @react-navigation/bottom-tabs
For React Tab Navigation: This can be used in React Native as well
https://reactnavigation.org/docs/tab-based-navigation/
Project Structure:
Example: Now let’s implement Tab Navigation.
App.js
import * as React from 'react' ;
import { Text, View } from 'react-native' ;
import { NavigationContainer }
from '@react-navigation/native' ;
import { createBottomTabNavigator }
from '@react-navigation/bottom-tabs' ;
function Home() {
return (
<View style={{ flex: 1, justifyContent: 'center' ,
alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function Setting() {
return (
<View style={{ flex: 1, justifyContent: 'center' ,
alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
function Notification() {
return (
<View style={{ flex: 1, justifyContent: 'center' ,
alignItems: 'center' }}>
<Text>Notifications!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer >
<Tab.Navigator initialRouteName={Home} >
<Tab.Screen name= "Home" component={Home} />
<Tab.Screen name= "Notifications"
component={Notification} />
<Tab.Screen name= "Settings" component={Setting} />
</Tab.Navigator>
</NavigationContainer>
);
}
|
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.
Reference: https://reactnative.dev/docs/navigation#react-navigation
Last Updated :
14 Jun, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...