How to build a nested navigation In react native - react-native

Question

I Have navigation system of createMaterialTopTabNavigator and createDrawerNavigator I try to get a menu bar icon in the top left side of the createMaterialTopTabNavigator but till this moment I can't figure out how to add this element at the particular place , is there any react native property that may correspond to that situation , could you please help
import React, { Component } from "react";
import {.. } from "react-native";
import Icon from 'react-native-vector-icons/MaterialIcons'
import { createSwitchNavigator, createDrawerNavigator ,DrawerItems,createMaterialTopTabNavigator,createStackNavigator} from 'react-navigation'
import screens ...
console.disableYellowBox = true;
const TabBarNavig = createMaterialTopTabNavigator({
Places : {
screen :Players,
navigationOptions: ({ navigation }) => ({
title: 'Placements'
}
)
},
GetPlaces : Teams,
New : Matchs
},
{
tabBarOptions: {
scrollEnabled: true,
labelStyle: {
fontSize: 10,
paddingTop:10
},
tabStyle: {
width: Dimensions.get('window').width / 3,
},
style: {
backgroundColor: '#38A1F3',
height: 80
},
indicatorStyle: {
backgroundColor: '#fff',
},
activeTintColor : 'white',
inactiveTintColor : '#ddd',
showIcon : true,
showLabel: true
}
}
);
const DrawerContent = (props) => (
<ScrollView contentContainerStyle={{flexGrow: 1 }}>
<View
style={{
paddingTop: 35,
paddingBottom : 35,
backgroundColor: '#38A1F3',
alignItems: 'center',
justifyContent: 'center',
color: '#FFF'
}}
>
<Image
source={require('./assets/logo.png')}
style={{width:110,height:110 , marginBottom: 10,borderColor:'#FFF',borderWidth:0}}
/>
</View>
<View style={{ backgroundColor: '#FFF',alignItems: 'flex-start',justifyContent: 'center',marginTop:40,marginLeft:20}}>
<DrawerItems {...props}
getLabel = {(scene) => (
<View style={styles.button}>
<Image source={arry[props.getLabel(scene)]} style={{marginRight:20,width:24,height:24}} />
<Text style={styles.buttonText}>{props.getLabel(scene)}</Text>
</View>
)}
/>
</View>
</ScrollView>
)
const arry = {Home:require('./assets/home.png'),Days:require('./assets/icon.png')};
const AppDrawerNavigator = createDrawerNavigator({
Home: TabBarNavig,
Days: Dating
},
{
contentComponent: DrawerContent,
}
)
const Routes = createSwitchNavigator({
App: AppDrawerNavigator
})
export default Routes;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
buttonText:{
color:'#000',
fontStyle: 'italic',
fontSize: 16,
},
button:{
flexDirection: 'row',
paddingBottom : 20
}
});

Answer 1

As my knowledge, in createBottomTopNavigator according to docs there is no option to add menu left or right docs
you can set left icon through navigationOptions of your component like this
static navigationOptions = ({navigation}) => ({
headerLeft: <Icon name='....' ....../>,
headerRight: <Icon name='....' ....../>
})