React native navigate to specific screen of bottom tabs from inner screen - javascript

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

Navigate to first screen in bottom tab navigation in reat native

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

Hide Tab Bar from Stack Navigator Without tabBarVisible option

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).

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} />
...

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}}
/>

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");

Categories