how to create a drawer using React Native? - reactjs

Question

I want to create a drawer that appears only on my homescreen,
had tried using React Native side menu but that just hides the drawer behind then tried using createdrawernavigator
but I have a bottomtabnavigator inside stacknavigator, and am stuck on how to implement drawer navigator on top of that
below is my navigation.js
const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();
const AuthStack = createStackNavigator();
// const Drawer = createDrawerNavigator();
function AuthNavigator() {
function LogoTitle(props) {
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginVertical: 10,
}}>
<Image
style={{width: 31.44, height: 31.2}}
source={Images.symptomcheck_bot1}
/>
<Text
style={{
marginLeft: 10,
color: '#FFFFFF',
fontStyle: 'italic',
fontSize: 14,
}}>
{props.children}
</Text>
</View>
);
}
return (
<AuthStack.Navigator initialRouteName="login">
<AuthStack.Screen
name="login"
component={LoginScreen}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="otp"
component={OtpScreen}
options={{headerShown: false}}
/>
<AuthStack.Screen name="addchild" component={AddChild} />
<AuthStack.Screen
name="acceptinvitescreen"
component={AcceptInviteScreen}
/>
<AuthStack.Screen
name="Home"
component={BottomTabBar}
options={{
headerShown: false,
}}
/>
<AuthStack.Screen
name="online"
component={OnlineConsultationWebviewScreen}
/>
<AuthStack.Screen
name="actual"
component={ActualConsultationWebviewScreen}
/>
<AuthStack.Screen name="baby" component={BabyAccuteIllnessScreen} />
<AuthStack.Screen name="vaccinelist" component={VaccinationListScreen} />
<AuthStack.Screen
name="vaccinationdetail"
component={VaccinationDetailScreen}
/>
<AuthStack.Screen
name="vaccinereadmore"
component={VaccinationDetailreadMoreScreen}
/>
<AuthStack.Screen
name="symptomChecker"
component={SymptomChecker}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Symptom Checker',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
width: '100%',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<AuthStack.Screen
name="symptomCheckerSearch"
component={SymptomCheckerSearch}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Hi! I’m ISHA, your health care assistant',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? 0 : 50,
},
headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<AuthStack.Screen
name="symptomCheckerQA"
component={SymptomCheckerQA}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Hi! I’m ISHA, your health care assistant',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? 0 : 50,
},
headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<AuthStack.Screen
name="symptomCheckerAssessmentReport"
component={symptomCheckerAssessmentReport}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Assessment Report',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
}}
/>
<AuthStack.Screen
name="symptomCheckerDetailReport"
component={SymptomCheckerDetailReport}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Detail Report',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -100 : 50,
},
}}
/>
<AuthStack.Screen
name="plactivityplanner"
component={PLActivityPlanner}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="plactivityplannerdetail"
component={PLActivityPlannerDetail}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="plactivityplannerreport"
component={PLActivityPlannerReport}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="todaysgoal"
component={TodaysGoalScreen}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="mealdesc"
component={MealDescriptionScreen}
options={{headerShown: false}}
/>
<AuthStack.Screen
name="nutritionassessment"
component={NutritionAssessment}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Nutrition Assessment',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 20,
width: '100%',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
}}
/>
<AuthStack.Screen
name="nutritionassessmentreport"
component={NutritionAssessmentReport}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'NutriCheck',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 20,
width: '100%',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
}}
/>
</AuthStack.Navigator>
);
}
function BottomTabBar() {
return (
<Tab.Navigator
lazy={false}
initialRouteName="Home"
tabBarOptions={{
labelStyle: {
color: '#FF1493',
fontSize: 12,
},
}}>
<Tab.Screen
name="Home"
// uncommnet below line to see new Home Tab
component={HomeTabScreen}
// uncomment below see old Home Tab
// component={HomeScreen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({color, size}) => (
<MaterialIcon name="home" color="#FF1493" size={30} />
),
}}
/>
<Tab.Screen
name="Consult"
component={ConsultationHomeScreen}
initialParams={{
uri: 'https://qa.parentlane.com/doctors/launch-home?app_type=0',
}}
options={{
tabBarLabel: 'Consult',
tabBarIcon: ({color, size}) => (
<FontAwesomeIcon name="stethoscope" color="#FF1493" size={30} />
),
}}
/>
<Tab.Screen
name="Plans"
component={PlansTabScreen}
options={{
tabBarLabel: 'Plans',
tabBarIcon: ({color, size}) => (
<MaterialCommunityIcons
name="crown-outline"
color="#FF1493"
size={30}
/>
),
}}
/>
<Tab.Screen
name="Chat"
component={ChatTabScreen}
options={{
tabBarLabel: 'Chat',
tabBarIcon: ({color, size}) => (
<MaterialCommunityIcons
name="chat-outline"
color="#FF1493"
size={30}
/>
),
}}
/>
</Tab.Navigator>
);
}
function RootNavigator() {
function LogoTitle(props) {
return (
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginVertical: 10,
}}>
<Image
style={{width: 31.44, height: 31.2}}
source={Images.symptomcheck_bot1}
/>
<Text
style={{
marginLeft: 10,
color: '#FFFFFF',
fontStyle: 'italic',
fontSize: 14,
}}>
{props.children}
</Text>
</View>
);
}
return (
<RootStack.Navigator initialRouteName="Home">
<RootStack.Screen
name="Home"
component={BottomTabBar}
options={{headerShown: false}}
/>
<RootStack.Screen
name="online"
component={OnlineConsultationWebviewScreen}
/>
<RootStack.Screen
name="actual"
component={ActualConsultationWebviewScreen}
/>
<RootStack.Screen name="baby" component={BabyAccuteIllnessScreen} />
<RootStack.Screen name="vaccinelist" component={VaccinationListScreen} />
<RootStack.Screen
name="vaccinationdetail"
component={VaccinationDetailScreen}
/>
<RootStack.Screen
name="vaccinereadmore"
component={VaccinationDetailreadMoreScreen}
/>
<RootStack.Screen
name="symptomChecker"
component={SymptomChecker}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Symptom Checker',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
width: '100%',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<RootStack.Screen
name="symptomCheckerSearch"
component={SymptomCheckerSearch}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Hi! I’m ISHA, your health care assistant',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? 0 : 50,
},
headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<RootStack.Screen
name="symptomCheckerQA"
component={SymptomCheckerQA}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Hi! I’m ISHA, your health care assistant',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? 0 : 50,
},
headerTitle: (props) => <LogoTitle {...props} />,
}}
/>
<RootStack.Screen
name="symptomCheckerAssessmentReport"
component={symptomCheckerAssessmentReport}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Assessment Report',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
}}
/>
<RootStack.Screen
name="symptomCheckerDetailReport"
component={SymptomCheckerDetailReport}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Detail Report',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 14,
fontStyle: 'italic',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -100 : 50,
},
}}
/>
<RootStack.Screen
name="plactivityplanner"
component={PLActivityPlanner}
options={{headerShown: false}}
/>
<RootStack.Screen
name="plactivityplannerdetail"
component={PLActivityPlannerDetail}
options={{headerShown: false}}
/>
<RootStack.Screen
name="plactivityplannerreport"
component={PLActivityPlannerReport}
options={{headerShown: false}}
/>
<RootStack.Screen
name="todaysgoal"
component={TodaysGoalScreen}
options={{headerShown: false}}
/>
<RootStack.Screen
name="mealdesc"
component={MealDescriptionScreen}
options={{headerShown: false}}
/>
<RootStack.Screen
name="nutritionassessment"
component={NutritionAssessment}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'Nutrition Assessment',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 20,
width: '100%',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
}}
/>
<RootStack.Screen
name="nutritionassessmentreport"
component={NutritionAssessmentReport}
options={{
gesturesEnabled: false,
headerBackTitleVisible: false,
headerBackTitle: null,
title: 'NutriCheck',
headerStyle: {
backgroundColor: '#FE017E',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: '300',
fontSize: 20,
width: '100%',
},
headerTitleContainerStyle: {
left: Platform.OS === 'ios' ? -70 : 50,
},
}}
/>
<RootStack.Screen
name="developmentscreening"
component={DevelopmentScreeningInfo}
options={{headerShown: false}}
/>
<RootStack.Screen
name="login"
component={LoginScreen}
options={{headerShown: false}}
/>
<RootStack.Screen
name="otp"
component={OtpScreen}
options={{headerShown: false}}
/>
</RootStack.Navigator>
);
}
// function DrawerRootNavigator() {
// return (
// <Drawer.Navigator>
// <Drawer.Screen name="Home" component={RootNavigator} />
// </Drawer.Navigator>
// );
// }
// function DrawerAuthNavigator(){
// return(
// <Drawer.Navigator>
// <Drawer.Screen name="login" component={AuthNavigator}/>
// </Drawer.Navigator>
// )
// }
export default function SwitchRootNavigator(props) {
const signedIn = props.signedIn;
return (
<NavigationContainer>
{signedIn != null &&
signedIn != undefined &&
signedIn != '' &&
signedIn != {} ? (
<RootNavigator />
) : (
<AuthNavigator />
)}
</NavigationContainer>
);
}
Could anyone please guide me how do I wrap my "Home" with a drawernavigator which would have a button navigating to the login screen?
have been stuck since long, any leads would be great.

Answer 1

I might have overcomplicated things in my initial comment. Those screens you would like to have a TabBar on; put those into a bottomTabNavigator. Screens with drawer on are placed into a different drawerNavigator; and these navigators are then nested in a stackNavigator which holds the rest of the screens of your app.
// Navigators
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
// screens you want bottom tabs on
function TabScreens() {
return (
<Tab.Navigator>
<Tab.Screen name="A" component={A} />
<Tab.Screen name="B" component={B} />
</Tab.Navigator>
);
}
// screens you want drawer on
function DrawerScreens() {
return (
<Drawer.Navigator>
<Drawer.Screen name="C" component={C} />
<Drawer.Screen name="D" component={D} />
</Tab.Navigator>
);
}
// and both Drawer and Tabs are then nested into Stack
function App() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={TabScreens} />
<Stack.Screen name="Drawer" component={DrawerScreens} />
<Stack.Screen name="E" component={E} />
<Stack.Screen name="F" component={F} />
<Stack.Screen name="G" component={G} />
</Stack.Navigator>
);
}
To navigate between the screens call:
navigation.navigate("navigatorName",{screen: "screenName"})
I might have overcomplicated things in my initial comment.
Example on how it is done with bottomTabNavigator instead of a drawer can be found here:
https://reactnavigation.org/docs/hiding-tabbar-in-screens/