AppDividend
Latest Code Tutorials

React Native Tab View Example Tutorial

124

Get real time updates directly on you device, subscribe now.

React Native Tab View Example Tutorial is today’s leading topic. 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. First, we register the different screens using 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, the React Native.

React Native Tab View Example Tutorial

Okay, now we install the React Native using the React Native CLI. If you have not installed previously then install it globally using the following command.

#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 simulators and not Android simulators. So this demo is oriented explicitly for the iOS development.

#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. Perform the following steps for react-native-navigation configuration.

#Configure react-native-navigation

  1. 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)

  2. 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)
  3. 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)
  4. In Xcode, you will need to edit this fileAppDelegate.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.

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

         React Native Tab View Example Tutorial

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.

 

React Native Tabs Example Tutorial

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.

#3: Create screens.

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

Related Posts
1 of 8
  1. InboxScreen.js
  2. 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 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 means inside screens folder, we also need to create one more file, which will be our main tab file. 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, which has 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.

#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 also one button titled Tab Navigation.

#5: Register all three screens.

Inside App.js file, we need to replace the code with the following code. App.js file is 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. If we create 10-20 screens for our application, then we need to register all the screens over here.

Now, we will not use index.js file which comes with React Native by default, instead of that, we will create our index.ios.js file for specifically 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.

Tab Navigation In React Native

 

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

 

React Native Tabs Navigation Tutorial

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

  1. Inbox
  2. Outbox

You can click on it, and it will display the content accordingly. So here are basic React Native Tab View Example  Tutorial is over.

#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;

Finally, we have added icons to our application, and our React Native Tab View Example is over.

 

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.