We Keep Coding

How can I use Drawer Navigation in TabScrren in React native?

I have a MainPage component, and in the MainPage component, there are PostList, Post, and Explain components as Stack.Screen. and i made Home component
this is my code
const home = () => {
return (
<View>
<Text>home</Text>
</View>
)
}
const MainPage = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="PostList"
component={PostList}
options={{headerShown: false}}
/>
<Stack.Screen
name="Post"
component={Post}
options={{headerShown: false}}
/>
<Stack.Screen
name="Explain"
component={Explain}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
);
};
And MainPage is wrapped with Tab.screen.
<Tab.Navigator>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
headerShown: false,
tabBarStyle: {display: 'none'},
tabBarIcon: ({color}) => (
<FontAwesome5 name="list" size={20} style={{color}} />
),
tabBarActiveTintColor: 'blue',
}}
/>
</Tab.Navigator>
I want to navigate to Home component using drawer navigation in MainPage component inside Tab.Screen.
so i tried like this code
<Drawer.Navigator initialRouteName="Home">
<Tab.Navigator>
<Tab.Screen
name="MainPage"
component={MainPage}
options={{
headerShown: false,
}}
/>
</Tab.Navigator>
</Drawer.Navigator>
but it doesn't work. How can i fix my code?

How to Open Drawer On OnPress from Stack.Screen in react native

I am trying to open drawer from homeScreen. drawer is opening when I swipe right but. I want to open Draer onPress of menu Icon. But Its not working. I used openDrawer, toggleDrawer but nothing work.
here is my code
function MyDrawer() {
return (
<Drawer.Navigator initialRouteName="homeScreen">
<Drawer.Screen name="homeSreen" component={homeScreen}
options={{
headerLeft: () => <Icon
name="menu"
size={25}
color="#D4AF37"
onPress={() => navigation.toggleDrawer()}
/>
}}
/>
</Drawer.Navigator>
);
}
function App({ navigation }) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="splashScreen" component={splashScreen} options={{headerShown: false}} />
<Stack.Screen name="loginScreen" component={loginScreen} options={{headerShown: false}} />
<Stack.Screen name="homeScreen" component={MyDrawer} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;

in react-navigation V5
navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());

Try with adding navigation in function MyDrawer()
like this function MyDrawer({navigation}) {...}

You can use this.props.navigation.openDrawer() to open drawer
<TouchableOpacity
onPress={() => {
this.props.navigation.openDrawer();
}}>
<Icon name="bars" size={21} color="rgb(112, 112, 112)" />
</TouchableOpacity>

Displaying Home header on other Tab screens after adding authentication.(Following React Navigation Docs)

Hope you have a great day~
With help of #Wen W, I managed to show one Home header on Home screen. But now I have Home header on other Tabs screens as shown. What should I change to display each screen's own header?
Home Screen
History Screen
The code is
const Tab = createBottomTabNavigator();
function HomeTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="History" component={HistoryScreen} />
<Tab.Screen name="Request" component={RequestScreen} />
<Tab.Screen name="Account" component={AccountScreen} />
</Tab.Navigator>
);
}
const BottomStack = createStackNavigator();
function HomeStack() {
return (
<BottomStack.Navigator>
<BottomStack.Screen name="Home" component={HomeTabs} />
<BottomStack.Screen name="ShiftConfirmation" component={ShiftConfirmation} />
<BottomStack.Screen name="ShiftConfirmed" component={ShiftConfirmed} />
<BottomStack.Screen name="RequestConfirmation" component={RequestConfirmation} />
<BottomStack.Screen name="RequestConfirmed" component={RequestConfirmed} />
</BottomStack.Navigator>
);
}
...
return (
<SafeAreaProvider>
<AuthContext.Provider value={authContext}>
<NavigationContainer>
<Stack.Navigator>
{state.isLoading ? (
// We haven't finished checking for the token yet
<Stack.Screen name="Splash" component={SplashScreen} />
) : state.userToken == null ? (
// No token found, user isn't signed in
<Stack.Screen
name="SignIn"
component={SignInScreen}
options={{
title: 'Sign in',
// When logging out, a pop animation feels intuitive
animationTypeForReplace: state.isSignout ? 'pop' : 'push',
}}
/>
) : (
// User is signed in
<Stack.Screen options={{ headerShown: false }} name="SignedIn" component={HomeStack} />
)}
</Stack.Navigator>
</NavigationContainer>
</AuthContext.Provider>
</SafeAreaProvider>
);
}

because you have two stack screens with the name Home. you can remove the header from one of them.
) : (
// User is signed in
<Stack.Screen options={{headerShown: false}} name="Home" component={HomeTabs} />
)}
</Stack.Navigator>
....
<BottomStack.Screen options={{headerShown: false}} name="Home" component={HomeScreen} />
...

Build a TabNavigator combined with Stack and Drawer

I currently have these navigators built:
const MainStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
cardStyle: {backgroundColor: theme['primaryColor']},
header: () => <MenuComponent />,
}}>
<Stack.Screen name="Logins" component={LoginScreen} />
<Stack.Screen name="Swipe" component={SwipeScreen} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
return (
<Root>
<NavigationContainer>
<Drawer.Navigator
screenOptions={{swipeEnabled: false}}
drawerContent={(props) => <SidebarComponent {...props} />}
initialRouteName="Login">
<Drawer.Screen name="List" component={MainStackNavigator} />
</Drawer.Navigator>
</NavigationContainer>
</Root>
);
I need to additionally add a TabNavigator to the "Swipe" screen so that i can build 3 more screens and swipe over them

You can create a TabNavigator with the screens you want. Then include it in your MainStackNavigator instead of the Swipe screen component.
First, you can create your TabNavigator like this.
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Screen1" component={Screen1} />
<Tab.Screen name="Screen2" component={Screen2} />
<Tab.Screen name="Screen3" component={Screen3} />
</Tab.Navigator>
);
};
Then, include it in your MainStackNavigator instead of the Swipe screen component like this.
const MainStackNavigator = () => {
return (
<Stack.Navigator
screenOptions={{
cardStyle: { backgroundColor: theme['primaryColor'] },
header: () => <MenuComponent />,
}}>
<Stack.Screen name="Logins" component={LoginScreen} />
<Stack.Screen name="Tabs" component={TabNavigator} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
Please comment here if you have any problems regarding this.

React Native. Hiding item from BottomTab.Navigator in react-navigation

Let's say I have 3 pages. Home, Settings, Page.
I have
<BottomTab.Navigator>
<BottomTab.Screen name="Home" component={HomeScreen}/>
<BottomTab.Screen name="Settings" component={SettingsScreen}/>
<BottomTab.Screen name="Page" component={PageScreen}/>
</BottomTab.Navigator>
All 3 of them are shown in bottom navigation.
I want to access Home and Settings from bottom navigation and Page from link within Home page.
My question is there a way to hide Page from bottom navigation but still link to it from other pages and pass props and data to it?
I tried removing Page from <BottomTab.Screen> but then I can't use navigation.navigate("Page") to navigate to page, and I need this so I can pass props and data to that page
Here is some code from app. This code is generated with expo
// App.js
render (
<NavigationContainer
ref={containerRef}
initialState={initialNavigationState}
>
<Stack.Navigator>
<Stack.Screen name="Root" component={BottomTabNavigator} />
</Stack.Navigator>
</NavigationContainer>
</View>
)
//bottomTabNavigator component
<RootStack.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
<RootStack.Screen
name="Home"
component={HomeScreen}
options={{
title: "Get Started",
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name="md-code-working" />
),
}}
/>
<RootStack.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarVisible: false,
title: "Your Profile",
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name="md-book" />
),
}}
/>
</RootStack.Navigator>
Thank you

I'm not sure if I understood you correctly, but i think this is what you are looking for.
https://reactnavigation.org/docs/stack-navigator/
After installing everything, you can do something like this
const RootStackNavigator = () => {
return(
<RootStack.Navigator>
<RootStack.Screen name="main" component = {BottomStackScreen}/>
<RootStack.Screen name="Page" component={PageScreen} />
</RootStack.Navigator>
)
}
So, in your code you can switch your app.js to:
<Stack.Navigator>
<Stack.Screen name="Root" component={BottomTabNavigator} />
<Stack.Screen name="Page" component={PageScreen} />
</Stack.Navigator>
Then you can navigate to the Page by using this.props.navigation.navigate("Page");