React Native Tab View Example: A Complete Guide

Recently I needed tabbed navigation for a React Native app I’m working on. So in this example, I will show you how you can create a tab navigation system in React Native.

React Native Tab View

To create a tab view in React Native, use the react-native-navigation. First, we register the different screens using the Navigation object and then define this function startTabBasedApp(params) which contains an object as an argument.

We have seen the startSingleScreenApp(params) in the previous example; now, we will navigate through multiple screens using Tab Navigation. Now, start this example by installing React Native.

Step 1: Setup React Native For iOS device.

Type the following command.

npm install -g react-native-cli

Create a new project using the following command.

react-native init rncreate

Now go inside that project folder.

cd rncreate

Type the following command to install the libraries.

yarn add react-native-navigation@latest react-native-vector-icons

So, we have used the react-native-navigation and react-native-vector-icons.

Now, we need to configure this library. Remember, we will test our project on iOS and Android simulators. So this demo is oriented explicitly for iOS development.

Step 2: Configure both the libraries inside XCode.

Okay, now we need to open the project in the XCode. So open the Xcode and open the folder rncreate >> ios inside XCode. Now, we need to add the libraries from node_modules. Then, perform the following steps for react-native-navigation configuration.

#Configure react-native-navigation

In Xcode, in Project Navigator (left pane), right-click on the Libraries > Add files to [project name]. Add ./node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj (screenshots)
In Xcode, in Project Navigator (left pane), click on your project (top), then click on your target row (on the “project and targets list”, which is on the left column of the right pane) and select the Build Phases tab (right pane). In the Link Binary With Libraries section, add libReactNativeNavigation.a (screenshots)
In Xcode, in Project Navigator (left pane), click on your project (top), then click on your project row (on the “project and targets list”) and select the Build Settings tab (right pane). In the Header Search Paths section, add $(SRCROOT)/../node_modules/react-native-navigation/ios. Make sure on the right to mark this new path recursive (screenshots)
In Xcode, you will need to edit this file: AppDelegate.m.

Replace all of its code with this reference

Replace @"index.ios" with @"index" if you are using index.js as your entry point instead of index.ios.js and index.android.js (it is the default since React Native 0.49).

#Configure react-native-vector icons.

Open the iOS folder inside Xcode, and you will find the directory structure like this.

Here, you can see one folder called Libraries. Right-click on that folder and click on the Add Files to rncreate.

It will open up the file browser. Now browse to the project root’s node_modules folder and navigate to the react-native-vector-icons and inside that Add the RNVectorIcons.xcodeproj.

2) The second step is inside Xcode; click on the root folder, you will get something like below.

Here, I have already clicked on the Build Phases, but you need to click the Build Phases tab, and here also we need to add the files. Search for the file called libRNVectoricons.a and add the file, and you are done.

Step 3: Create screens.

You can close the XCode and open the project in your favorite editor. Then, inside the root folder, create one folder called screens, and inside that, create two files named following.

InboxScreen.js
OutboxScreen.js

Write the following code inside both of the files. Remember, when we navigate between different tabs, we will see these screens.

// InboxScreen.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class InboxScreen extends Component {
  render() {
    return (
      <View>
        <Text> This is Inbox(4) </Text>
      </View>
    )

  }
}

Also, write the following code inside the OutboxScreen.js file.

// OutboxScreen.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class OutboxScreen extends Component {
  render() {
    return (
      <View>
        <Text> This is sent messages(10) </Text>
      </View>
    )

  }
}

In the same folder, inside the screens folder, we also need to create one more file, our main tab file. So let us call that file startMainTab.js and add the following code inside it.

// startMainTab.js

import { Navigation } from 'react-native-navigation';

const startTabs = () => {
  Navigation.startTabBasedApp({
    tabs: [
      {
        screen: 'rncreate.InboxScreen',
        label: 'Inbox',
        title: 'Inbox'
      },
      {
        screen: 'rncreate.OutboxScreen',
        label: 'Outbox',
        title: 'Outbox'
      }
    ]
  });
}

export default startTabs;

Here, we need to define all the screens with a tab layout. So we have created two screens till now. So we have passed the two items as an argument.

Write the following code inside the startMainTab.js file.

// startMainTab.js

import { Navigation } from 'react-native-navigation';

const startTabs = () => {
  Navigation.startTabBasedApp({
    tabs: [
      {
        screen: 'rncreate.InboxScreen',
        label: 'Inbox',
        title: 'Inbox'
      },
      {
        screen: 'rncreate.OutboxScreen',
        label: 'Outbox',
        title: 'Outbox'
      }
    ]
  });
}

export default startTabs;

Here, we have destructured the Navigation object from react-native-navigation. Also called the startTabBasedApp() function on that object. It takes an object which consists of an array of different screens.

Step 4: Create a HomeScreen.

Now, inside the screens folder, create one file called HomeScreen.js. Here we need to import that startMainTab.js file.

// HomeScreen.js

import React, { Component } from 'react';
import { View, Text,Button } from 'react-native';
import startMainTab from './startMainTab';

export default class HomeScreen extends Component {

  onButtonPress = () => {
    startMainTab();
  }

  render() {
    return (
      <View>
        <Text>Home Screen</Text>
        <Button title="Tab Navigation" onPress = { this.onButtonPress } />
      </View>
    );
  }
}

When the application starts, we will see this screen and one button titled Tab Navigation.

Step 5: Register all three screens.

Inside the App.js file, we need to replace the code with the following code. App.js file is the inside root folder.

// App.js

import { Navigation } from 'react-native-navigation';
import HomeScreen from './screens/HomeScreen';
import InboxScreen from './screens/InboxScreen';
import OutboxScreen from './screens/OutboxScreen';

Navigation.registerComponent('rncreate.HomeScreen', () => HomeScreen);
Navigation.registerComponent('rncreate.InboxScreen', () => InboxScreen);
Navigation.registerComponent('rncreate.OutboxScreen', () => OutboxScreen);

Navigation.startSingleScreenApp({
  screen: {
    screen: 'rncreate.HomeScreen',
    title: 'Home'  
  }
});

So, when the application starts, the first screen will be the HomeScreen. So, if we create 10-20 screens for our application, we need to register all the screens here.

Now, we will not use the index.js file that comes with React Native by default; instead, we will create our index.ios.js file specifically for iOS development. So inside the root, create an index.ios.js file and add the following code inside it.

// index.ios.js

import App from './App';

We need to import the App.js file, and that is it. Nothing more. If you have configured the settings of third-party libraries correctly, then compile our project using the following command.

react-native run-ios

You will see this first screen.

Now click on the Tab Navigation button, and you will see the following screen.

Here at the bottom, you can see the two tabs.

Inbox
Outbox

You can click on it, and it will display the content accordingly.

Step 6: Add React Native Vector Icons.

Inside screens >> startMainTab.js file, we need to add the ionicons. So our final file looks like this.

// startMainTab.js

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons'; 

const startTabs = () => {
  Promise.all([
    Icon.getImageSource("md-map", 30),
    Icon.getImageSource("ios-share-alt", 30)
  ]).then(sources => {
    Navigation.startTabBasedApp({
      tabs: [
        {
          screen: 'rncreate.InboxScreen',
          label: 'Inbox',
          title: 'Inbox',
          icon: sources[0]
        },
        {
          screen: 'rncreate.OutboxScreen',
          label: 'Outbox',
          title: 'Outbox',
          icon: sources[1]
        }
      ]
    });
  });
}

export default startTabs;

That’s it for this tutorial.