Getting Started with Mobile App Development with React Native/

...

/

Tab-based Navigation

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.

Mobile application representing the behavior of tab-based navigation
Mobile application representing the behavior of tab-based navigation

Usage

To implement and use tab-based navigation, we first have to import NavigationContainer from the @react-navigation/native library.

Javascript (babel-node)
import { NavigationContainer } from '@react-navigation/native'

Next, we need to wrap our whole application inside the NavigationContainer using the <NavigationContainer></NavigationContainer> tag.

Javascript (babel-node)
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.

Javascript (babel-node)
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 tabs linked to these ...