React-Navigation showing Bottom menu and Drawer menu in the same screen - react-native

Question

I am using React-Navigation, and I want to have a bottom tab menu and a drawer menu. After a bit of fiddling, I guess I am getting close but kind of stuck. Anyway here's my codes:
import { createStackNavigator,
createAppContainer,
createBottomTabNavigator,
createDrawerNavigator
} from 'react-navigation';
//import my screens... etc
class HomeScreen extends React.Component {
//Other contents.....
//Create my main navigation stacks here
const Home = createStackNavigator({
HomeScreen,
Screen1,
Screen2,
SettingScreen,
ProfileScreen,
//......etc.
});
//navigation stack for the bottom tab menu
const CalendarScreen = createStackNavigator({ myCalendar });
const GraphScreen = createStackNavigator({ myGraph });
//Botton Tab menu
const TabNavigator = createBottomTabNavigator({
Home, CalendarScreen, GraphScreen
});
//Drawer menu
const DrawerNavigator = createDrawerNavigator(
{
Tab: { screen: TabNavigator },
Setting: { screen: SettingScreen },
Profile: { screen: ProfileScreen }
},
{
drawerWidth: 300,
drawerPosition: 'right',
}
);
export default createAppContainer(DrawerNavigator);
}
The result is that the screen loads with the Bottom menu showing, and swiping from the right side will open the Drawer menu.
The problem is that it displays "Tab" as one of the menu in the Draw menu. And if I click on the "Setting" or "Profile", it will close/hide the Bottom menu. I had to click on "Tab" in the Drawer menu to make the Bottom menu show again.
What I want to achieve is to have the Bottom menu always showing, and a drawer menu with only "Setting" and "Profile". How can I achieve this?

Answer 1

I'm having this same issue while developing using React Native.
I read some issues on their (react-navigation) GitHub and some Stack Overflow answares as well but nothing helped much.
My solution to this was to create a StackNavigation with all my screens and then a Drawer Navigation only with the ones I wanted to put in the drawer (unfortunately this keeps the problem of showing the "Home" link in the drawer).
This is my Routes.js
import HomeScreen from "./components/HomeScreen";
import ProfileScreen from "./components/ProfileScreen";
import AnimalsScreenfrom "./components/AnimalsScreen";
import DoctorsScreenfrom "./components/DoctorsScreen";
import { createStackNavigator, createDrawerNavigator } from "react-navigation";
const BottomNavigator = createStackNavigator(
{
Home: { screen: HomeScreen, name: "Home" },
Profile: { screen: ProfileScreen, name: "Profile" },
Animals: { screen: AnimalsScreen, name: "Animals" },
Doctors: { screen: DoctorsScreen, name: "Doctors" }
},
{
headerMode: "none"
}
);
const AppNavigator = createDrawerNavigator({
Mapa: BottomNavigator,
Animals: { screen: AnimalsScreen, name: "Animals" },
Doctors: { screen: DoctorsScreen, name: "Doctors" }
});
export default AppNavigator;
After that, in all my components, I manually added the buttons as if they were regular BottomTabNavigator. Each of the buttons is binded on their onPress function to navigate to a different screen, so it simulates pretty well the function.
Something like this (it is not styled, jut setted to be on the bottom of the screen yet):
<View style={{ flex: 1, position: "absolute", bottom: 0 }}>
<Button
title="Menu"
onPress={() => this.props.navigation.openDrawer()}
/>
<Button
title="Home"
onPress={() => this.props.navigation.navigate("Home")}
/>
<Button
title="Profile"
onPress={() => this.props.navigation.navigate("Profile")}
/>
</View>
My first button opens the Drawer, the second goes to the HomeScreen and the third to the profileScreen while in my drawer I have the first button to Home, the second to AnimalsScreen and the third to DoctorsScreen
I am still developing this app, but you can check the code in my github Repository:
React-native-sample-app. Some of the components names are different but the logic is the same.
Hope it helps