React native Nested navigatiion issue - javascript

I save the stack navigator on the drawer navigator.
I have 2 problems.
The menu should not appear on the page when the application is opened.
The component name that I used during registration should not appear on the page I directed later.
I couldn't solve this issue. Can you help me?
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function Menu() {
return (
<Stack.Navigator headerMode="none" lazy={false}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Verify" component={VerifyScreen} />
<Stack.Screen name="Tarih" component={Datepicker} options={{
animationEnabled: false,
}} />
<Stack.Screen name="Otel" component={SearchedHotel} options={{
animationEnabled: false,
}} />
<Stack.Screen name="Bölge" component={Regions} options={{
animationEnabled: false,
}} />
<Stack.Screen name="Web" component={OtelScanner} options={{
animationEnabled: false,
}} />
</Stack.Navigator>
);
}
function Routing(props) {
return (
<React.Fragment>
<IconRegistry icons={EvaIconsPack} />
<ApplicationProvider mapping={mapping} theme={lightTheme}>
<NavigationContainer>
<Drawer.Navigator>
<Drawer.Screen name="Login" component={LoginScreen} />
<Drawer.Screen name="Menu" component={Menu} />
</Drawer.Navigator>
</NavigationContainer>
</ApplicationProvider>
</React.Fragment >
);
}

Inside the <NavigationContainer /> you should have a <StackNavigator /> instead of <DrawerNavigator />
Example:
NavigationContainer
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Menu" component={Menu} />
</Stack.Navigator>
</NavigationContainer>
Example: Menu
function Menu() {
return (
<Drawer.Navigator headerMode="none" lazy={false}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Login" component={LoginScreen} />
<Drawer.Screen name="Verify" component={VerifyScreen} />
<Drawer.Screen name="Tarih" component={Datepicker} options={{
animationEnabled: false,
}} />
<Drawer.Screen name="Otel" component={SearchedHotel} options={{
animationEnabled: false,
}} />
<Drawer.Screen name="Bölge" component={Regions} options={{
animationEnabled: false,
}} />
<Drawer.Screen name="Web" component={OtelScanner} options={{
animationEnabled: false,
}} />
</Drawer.Navigator>
);
}

Related

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 show Bottom tab navigation in specific screens only

I have react native app which I am using react navigation and my navigation stack looks like the following:
<AppStack.Navigator screenOptions={{
headerStyle: {
backgroundColor: COLORS.primary2,
elevation: 0,
shadowOpacity: 0,
},
headerTintColor: '#fff',
}}>
<AppStack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false
}}
/>
<AppStack.Screen
name="qr"
component={qr}
options={{
headerShown: false
}} />
<AppStack.Screen
name="Profile"
component={ProfileScreen}
options={{ headerShown: false }}
/>
<AppStack.Screen
name="Notifications"
component={NotificationScreen}
options={{ headerShown: false }}
/>
<AppStack.Screen
name="Support"
component={ChatScreen}
options={{ headerShown: false }}
/>
</AppStack.Navigator>
I want to create createBottomTabNavigator but to be displayed in all screen in the AppStack except the following home screen
<AppStack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false
}}
/>
May I know what the best practice to implement that.
You can use tabBarVisible(boolean) prop for this purpose.
<AppStack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false
}}
navigationOptions:()=>{
return {
tabBarVisible:false,
}
}
/>

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 navigation - hide ui from primary stack when navigating to nested stack

How can I hide the UI in my primary stack when I navigate to my nested drawer stack?
Currently, the header from my primary stack, shows above the header in my nested stack when I navigate to a screen using:
navigation.navigate('Drawer', {screen: 'About'});
Navigator:
function DrawerStack() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Video Episodes" component={VideoEpisodesScreen} />
<Drawer.Screen name="Test Yourself" component={TestYourselfScreen} />
<Drawer.Screen name="My Results" component={MyResultsScreen} />
<Drawer.Screen name="About" component={AboutScreen} />
<Drawer.Screen name="Tests" component={TestsScreen} />
<Drawer.Screen
name="Bookmarked Videos"
component={BookmarkedVideosScreen}
/>
</Drawer.Navigator>
);
}
export default function AppNavigator() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={stackOptions}
/>
<Stack.Screen
name="Drawer"
component={DrawerStack}
options={drawerOptions}
/>
<Stack.Screen
name="MyResultsScreen"
component={MyResultsScreen}
options={options}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
You can hide the stack navigation header by setting the option headerShown to false. I'm not sure how drawerOptions is configured but I think you could do something like this in yout <Stack.Navigator>
<Stack.Screen
name="Drawer"
component={DrawerStack}
options={{...drawerOptions, headerShown: false}}
/>

Categories