React Navigation 5.x || Tab navigation

Installation

Install the required packages in your React Native project

yarn add @react-navigation/bottom-tabs
....................................................................................................................................................................................................................................
Example : #5.1 [ Basic Setup ]

import React from 'react'
import { Text, View, Button } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

const Home = ({ navigation }) => {
return (
<>
<Text> Home</Text>
<Button title='Go to Profie' onPress={() => navigation.navigate('profiles')}></Button>
</>
)
}
const Profile = () => {
return (
<>
<Text> Profile</Text>
</>
)
}

const Tab = createBottomTabNavigator()
const RootRoute = () => {
return (
<Tab.Navigator>
<Tab.Screen name='Home' component={Home} />
<Tab.Screen name='profiles' component={Profile} />
</Tab.Navigator>
)
}

const App = () => {
return (
<>
<NavigationContainer>
<RootRoute />
</NavigationContainer>
</>
)
}

export default App

For more Icons
https://github.com/oblador/react-native-vector-icons

import React from 'react'
import { Text, View, Button } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Icon from 'react-native-vector-icons/FontAwesome'

const Home = ({ navigation }) => {
return (
<>
<Text> Home</Text>
<Button title='Go to Profie' onPress={() => navigation.navigate('profiles')}></Button>
</>
)
}
const Profile = () => {
return (
<>
<Text> Profile</Text>
</>
)
}

const Tab = createBottomTabNavigator()
const RootRoute = () => {
return (
<Tab.Navigator>
<Tab.Screen
options={{
tabBarIcon: ({ color }) => <Icon name='home' size={30} color={color} />
}}
name='Home' component={Home} />
<Tab.Screen
options={{
tabBarIcon: ({ color }) => <Icon name='universal-access' size={30} color={color} />
}}
name='profiles' component={Profile} />
</Tab.Navigator>
)
}

const App = () => {
return (
<>
<NavigationContainer>
<RootRoute />
</NavigationContainer>
</>
)
}

export default App

import React from 'react'

import { Text, View, Button } from 'react-native'

import { NavigationContainer } from '@react-navigation/native'

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

import Icon from 'react-native-vector-icons/FontAwesome'

const Home = ({ navigation }) => {

return (

<Button title='Go to Profie' onPress={() => navigation.navigate('profiles')}></Button>

</>

)

}

const Profile = () => {

return (

<Text> Profile</Text>

</>

)

}

const Tab = createBottomTabNavigator()

const RootRoute = () => {

return (

<Tab.Navigator tabBarOptions={{activeTintColor:'#ff4800'}}>

<Tab.Screen

options={{

tabBarIcon: ({ color }) => <Icon name='home' size={30} color={color} />

}}

name='Home' component={Home} />

<Tab.Screen

options={{

tabBarIcon: ({ color }) => <Icon name='universal-access' size={30} color={color} />

}}

name='profiles' component={Profile} />

</Tab.Navigator>

)

}

const App = () => {

return (

</NavigationContainer>

</>

)

}

export default App

...........

Details.js

import React from 'react'

import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'

function Detail(props) {

const { route, navigation } = props

const { item } = route.params

const { name, home, species } = item

return (

<Text style={styles.text}>Detail Screen</Text>

<Text style={styles.cardText}>Home Planet: {home}</Text>

<Text style={styles.cardText}>Species: {species}</Text>

</View>

<TouchableOpacity

style={styles.buttonContainer}

onPress={() => navigation.navigate('Settings')}>

<Text style={styles.buttonText}>Go to Settings</Text>

</TouchableOpacity>

</View>

)

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#ebebeb'

text: {

color: '#101010',

fontSize: 24,

fontWeight: 'bold'

card: {

width: 350,

height: 100,

borderRadius: 10,

backgroundColor: '#101010',

margin: 10,

padding: 10,

alignItems: 'center'

cardText: {

fontSize: 18,

color: '#ffd700',

marginBottom: 5

buttonContainer: {

backgroundColor: '#222',

borderRadius: 5,

padding: 10,

margin: 20

buttonText: {

fontSize: 20,

color: '#fff'

}

})

export default Detail

..........................

Setting.js

import React from 'react'

import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'

function Settings(props) {

const { navigation } = props

return (

<Text style={styles.text}>Settings</Text>

<TouchableOpacity

style={styles.buttonContainer}

onPress={() => navigation.popToTop()}>

</TouchableOpacity>

</View>

)

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#ebebeb'

text: {

color: '#101010',

fontSize: 24,

fontWeight: 'bold'

buttonContainer: {

backgroundColor: '#222',

borderRadius: 5,

padding: 10,

margin: 20

buttonText: {

fontSize: 20,

color: '#fff'

}

})

export default Settings

............................

Profile.js

import React from 'react'

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

function Profile(props) {

return (

<Text style={styles.text}>Profile Tab</Text>

</View>

)

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#ebebeb'

text: {

color: '#101010',

fontSize: 24,

fontWeight: 'bold'

}

})

export default Profile

..............................

navigations/AppNavigations.js

import * as React from 'react'

import { NavigationContainer } from '@react-navigation/native'

import { createStackNavigator } from '@react-navigation/stack'

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

import { Ionicons } from '@expo/vector-icons'

import Home from './Home'

import Detail from './Detail'

import Settings from './Setting'

import Profile from './Profile'

const Stack = createStackNavigator()

const Tab = createBottomTabNavigator()

function getHeaderTitle(route) {

const routeName = route.state

? route.state.routes[route.state.index].name

: route.params?.screen || 'Home'

switch (routeName) {

case 'Home':

return 'Home'

case 'Profile':

return 'Profile'

}

function MainTabNavigator() {

return (

<Tab.Navigator

tabBarOptions={{

activeTintColor: '#101010',

style: {

backgroundColor: '#ffd700'

}

}}

screenOptions={({ route }) => ({

tabBarIcon: ({ color, size }) => {

let iconName

if (route.name == 'Home') {

iconName = 'ios-home'

} else if (route.name == 'Profile') {

iconName = 'ios-person'

}

return <Ionicons name={iconName} color={color} size={size} />

}

})}>

<Tab.Screen name='Home' component={Home} />

<Tab.Screen name='Profile' component={Profile} />

</Tab.Navigator>

)

}

function MainStackNavigator() {

return (

<Stack.Navigator

initialRouteName='Home'

screenOptions={{

gestureEnabled: true,

headerStyle: {

backgroundColor: '#101010'

headerTitleStyle: {

fontWeight: 'bold'

headerTintColor: '#ffd700',

headerBackTitleVisible: false

}}

headerMode='float'>

<Stack.Screen

name='Home'

component={MainTabNavigator}

options={({ route }) => ({

headerTitle: getHeaderTitle(route)

})}

<Stack.Screen

name='Detail'

component={Detail}

options={({ route }) => ({

title: route.params.item.name

})}

<Stack.Screen

name='Settings'

component={Settings}

options={{ title: 'Settings' }}

</Stack.Navigator>

</NavigationContainer>

)

}

export default MainStackNavigator

...........................

import React from 'react'

import MainStackNavigator from './src/screens/AppNaigator'

export default function App() {

return <MainStackNavigator />

}

React Navigation 4.x || 3.x || Example of createBottomTabNavigator

npm install --save react-native-gesture-handler && react-native link

npm install --save react-native-vector-icons && react-native link
........................................................................................................................................................................................................................................
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { createAppContainer, createBottomTabNavigator } from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons'

class Home extends Component {
render() {
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Text>Home Screen</Text>
</View>
)
}
}

...................................................................................................................................................................................................................................

class Settings extends Component {
render() {
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Text>Settings Screen</Text>
</View>
)
}
}
.............................................................................................................................................................................................................................

const Tabs = createBottomTabNavigator({
Home: {screen:Home,
navigationOptions: () => ({
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-home" size={25} color={tintColor} />
)
})
},

Settings: {screen: Settings,
navigationOptions: () => ({
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-settings" size={25} color={tintColor} />
)
})
},
}, {

tabBarOptions:{
showIcon:true,
showLabel:true,
activeTintColor:'red',
labelStyle:{
fontSize:25,
fontWeight:"bold"
}
}
})
export default createAppContainer(Tabs)
...........................................................................................................................................................................................................................
//const AppContainer = createAppContainer(Tabs)

// export default class App extends Component {
// render() {
// return (
// <AppContainer/>
// )
// }
// }
..................................................................................................................................................................................................................

Happy Coding :)
....................................................................................................................................................................................................................................
Different way
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation'

class Page1 extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}> Page1 </Text>
</View>
)
}
}
....................................................................................................................................................................................................................................................

class Page2 extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}> Page2 </Text>
</View>
)
}
}
............................................................................................................................................................................................................................................
const icons = {
user: require('./src/assets/user.png'),
userFocused: require('./src/assets/user-focus.png'),
home: require('./src/assets/home.png'),
homeFocused: require('./src/assets/home-focus.png'),
}
....................................................................................................................................................................................................................

const BottomNavigator = createBottomTabNavigator({
Page1: { screen: Page1 },
Page2: { screen: Page2 },
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor}) => {
const { routeName } = navigation.state
let icon;
if (routeName === 'Page1') {
icon = focused ? icons.homeFocused : icons.home
}
else if (routeName === 'Page2') {
icon = focused ? icons.userFocused : icons.user
}
return <Image source={icon} style={{ width: 28, height: 28 , tintColor}} />
},
tabBarOptions: { activeTintColor:'green'},
})
}
)

const AppContainer = createAppContainer(BottomNavigator)
...............................................................................................................................................................................................................................................

export default class App extends Component {
render() {
return (
<AppContainer />
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
text: {
color: 'red',
fontSize: 30
}
})
........................................................................................................................................................................................................................................................

How To Set Icons in the bottom Tab Navigator

import React, { Component } from 'react'
import { View, Text, Image } from 'react-native'
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons'

...............................................................................................................................................................................................................

class Page1 extends Component {
render() {
return (
<View>
<Text> Page1</Text>
</View>
)
}
}
............................................................................................................................................................................................................

class Page2 extends Component {
render() {
return (
<View>
<Text> Page2</Text>
</View>
)
}
}

..............................................................................................................................................................................................................

const BottoTabNavigator = createBottomTabNavigator({
Page1: { screen: Page1 },
Page2: { screen: Page2 }
}, {
defaultNavigationOptions: ({ navigation }) => ({

tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state
let icon;
if (routeName === 'Page1') {

icon = `ios-information-circle${focused ? '' : '-outline'}`;
}
else if (routeName === 'Page2') {
icon = `ios-close-circle${focused ? '' : '-outline'}`;
}
return <Icon name={icon} size={35} color={tintColor}/>
},

tabBarOptions: {
activeTintColor: 'green',

style: {
height: 100,
paddingVertical: 5,
backgroundColor: "grey"
},

labelStyle: {
fontSize: 35,
lineHeight: 100,
fontFamily: "CircularStd-Book"
}
}
})
})
..........................................................................................................................................................................................................

const AppContainer = createAppContainer(BottoTabNavigator)

export default class App extends Component {
render() {
return (
<AppContainer />
)
}
}

.........................................................................................................................................................................................................

....................................................................................................................................................................................................

const BottomTab = createBottomTabNavigator({
Home: Home,
Details: Details
}, {
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state

if (routeName === 'Home') {
return <Icon name="md-home" size={24} color={focused ? 'blue' : 'black'} />
}

else if (routeName === 'Details') {
return <Icon name="md-home" size={24} color={focused ? 'blue' : 'black'} />
}

}
})
})

............................................................................................................................................................................................................................

Example

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Home Screen</Text>
</View>
);
}
}
class ProfileScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Profile Screen</Text>
</View>
);
}
}

const TabNavigator = createBottomTabNavigator(
{
Home:{
screen:HomeScreen,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<Icon name="ios-home" color={tintColor} size={25}/>
)
}
},
Profile: {
screen:ProfileScreen,
navigationOptions:{
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
<Icon name="ios-person" color={tintColor} size={25}/>
)
}
},
},
{
initialRouteName: "Home"
},
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
});

export default createAppContainer(TabNavigator);

Happy Coding :)

React Navigation 2.0 | Tab Navigator | React Native

npm install --save react-navigation

npm install --save react-native-vector-icons

react-native link

declared two component like

Home.js
Settings.js

______________________________________________________________________________

Home.js

import React, { Component } from 'react'

import { View, Text, StyleSheet, Button, TouchableOpacity} from 'react-native'

class Home extends Component {

render() {

return (

<Text style={{fontSize:20, color:'blue'}}> Home Screen</Text>

</View>

);

}

const styles = StyleSheet.create({

container:{

flex:1,

alignItems: 'center',

justifyContent: 'center'

}

})

export default Home

____________________________________________________________________________

Settings.js

import React, { Component } from 'react'

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

class Settings extends Component {

render() {

return (

<Text style={{fontSize:20, color:'blue'}}> Login Screen</Text>

</View>

);

}

const styles = StyleSheet.create({

container:{

flex:1,

alignItems: 'center',

justifyContent: 'center'

}

})

export default Settings

_______________________________________________________________________________

App.js

import React, { Component } from 'react'

import { createBottomTabNavigator } from 'react-navigation'

import Home from './screens/Home';

import Settings from './screens/Settings';

import Icon from 'react-native-vector-icons/Ionicons'

const RootStack = createBottomTabNavigator({

Home: {

screen: Home,

navigationOptions: {

tabBarLabel: 'Home',

tabBarIcon: ({ tintColor }) => (

)

}

Settings: {

screen: Settings,

navigationOptions: {

tabBarLabel: 'Settings',

tabBarIcon: ({ tintColor }) => (

)

}

{//route config

initialRouteName: 'Settings',

order: ['Settings', 'Home'],

//navigation for complete tab navigator

navigationOptions: {

tabBarVisible: true

tabBarOptions: {

activeTintColor: 'red',

inactiveTintColor: 'blue'

}

})

export default class App extends Component {

render() {

return (

)

}

Display

Happy Coding :)

TabNavigator
npm install --save react-navigation

components

Home.js
About.js

Home.js

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

class Home extends Component {

render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 25, fontWeight: 'bold', color: 'blue' }}>
Home Screen
</Text>
</View>
);
}
}
export default Home

__________________________________________________________________________

About.js
import React, { Component } from 'react'
import { View, Text } from 'react-native'

class About extends Component {

render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 25, fontWeight: 'bold', color: 'blue' }}>
About Screen
</Text>
</View>
);
}
}

export default About
________________________________________________________________________

App.js

import React, { Component } from 'react'
import { createTabNavigator } from 'react-navigation'
import Home from './components/Home';
import About from './components/About';

const RootTab = createTabNavigator({
Home: { screen: Home },
About: { screen: About }
})

export default class App extends Component {
render() {
return (
<RootTab />
);
}

}

Display

import React from 'react'
import { Button, Text } from 'react-native'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation'

import ScreenBottomB from './src/screens/ScreenBottomB'
import ScreenBottomA from './src/screens/ScreenBottomA'
import Icons from 'react-native-vector-icons/Ionicons'

const ScreenA = () => {
return (
<>
<Text> ScreenA</Text>
</>
)
}

const TabNavigator = createBottomTabNavigator({
Tab1: createStackNavigator({
Tab1: ScreenBottomA,
ScreenA: ScreenA
}),
Tab2: createStackNavigator({
Tab2: ScreenBottomB
})
}, {
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state
let IconComponent = Icons
let iconName
if (routeName === 'Tab1') {
iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline'
} else if (routeName === 'Tab2') {
iconName = focused ? 'ios-list-box' : 'ios-list'
}
return <IconComponent name={iconName} size={25} color={tintColor}></IconComponent>
}
}),
tabBarOptions: {
activeTintColor: '#fff',
activeBackgroundColor: '#f4511e',
keyboardHidesTabBar: false,
tabStyle: {
backgroundColor: '#f4511e',
},
labelStyle: {
fontSize: 15
}
}
})

const AppContainer = createAppContainer(TabNavigator)
const App = () => {
return (
<>
<AppContainer />
</>
)
}
export default App

......................................................................................................................................................................................................................................

import React from 'react';

import 'react-native-gesture-handler';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {observer} from "mobx-react";

import MenuStore from "./utils/store/MenuStore";
import LanguageStore from "./utils/store/LanguageStore";
import {TakeSend} from "./screens/bottomtab/takesend/TakeSend";
import {TakeSendList} from "./screens/bottomtab/takesend/TakeSendList";
import {TabIcon} from "./components/tabmenu/TabIcon";
import {TabLabel} from "./components/tabmenu/TabLabel";
import About from "./screens/bottomtab/about/About";
import RouterStyle from './utils/styles/RouterStyle';
import {DrawerBar} from './components/sidemenu/DrawerBar';
import {DrawerCustomComponent} from './components/sidemenu/DrawerCustomComponent';
import {DrawerIcon} from './components/sidemenu/DrawerIcon';
import {Login} from './screens/login/Login';
import Corporate from './screens/corporate/Corporate';
import Home from './screens/Home';
import {DrawerLabel} from './components/sidemenu/DrawerLabel';
import {DrawerText} from './components/sidemenu/DrawerText';
import {DrawerSearch} from './components/sidemenu/DrawerSearch';
import EStyleSheet from 'react-native-extended-stylesheet';

const Tab = createBottomTabNavigator();
const TakeSendStack = createStackNavigator();
const HomeStack = createStackNavigator();
const LoginStack = createStackNavigator();
const Drawer = createDrawerNavigator();

function HomeStackScreen({ navigation }) {
return (
<HomeStack.Navigator initialRouteName={"HomeStack"} screenOptions = {{ headerTintColor: EStyleSheet.value('$gColor'), headerBackTitle: LanguageStore.resource.router.back_title, headerBackTitleStyle: RouterStyle.headerBackTitleStyle }} >
<HomeStack.Screen name="HomeStack"
options={{
title: LanguageStore.resource.side_menu.home.title,
headerLeft: () => (<DrawerBar navigation={navigation}/>),
headerRight: () => (<DrawerSearch navigation={navigation}/>),
headerTitle : () => <DrawerText title={LanguageStore.resource.side_menu.home.title}/>}}
component={Home} />
</HomeStack.Navigator>
);
}

function CorporateStackScreen({ navigation }) {
return (
<HomeStack.Navigator initialRouteName={"CorporateStack"} screenOptions = {{ headerTintColor: EStyleSheet.value('$gColor'), headerBackTitle: LanguageStore.resource.router.back_title, headerBackTitleStyle: RouterStyle.headerBackTitleStyle }} >
<HomeStack.Screen name="CorporateStack"
options={{
title: LanguageStore.resource.side_menu.corporate.title,
headerLeft: () => (<DrawerBar navigation={navigation}/>),
headerRight: () => (<DrawerSearch navigation={navigation}/>),
headerTitle : () => <DrawerText title={LanguageStore.resource.side_menu.corporate.title}/>}}
component={Corporate} />
</HomeStack.Navigator>
);
}

function TakeSendStackScreen({ navigation }) {
return (
<TakeSendStack.Navigator initialRouteName={"TakeSend"} screenOptions = {{ headerRight: () => (<DrawerSearch navigation={navigation}/>), headerTintColor: EStyleSheet.value('$gColor'), headerBackTitle: LanguageStore.resource.router.back_title, headerBackTitleStyle: RouterStyle.headerBackTitleStyle }} >
<TakeSendStack.Screen name="TakeSend"
options={{
headerLeft: () => (<DrawerBar navigation={navigation}/>),
headerTitle : () => <DrawerText title={LanguageStore.resource.side_menu.take_send.title}/>}}
component={TakeSend} />
<TakeSendStack.Screen name="TakeSendList" options={{ headerTitle : () => <DrawerText title={LanguageStore.resource.side_menu.take_send.list_title}/> }} component={TakeSendList} />
</TakeSendStack.Navigator>
);
}

function LoginStackScreen({ navigation }) {
return (
<LoginStack.Navigator initialRouteName={"LoginStack"} screenOptions = {{ headerTintColor: EStyleSheet.value('$gColor'), headerBackTitle: LanguageStore.resource.router.back_title, headerBackTitleStyle: RouterStyle.headerBackTitleStyle }} >
<LoginStack.Screen name="LoginStack"
options={{
title: LanguageStore.resource.side_menu.login.title,
headerLeft: () => (<DrawerBar navigation={navigation}/>),
headerTitle : () => <DrawerText title={LanguageStore.resource.side_menu.login.title}/>}}
component={Login} />
</LoginStack.Navigator>
);
}

function TabNavigator({ navigation }) {
return (
<Tab.Navigator initialRouteName={"TakeSendTab"}>
<Tab.Screen name="TakeSendTab" component={DrawerNavigator}
options={{
tabBarLabel: ({focused,color}) => <TabLabel title={LanguageStore.resource.bottom_tab_menu.take_send.title} focused={focused} />,
tabBarIcon: ({focused,color,size}) => <TabIcon size={size} focused={focused} iconName={"camera"} />
}}
/>
<Tab.Screen name="About" component={About}
options={{
tabBarLabel: ({focused,color}) => <TabLabel title={LanguageStore.resource.bottom_tab_menu.about.title} focused={focused} />,
tabBarIcon: ({focused,color,size}) => <TabIcon size={size} focused={focused} iconName={"sliders-h"} />,
header:()=>null
}}
/>
</Tab.Navigator>
);
}

function DrawerNavigator({ navigation }) {
return (
<Drawer.Navigator
initialRouteName="Home"
screenOptions = {{ headerTintColor: EStyleSheet.value('$gColor'), headerBackTitle: LanguageStore.resource.router.back_title, headerBackTitleStyle: RouterStyle.headerBackTitleStyle }}
drawerStyle={RouterStyle.drawerStyle}
drawerType={'slide'}
drawerContent={props => <DrawerCustomComponent {...props} />}>
<Drawer.Screen
name="Home"
component={HomeStackScreen}
options={{ drawerLabel: ({focused}) => <DrawerLabel focused={focused} title={LanguageStore.resource.side_menu.home.title} />, drawerIcon: ({focused}) => <DrawerIcon size={25} iconName={"home"} focused={focused} /> }}
/>
<Drawer.Screen
name="Corporate"
component={CorporateStackScreen}
options={{ drawerLabel: ({focused}) => <DrawerLabel focused={focused} title={LanguageStore.resource.side_menu.corporate.title} />, drawerIcon: ({focused}) => <DrawerIcon size={25} iconName={"building"} focused={focused} /> }}
/>
<Drawer.Screen
name="Tabs"
component={TabNavigator}
options={{ drawerLabel: ({focused}) => <DrawerLabel focused={focused} title={LanguageStore.resource.side_menu.take_send.title} />, drawerIcon: ({focused}) => <DrawerIcon size={25} iconName={"camera"} focused={focused} /> }}
/>
{MenuStore.isLogin ? <></>
: <Drawer.Screen
name="Login"
component={LoginStackScreen}
options={{ drawerLabel: ({focused}) => <DrawerLabel focused={focused} title={LanguageStore.resource.side_menu.login.title} />, drawerIcon: ({focused}) => <DrawerIcon size={25} iconName={"sign-in-alt"} focused={focused} /> }}
/>}
</Drawer.Navigator>
);
}

@observer
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName={"RouteDrawerNavigator"}>
<Tab.Screen name="RouteDrawerNavigator" component={DrawerNavigator}
options={{
tabBarLabel: ({focused,color}) => <TabLabel title={LanguageStore.resource.bottom_tab_menu.take_send.title} focused={focused} />,
tabBarIcon: ({focused,color,size}) => <TabIcon size={size} focused={focused} iconName={"camera"} />
}}
/>
<Tab.Screen name="About" component={About}
options={{
tabBarLabel: ({focused,color}) => <TabLabel title={LanguageStore.resource.bottom_tab_menu.about.title} focused={focused} />,
tabBarIcon: ({focused,color,size}) => <TabIcon size={size} focused={focused} iconName={"sliders-h"} />,
header:()=>null
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
}

Easy Steps

Friday, November 23, 2018

React Navigation 5.x|| 4.x || 3.x || Example of createBottomTabNavigator

Example

React Navigation 2.0 | Tab Navigator | React Native

1 comment: