Deepshikha Puri, the young Indian Entrepreneur heading the mobile development trade from years to successive extent, has worked with numerous clients and many tremendous brands in this industry of mobile encompassing in India and overseas maintaining promising work relationships with each of them with an impression to manage it's whole thing.

Sunday, February 3, 2019

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.

react native tab navigation react native tab navigation tutorial tab navigation react native example


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 }, })

DOWNLOAD SOURCE CODE FROM HERE

No comments:

Post a Comment