Loading


React Native

  • Home
  • React Native
  • React Native Tab Navigation Component. The Complete React Native Developer Course 2023 [Videos].
React Native

React Native Tab Navigation Component. The Complete React Native Developer Course 2023 [Videos].

By admin / 19-jan-2022 / in Blog, React Native / 160 Comments / 1 Likes / Share This Post

In this Video, 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 lets 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 lets implement Tab Navigation.

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

Read more
See All

Comments (160 Comments)

Submit Your Comment

See All Posts

Related Posts

React Native / Youtube

Setting up the development environment of React Native.

If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native
8-Sep-2021 /1 /160

React Native / Blog

How React Native is different from ReactJS ?

ReactJS: It is a JavaScript library that supports both front-end and server-side. It is a popularly used library, which focuses on developing user interfaces (UI) for mobile as well as web-based applications. Developed by Facebook, it is based on the JavaScript language and hence, it is synonymously also called ReactJS.
19-jan-2022 /1 /160

React Native / Blog

How to Use Routing with React Navigation in React Native ?

Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application.
19-jan-2022 /1 /160