Tab Navigation React Native

Video Demo:

Normally the tab navigation in used in number of react native application. There are two type of tab navigation Top navigation and Bottom navigation. In this navigation the number of tabs are arrange together and selected tab is highlighted with some difference colour. This tutorial help out you to integrate the Bottom tab navigation in your application. YOU CAN DOWNLOAD THE SOURCE CODE FROM BELOW.

Step 1->
To create your project run this command:
sudo npm install -g react-native-cli
Step 2->
Now initialise your project name. Replace your project name with MovingScreen:
react-native init MovingScreen
Step 3->
Install Navigation library in your project:
npm install --save react-navigation
Step 4->
Also need to install the gesture library otherwise you will get an issue
npm install --save react-native-gesture-handler
Step 5->
link your gesture library in your project:
react-native link react-native-gesture-handler
Now you can start work on your React native project

MainScreen.js

import React ,{Component} from 'react'
import {createAppContainer,createBottomTabNavigator} from 'react-navigation'
import MovieScreen from './MovieScreen'
import SportScreen from './SportScreen'
import HomeScreen from './HomeScreen'


export default class MainScreen extends Component{
    render(){
        return <NavigationContainer></NavigationContainer>
    }
}




const BottomNavigation = createBottomTabNavigator({
    Home:{
        screen: HomeScreen,
        tabBarOptions: { 
            showIcon: true 
          },
        navigationOption:{
            tabBarIcon: ({ tintColor }) => (
                <Icon name='../../assets/home_icon.png' size={20}/>
              )
        }
    },
    Movie:{
        screen: MovieScreen,
        tabBarOptions: { 
            showIcon: true 
          },
         navigationOption:{
            tabBarIcon: ({ tintColor }) => (
                <Icon name='../../assets/home_icon.png' size={20}/>
              )
        }
    },


Sport:{
        screen: SportScreen,
        tabBarOptions: { 
            showIcon: true 
          },
        navigationOption:{
            tabBarIcon: ({ tintColor }) => (
                <Icon name='../../assets/home_icon.png' size={20}/>
              )
        }
    }
})


const NavigationContainer = createAppContainer(BottomNavigation)

HomeScreen.js

import React ,{Component} from 'react'
import {View, Text,Button,Image,StyleSheet} from 'react-native'

export default class HomeScreen extends Component{
    static navigationOptions = {
        tabBarOptions: { 
            activeTintColor: 'white',
            inactiveTintColor: 'white',
            activeBackgroundColor: '#FF5722',
            inactiveBackgroundColor: '#FF7043',


},

tabBarIcon: <Image
          source={require('../../assets/home_icon.png')}
          style={{ height: 30, width: 30, tintColor: 'white'}}
         />  
      }


render(){
        return(
            <View style={styles.container}>


<View style={styles.headerContainer}>
                <Text style={styles.headerTxt}>Home Screen</Text>
                </View>
                <View style={styles.mainContainer}>
                <Image style={styles.imgHome} source={require('../../assets/home.jpg')}></Image>
                </View>
            </View>
        )
    }
}


const styles = StyleSheet.create({


container:{
       flex:1
    },


headerContainer:{
        width:'100%',
        height:"7%",
        backgroundColor:'#FF7043',
        justifyContent:'center',
        alignItems:'center'


},


headerTxt:{
        color: 'white',
        fontFamily: 'Nunito-Regular',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 16
    },


mainContainer:{
        height:'93%',
        width:'100%',
        justifyContent:'center',
        alignItems:'center'


},


imgHome:{
        width:'100%',
        height:200
    }

})

MovieScreen.js

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


export default class MovieScreen extends Component{


static navigationOptions = {
        tabBarOptions: { 
            activeTintColor: 'white',
            inactiveTintColor: 'white',
            activeBackgroundColor: '#FF5722',
            inactiveBackgroundColor: '#FF7043',           
         },


tabBarIcon: <Image
          source={require('../../assets/movie_icon.png')}
          style={{ height: 15, width: 24, tintColor: 'white'}}


/>  
      }


render(){
        return(
            <View style={styles.container}>


<View style={styles.headerContainer}>
                <Text style={styles.headerTxt}>Movie Screen</Text>
                </View>
                <View style={styles.mainContainer}>
                <Image style={styles.imgMovie} source={require('../../assets/movie.jpg')}></Image>
                </View>


</View>            
        )
    }
}


const styles= StyleSheet.create({
    container:{
        flex:1
    },
    headerContainer:{
        width:'100%',
        height:"7%",
        backgroundColor:'#FF7043',
        justifyContent:'center',
        alignItems:'center'


},
    headerTxt:{
        color: 'white',
        fontFamily: 'Nunito-Regular',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 16
    },


mainContainer:{
        height:'93%',
        width:'100%',
        justifyContent:'center',
        alignItems:'center'


},
    imgMovie:{
        width: "100%",
        height: 200
    },
})

SportScreen.js

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


export default class SportScreen extends Component{
    static navigationOptions = {        
        tabBarOptions: { 
            activeTintColor: 'white',
            inactiveTintColor: 'white',
            activeBackgroundColor: '#FF5722',
            inactiveBackgroundColor: '#FF7043',           
         },


tabBarIcon: <Image
          source={require('../../assets/podium.png')}
          style={{ height: 15, width: 15, tintColor: 'white'}}
         />  
      }


render(){
        return(
            <View style={styles.container}>


<View style={styles.headerContainer}>
                <Text style={styles.headerTxt}>Sport Screen</Text>
                </View>
                <View style={styles.mainContainer}>
                <Image style={styles.imgSport} source={require('../../assets/sport.jpg')}></Image>
                </View>


</View>                    
        )
    }
}


const styles= StyleSheet.create({
    container:{
        flex:1,
    },
    headerContainer:{
        width:'100%',
        height:"7%",
        backgroundColor:'#FF7043',
        justifyContent:'center',
        alignItems:'center'


},


headerTxt:{
        color: 'white',
        fontFamily: 'Nunito-Regular',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 16
    },


mainContainer:{
        height:'93%',
        width:'100%',
        justifyContent:'center',
        alignItems:'center'


},
    imgSport:{
        width: "100%",
        height: 200
    },
})