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.
Related
I have 2 screens in one Bottom stack navigator and 2 more screens in one of the bottom stack navigator screen.
Order of screens
Home Bottom Tab
Home Screen
Record Screen
About Bottom Tab
About screen
If I am on the record screen and I navigate to the about screen and by clicking the home bottom tab I will navigate back to the record screen but I want it to navigate me to the first screen in the home stack i.e home screen. How can I do that?
Bottom Tab Navigator
const HomeStackScreen = createBottomTabNavigator();
<HomeStackScreen.Navigator screenOptions={{ headerShown: false }}>
<HomeStackScreen.Screen
name={homeScreen}
component={Home}
user={props.user}
options={{ headerShown: false }}
/>
<HomeStackScreen.Screen
name={aboutScreen}
component={About}
user={props.user}
options={{ headerShown: false }}
/>
</HomeStackScreen.Navigator>
Stack Navigator
const HomeStack = createStackNavigator();
<HomeStack.Navigator screenOptions={{ headerShown: false }}>
<HomeStack.Screen
name={homeScreen}
component={Home}
user={props.user}
options={{ headerShown: false }}
/>
<HomeStack.Screen
name={recordScreen}
component={Record}
user={props.user}
options={{ headerShown: false }}
/>
</HomeStack.Navigator>
put
unmountOnBlur={true}
in the options of Bottom Tab
I found some answers with old versions of navigation, with "tabBarVisible" option in Tab Navigator.
But since there is no more this option I want to know how to hide Tab Bar in specific screens INSIDE Stack Navigators
This is my Tab Navigator:
<Tab.Navigator
initialRouteName='Passports'
screenOptions={{
"tabBarLabelStyle": {
"fontSize": 12
},
"tabBarStyle": {
"backgroundColor": "white"
}
}}
>
<Tab.Screen
name='EquipmentStack'
component={EquipmentStack}
options={{
tabBarLabel:'Equipment'
}}
/>
<Tab.Screen
name='ObjectsStack'
component={ObjectsStack}
options={{ tabBarLabel:'Objects'}}
/>
<Tab.Screen
name='DocumentationStack'
component={DocumentationStack}
options={{ tabBarLabel:'Documentation'}}
/>
</Tab.Navigator>
And my First Stack navigator:
<Stack.Screen
name='Equipment'
component={Equipment}
options={{headerShown: false}}
/>
<Stack.Screen
name='Equipment Details'
component={EquipmentDetails}
options={{title:'Equipment Details'}}/>
<Stack.Screen
name='Equipment Details Update'
component={EquipmentDetailsUpdate}
options={{title:'Equipment Details Update'}}/>
<Stack.Screen
name='Equipment Details Update Zander'
component={EquipmentDetailsUpdateZander}
options={{title:'Equipment Details Update Zander'}}/>
</Stack.Navigator>
I want to hide Tab Bar only in 3 screens out of 4 in my stack:
"Equipment" 1 Screen : Tab Bar
"Equipment Details" 2 Screen : No Tab Bar
"Equipment Details Update" 3 Screen : No Tab Bar
"Equipment Details Update Zander" 4 Screen : No Tab Bar
Also My 2 other Stack Navigator are same, and i also want to do same thing to them :
<Stack.Navigator>
<Stack.Screen
name='Objects'
component={Objects}
options={{headerShown: false}}/>
<Stack.Screen
name='Objects Details'
component={ObjectsDetails}/>
<Stack.Screen
name='Objects Details Update'
component={ObjectsDetailsUpdate}/>
</Stack.Navigator>
<Stack.Navigator>
<Stack.Screen
name='Documentation'
component={Documentation}
options={{headerShown: false}}/>
<Stack.Screen
name='Documentation Details'
component={DocumentationDetails}/>
<Stack.Screen
name='Documentation Details Update'
component={DocumentationDetailsUpdate}/>
</Stack.Navigator>
As per my understanding what you are trying to achieve can be done as below. can you check
export const TabNavigation = () => {
return (
<Tab.Navigator
initialRouteName="Passports"
screenOptions={{
tabBarLabelStyle: {
fontSize: 12,
},
tabBarStyle: {
backgroundColor: 'white',
},
}}>
<Tab.Screen
name="Equipment"
component={Equipment}
options={{
tabBarLabel: 'Equipment',
headerShown: false,
}}
/>
<Tab.Screen
name="Objects"
component={Objects}
options={{
tabBarLabel: 'Objects',
headerShown: false,
}}
/>
<Tab.Screen
name="Documentation"
component={Documentation}
options={{
tabBarLabel: 'Equipment',
headerShown: false,
}}
/>
</Tab.Navigator>
);
};
export const StackNavigation = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="TabNavigation"
component={TabNavigation}
options={{headerShown: false}}
/>
<Stack.Screen
name="Equipment Details"
component={EquipmentDetails}
options={{title: 'Equipment Details'}}
/>
<Stack.Screen
name="Equipment Details Update"
component={EquipmentDetailsUpdate}
options={{title: 'Equipment Details Update'}}
/>
<Stack.Screen
name="Equipment Details Update Zander"
component={EquipmentDetailsUpdateZander}
options={{title: 'Equipment Details Update Zander'}}
/>
<Stack.Screen name="Objects Details" component={ObjectsDetails} />
<Stack.Screen
name="Objects Details Update"
component={ObjectsDetailsUpdate}
/>
<Stack.Screen
name="Documentation Details"
component={DocumentationDetails}
/>
<Stack.Screen
name="Documentation Details Update"
component={DocumentationDetailsUpdate}
/>
</Stack.Navigator>
);
};
For the current version (v6.x) you can use: tabBarStyle option passing display as none:
tabBarStyle: {
display: 'none'
}
and if you wish to show the tabBar again, just the the display to flex (default value).
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} />
...
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}}
/>
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");