bottom tab navigator react native | React Navigation
Swipeable Bottom Tab Navigator (Material) | React Native Example createMateralBottomTabNavigator
First, Install All this Packages:
npm install @react-navigation/native
npm install react-navigation@2.0.1
npm install react-navigation-material-bottom-tabs@0.1.2
react-native install react-native-vector-icons
react-native link react-native-vector-icons
First, Install All this Packages:
npm install @react-navigation/native
npm install react-navigation@2.0.1
npm install react-navigation-material-bottom-tabs@0.1.2
react-native install react-native-vector-icons
react-native link react-native-vector-icons
After This Follow Below code (Copy and Paste):
import React, { Component } from 'react';
import {StyleSheet,View,Text} from 'react-native';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';
class HomeScreen extends Component
{
render()
{
return(
<View style={styles.container}>
<Text style={styles.textStyle}>Home Tab</Text>
</View>
);
}
}
class SettingScreen extends Component
{
render()
{
return(
<View style={styles.container}>
<Text style={styles.textStyle}>SettingScreen</Text>
</View>
);
}
}
class ProfileScreen extends Component
{
render()
{
return(
<View style={styles.container}>
<Text style={styles.textStyle}>Profile Screen</Text>
</View>
);
}
}
export default createMaterialBottomTabNavigator({
Home:{screen:HomeScreen,
navigationOptions:{
tabBarLabel:"Home",
tabBarIcon:()=>(
<Icon name='home'
color="tomato"
size={25} />
)}},
Settings:
{
screen:SettingScreen,
navigationOptions:{
tabBarLabel:"Settings",
tabBarIcon:()=>(
<Icon name='cog'
color="tomato"
size={25} />
)}},
Profile:
{
screen:ProfileScreen,
navigationOptions:{
tabBarLabel:"Profile",
tabBarIcon:()=>(
<Icon name='user'
color="tomato"
size={25} />
)}
}
},{
initialRouteName:"Home",
// order:["Home","Settings"],
tabBarPosition:"bottom",
swipeEnabled:true,
animationEnabled:true,
tabBarOptions:{
activeTintColor:"orange",
inactiveTintColor:"grey",
style:{
fontSize:20,
backgroundColor:"#f2f2f2",
borderTopWidth:0.5,
borderTopColor:"grey"
},
indicatorStyle:{
height:0,
},
showIcon:true,
}
});
const styles = StyleSheet.create({
container:{
flex:1,
flexDirection:"row",
justifyContent:"center",
alignItems:"center",
},
textStyle:{
fontSize:20,
fontStyle:"normal",
}
});
 |
| Output |