React Native NavigationExperimental Part 3— Adding Tabs

NavigationExperimental is no longer the preferred method of Navigation in React Native, and will soon be deprecated. I would suggest checking out React Navigation with is the current standard and my preferred method of navigation.

This is a continuation of Part 2. We will now be adding tabs using React Native NavigationExperimental, continuing from the project that we left off in part 2.

To see part 1, click here.

To see part 2, click here.

To view the final working code and repo, click here.

To start from part two, clone this repo.

As you can see above, we still have our main navigation stack in the app, but it will no longer be the main entry point. The main entry point will now be our Tab component. The previous Route stack is now just one of three tabs we will be implementing: Main (previous main entry point), Recipes, and Samples.

First, let’s create the two new components that will be going into the other two tabs in the app. In app/components, create Recipes.js and Samples.js:

Samples.js:

Recipes.js:

Next, let’s update our actions and constants with a new action named CHANGE_TAB. in app/constants/ActionTypes.js, add CHANGE_TAB:

Now, open app/action/navActions.js and add a new action called changeTab, passing in an index as an argument:

Next, we need to create a new reducer for our tabs. In app/reducers, create tabReducer.js:

1. import CHANGE_TAB from our constants/ActionTypes file
2. Declare three icons for use in our tab bar and store them in variables.
3. Create array named tabs that hold our tab information. We give the tab array three keys: key, icon, and title.
4. Create an initialState object, giving it two keys: tabs and index. We set index at 0 (zero) for now.

5. We create a reducer function named tabsNav, where we return the state, updated with the new index that is passed. If the current index and the new index are the same, we return the previous state.

6. Export the reducer

Now that we have our new tabReducer created, let’s import it into and add it to our root reducer function in app/reducers/index.js:

We now need to create the tabs component. In app/components, create a file named TabsRoot.js:

1. We import TabBarIOS, React, and our three components we will be rendering in the tabs: Recipes, Sample, and navRootContainer as Home.
2. We create a method called _changeTab, passing in the index. We then call changeTab which will be available as props.
3. We create a method called _renderTabContent, switching on the passed in key and returning one of our three components.
4. In the render, we map through the tabs available as this.props.tabs.tabs, and return a TabBarIOS.Item for each tab, and then store this array in a variable called tabs.

1. We return a TabBarIOS element and pass in our tabs variable.
2. In TabBarIOS, we return the selected tab based on the value of this.props.tabs.index

Now we need to connect the new tabReducer reducer to our new TabsRoot component. In app/containers, create a file named tabsRootContainer.js:

1. Create our mapStateToProps function and return the tabReducer in a variable named tabs.

1. Create the connect function with the TabsRoot component, passing in mapStateToProps and a method named changeTab, which will call the changeTab navAction.

Now, tabs and changeTab will both be available as props to TabsRoot.js

The last step is to update our index file. Because we are now using the tabs component as our initial route, we need to update index.ios.js or index.android.js, depending on what platform you are using:

The only changes to this file are:

1. We import TabsRootContainer
2. We replace our NavigationRootContainer with our TabsRootContainer

That’s all. Now we should be able to run the app and see our tabs!

Here is the link to the final repo

Thanks for reading (☞ﾟ∀ﾟ)☞

My Name is Nader Dabit . I am a developer at School Status where we help educators make smart instructional decisions by providing all their data in one place. Check us out @schoolstatusapp.

If you like React and React Native, checkout out our podcast — React Native Radio on Devchat.tv

Also, check out my book, React Native in Action now available from Manning Publications

If you enjoyed this article, please recommend and share it! Thanks for your time