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");
Related
I want to navigate from one inner screen to third tab of Bottom Tab Navigation.
Here is my Stack Navigator:
<Navigator
screenOptions={{
headerShown: false,
animationEnabled: true,
orientation: 'portrait',
}}>
<Screen name="BottomTabs" component={BottomTabs} />
<Screen
name="CreateWorkout"
component={CreateWorkout}
options={horizontalAnimation}
/>
<Screen
name="NewWorkout"
component={NewWorkout}
options={horizontalAnimation}
/>
<Screen
name="StartWorkout"
component={StartWorkout}
options={horizontalAnimation}
/>
</Navigator>
Here is my Bottom Tab Navigator:
const BottomTabs = () => {
return (
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="RootHome" component={RootHome} />
<Stack.Screen name="Create" component={CreateWorkoutScreen} />
<Stack.Screen name="Progress" component={MyProgressScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
};
I want to navigate from "StartWorkout" to "Progress" screen in Bottom Tabs.
navigation.navigate('BottomTabs', {screen: 'Progress'});
Any help can be appreciated.
I have tried this code it does navigate to that particular screen but it hides the BottomTabs
I think that to do this, you have to put the "StartWorkout" screen inside the "BottomTabs" component, so it would navigate to the "Progress" screen without hiding the bottom tabs.
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>
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} />
...
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.
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}}
/>