If there were no libraries such as react-navigation, navigation in react native would have been an uphill task. In this blog post, you can learn how to create a bottom tab navigator in your react native project.
First of all, add react-navigation in your project with command npm install –save react-navigation . After that add react native gesture handler to your app using command npm install –save react-native-gesture-handler@~1.0.14 and link it to your project using react-native link react-native-gesture-handler
For Android, change MainActivity.java file as given below:
package com.reactnavigation.example;
import com.facebook.react.ReactActivity;
//Add the following imports
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "Example";
}
//Add the following Overrides too
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this); }
};
}
}
For having better structuring, I created a folder named src. And create two folders named images and screens inside src folder. I added three icons inside images folder. Inside screens folder, I have created three screens named Home.js, Profile.js
Home.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class Home extends Component {
render() {
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Text> This is Home </Text>
</View>
);
}
}
Profile.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class Home extends Component {
render() {
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Text> This is Home </Text>
</View>
);
}
}
Settings.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class Settings extends Component {
render() {
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Text> This is Settings </Text>
</View>
);
}
}
Now open App.js and replace the existing code with following code.
App.js
import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './src/screens/Home';
import ProfileScreen from './src/screens/Profile';
import SettingsScreen from './src/screens/Settings';
import HomeIcon from './src/images/home.png';
import ProfileIcon from './src/images/profile.png';
import SettingsIcon from './src/images/settings.png';
const TabNavigator = createBottomTabNavigator({
// Your Screens
Home: HomeScreen,
Profile: ProfileScreen,
Settings: SettingsScreen,
},
// Tab icons and configurations
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor }) => {
const { routeName } = navigation.state;
tintColor= 'blue';
let iconName;
switch (routeName) {
case 'Home':
iconName = HomeIcon;
break;
case 'Profile':
iconName = ProfileIcon;
break;
case 'Settings':
iconName = SettingsIcon;
break;
default:
break;
}
// You can return any component that you like here!
return <Image source={iconName} style={{height: 25, width: 25}} tintColor={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'red',
inactiveTintColor: 'gray',
},
}
);
export default createAppContainer(TabNavigator);
That’s it. Now you can see the bottom tab navigation in your app as given in the following gif file. For the source code, you can get it from this GitHub repo.
