react-native Drawer Navigation with Tab Navigation - react-native

Question

I'm trying to set a top menu and a tab menu in my app. The bottom tabs are working, but the top menu is not displaying. The top menu that I am trying to set is the one we click and the left menu options show.
class App extends Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</Provider>
);
}
}
export default App;
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
const MainStackNavigator = createStackNavigator({
Home: {
screen: TabNavigator
}
});
const AppDrawerNavigator = createDrawerNavigator({
Home:{
screen: MainStackNavigator
}
});
const AppSwitchNavigator = createSwitchNavigator({
Login: { screen: Login },
Main: { screen: AppDrawerNavigator }
});
const AppContainer = createAppContainer(AppSwitchNavigator);
I'm new with react native, so I am not sure the order to set the navigator options. What I'm doing wrong?
Thanks

Answer 1

I've put some code as an example with a MainDrawerNavigator that contains a MainTabNavigator. The tab navigator contains three stack navigators for this purpose I'll only reference the HomeScreenNavigator which is a stack navigator. By default this will show a stack header inside my Home tab but will not show a drawer icon to open the drawer. In order to do this you need to put an icon in to toggle the drawer. I've shown this by accessing the navigationOptions in the HomeScreen specifically shown:
static navigationOptions = (navData) => {
return {
headerLeft: (
<View style={styles.headerButtonLeft}>
<HeaderButtons HeaderButtonComponent={DefaultHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => {
navData.navigation.toggleDrawer()
}} />
</HeaderButtons>
</View>
),
}
}
The above will set an a header button on the left of the HomeScreen and pressing the Item will trigger toggling the drawer open via navData.navigation.toggleDrawer(). Your example would be similar except your outermost navigator would be your switch navigator it seems.
Full code as an example shown below: (let me know if clarification is needed elsewhere).
HomeScreen example:
class HomeScreen extends React.Component {
constructor(props) {
super(props)
this.state = { ... }
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
static navigationOptions = (navData) => {
return {
headerLeft: (
<View style={styles.headerButtonLeft}>
<HeaderButtons HeaderButtonComponent={DefaultHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => {
navData.navigation.toggleDrawer()
}} />
</HeaderButtons>
</View>
),
}
}
}
HomeScreenNavigator example:
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../screens/HomeScreen';
import MediaSelectScreen from '../screens/MediaSelectScreen';
import FinalizePostScreen from '../screens/FinalizePostScreen';
import { userInterface } from '../constants/Colors';
import Styles from '../constants/Styles';
const HomeScreenNavigator = createStackNavigator({
Home: HomeScreen,
MediaSelect: MediaSelectScreen,
FinalizePost: FinalizePostScreen
}, {
defaultNavigationOptions: {
headerStyle: {
backgroundColor: userInterface.accentColor,
height: Styles.HEADER_HEIGHT,
},
}
});
export default HomeScreenNavigator;
MainTabNavigator example:
import { createBottomTabNavigator } from 'react-navigation-tabs';
import MessagesScreen from '../screens/MessagesScreen';
import HomeScreenNavigator from './HomeScreenNavigator';
import LearnScreenNavigator from './LearnScreenNavigator';
const MainTabNavigator = createBottomTabNavigator({
LearnScreen: { screen: LearnScreenNavigator, navigationOptions: () => ({
tabBarLabel: 'Learn'
})},
HomeScreen: { screen: HomeScreenNavigator, navigationOptions: {
tabBarLabel: 'Home'
}},
MessagesScreen: { screen: MessagesScreen, navigationOptions: {
tabBarLabel: 'Messages'
}},
});
export default MainTabNavigator;
MainDrawerNavigator example:
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
const MainDrawerNavigator = createDrawerNavigator({
DrawerNav: MainTabNavigator
}, {
drawerType: 'slide'
});
export default createAppContainer(MainDrawerNavigator);
App.js example:
import React from 'react';
import * as Font from 'expo-font';
import { AppLoading } from 'expo';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import AppSwitchNavigator from './navigation/AppSwitchNavigator';
export default class App extends React.Component {
state = { ... }
render() {
return (
<Provider store={store}>
<AppSwitchNavigator/>
</Provider>
);
}
}
const store = createStore(rootReducer);
const rootReducer = combineReducers({ ... });