I have a createBottomTabNavigator() in a screen of my createStackNavigator.
Basically i have my App.js like this :
const RootStack = createStackNavigator(
{
Login: Login,
Register: Register,
Principal: {
screen: Principal,
navigationOptions: {
headerShown: false,
},
},
},
{
initialRouteName: "Login"
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
And in my "Principal.js" i'm creating a createBottomTabNavigator()
const Tab = createBottomTabNavigator();
class ConnectNavigator extends React.Component {
(....)
render() {
return (
<NavigationContainer>
<Tab.Navigator (....)>
<Tab.Screen name="Home" component={CheckPage} />
<Tab.Screen name="Settings" component={SettingPage} />
</Tab.Navigator>
</NavigationContainer>
);
}
}
Basically, in my SettingPage, i want to go back in my "Login" screen. But because i have two Navigator, i can't. I know, i'm not very clear, but my question is : "Can i go in my Login Screen when i'm in a Tab.Screen ?"
I have already tried to do this.props.navigation.navigate('Login') in my Settings screen but i have this error
The action 'NAVIGATE' with payload {"name":"Login","params":{"screen":"Login"}} was not handled by any navigator.
Do you have a screen named 'Login'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
I'm not sure if you tried what's written in the documentation mentioned in the error, but you could try something like this:
navigation.navigate('Home', { screen: 'Login' });
Edit:
You could re-structure it a bit:
const AppNavigation = () => <NavigationContainer>
<Stack.Navigator initialRouteName={"Login"}>
<Stack.Screen
name={"Login"}
options={{
headerStyle: styles.loginHeader,
headerShown: false,
}}
component={LaunchScreen}
/>
<Stack.Screen
options={{ headerShown: false }}
name={"Principal"}
component={BottomTabNavigation}
/>
</NavigationContainer>
const Tab = createBottomTabNavigator()
const BottomTabNavigation = () => {
return (
<Tab.Navigator
initialRouteName={"Home"}
>
<Tab.Screen name="Home" component={CheckPage} />
<Tab.Screen name="Settings" component={SettingPage} />
</Tab.Navigator>
)
}
Related
Using React-Navigation in my app, I want the initialRoute to be the "Home" component with the BottomTabNavigator shown. But I do not want Home to be one of the tabs. Adding initialRouteName="Home" shows Home as the initial route but does not show the tabs. Without initialRoute I get the tabs but not the Home Screen as the initial.
I have a nested React Navigation set up like this:
const MyTabs = () =>{
return (
<Tab.Navigator>
<Tab.Screen name="About" component={AboutStack} />
<Tab.Screen name="Setting" component={SettingStack} />
</Tab.Navigator>
);
}
const MyStack = () => {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Tabs" component={MyTabs} />
<Stack.Screen name="Home" component={HomeStack} />
</Stack.Navigator>
);
}
This seems like it should be relatively simple to implement, but I've searched far and wide for another similar question and I've tried a number of different nesting setups to no avail.
Running: "#react-navigation/stack": "^6.0.7", or "latest"
Here is a snack of the full test code: https://snack.expo.dev/#dezpo/nestednavigator_homepage_notintab
Any help greatly appreciated.
You can set the initial route in the MyStack navigator to the Home screen with the initialRouteName prop:
const MyStack = () => {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Tabs" component={MyTabs} />
<Stack.Screen name="Home" component={HomeStack} />
</Stack.Navigator>
);
}
Then, in the HomeStack component, you can navigate to the Tabs screen within the Home component:
const HomeStack = ({ navigation }) => {
return (
<View>
<Text>Home Screen</Text>
<Button
title="Go to Tabs"
onPress={() => navigation.navigate("Tabs")}
/>
</View>
);
};
This way, the Home component will be the initial route and when the user clicks the "Go to Tabs" button, the Tabs screen with the Tab.Navigator will be displayed.
Actually I got this sorted... couldn't have been easier
tabBarItemStyle: { display: "none" }
🤦♂️
so my final navigators looked like this with "Home" as one of my BottomTabs
const MyTabs = () =>{
return (
<Tab.Navigator >
<Tab.Screen name="Home" component={HomeStack}
options={{
tabBarItemStyle: { display: "none" },
}}/>
<Tab.Screen name="About" component={AboutStack} />
<Tab.Screen name="Setting" component={SettingStack} />
</Tab.Navigator>
);
}
const MyStack = () => {
return (
<Stack.Navigator initialRouteName="Home"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="Tabs" component={MyTabs} />
</Stack.Navigator>
);
}
Updated Snack
Seems like there is probably a better solution out there but this does the trick for now.
I have a simple React-Native app setup in which I use Context to share some data throughout components. I have some code setup for functional components but I would like to convert it to Class component code. Anyone who could help me further?
All that needs to be changed is the way context in de screens and state is handled.
UserContext.js (this one doesn't need changing just putting it here for context.)
import { createContext } from 'react'
export const UserContext = createContext(null);
AccountScreen.js
export default function AccountScreen() {
const { User, setUser } = useContext(UserContext);
return (
<View>
<Text>ID: {User}</Text>
</View>
)
}
App.js
export default function App() {
const [User, setUser] = useState("yessir");
return (
<UserContext.Provider value={{User, setUser}}>
<PaperProvider theme={theme}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Register" component={RegisterScreen} options={{ headerShown: false}}/>
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false}}/>
<Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
</PaperProvider>
</UserContext.Provider>
);
}
Home function for nav:
function Home(){
return(
<Tab.Navigator
barStyle={{ backgroundColor: '#191919'}}
shifting={true}>
<Tab.Screen name="Feed" component={HomeScreen}
options={{
tabBarLabel: 'Feed',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
)
}}/>
<Tab.Screen name="Explore" component={ExploreScreen}
options={{
tabBarLabel: 'Explore',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="magnify" color={color} size={26} />
)
}}/>
<Tab.Screen name="Account" component={AccountScreen}
options={{
tabBarLabel: 'Account',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="account" color={color} size={26} />
)
}}/>
</Tab.Navigator>
);
}
A simple way is to write a higher-order component (HOC) with can provide user context props to any component.
import * as React from 'react';
import { createContext } from "react";
export const UserContext = createContext(null);
const withUserContext = (Component) => (props)=> {
return (
<UserContext.Consumer>
{(userContext) => <Component {...props} userContext={userContext}/>
}
</UserContext.Consumer>
);
};
export default withUserContext;
AccountScreen.js
import React from "react";
import withUserContext from "./withUserContext";
class AccountScreen extends React.Component {
render() {
const { User, setUser } = this.props.userContext;
return (
<View>
<Text>ID: {User}</Text>
</View>
);
}
}
export default withUserContext(AccountScreen);
I want to use BottomNavigation to navigation between screens actually its working fine with BottomNavigation.SceneMap({...})
but the BottomNavigation its being showing in every screens, i only want to show once the user is logged. after click on login button
import React from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import userReducer from './src/reducers/user'
import { NavigationContainer } from '#react-navigation/native'
import { BottomNavigation, Text } from 'react-native-paper'
import { createStackNavigator } from '#react-navigation/stack'
import { theme } from './src/core/theme'
import {
StartScreen,
Dashboard,
GroupScreen,
InviteScreen,
CreateGroup,
} from './src/screens'
const Stack = createStackNavigator()
const store = createStore(userReducer)
export default function App() {
const [index, setIndex] = React.useState(0)
const [routes] = React.useState([
{ key: 'music', title: 'Music', icon: 'queue-music' },
{ key: 'albums', title: 'Albums', icon: 'album' },
])
const one = () => (
<NavigationContainer>
<Stack.Navigator
initialRouteName="StartScreen"
>
<Stack.Screen name="StartScreen" component={StartScreen} />
<Stack.Screen name="Dashboard" component={Dashboard} />
</Stack.Navigator>
</NavigationContainer>
)
const two = () => (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="InviteScreen" component={InviteScreen} />
</Stack.Navigator>
</NavigationContainer>
)
const renderScene = BottomNavigation.SceneMap({
music: one,
albums: two,
})
return (
<Provider store={store} theme={theme}>
<BottomNavigation
navigationState={{ index, routes }}
onIndexChange={setIndex}
renderScene={renderScene}
/>
</Provider>
)
}
EDIT by answers:
i did this when i pressed the button login i need to redirect to dashboard but dashboard is in mytabs
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Dashboard" component={Dashboard} />
</Tab.Navigator>
)
}
does not render nothing, i just to copy any example from here https://reactnavigation.org/docs/bottom-tab-navigator/ any of those render in my local, i am using EXPO
for example this
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
function SettingsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
the wrong is display:none
You need to put your BottomNavigation in another stack that has loginScreen side by side.
Try using createBottomTabNavigator
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
<NavigationContainer>
<Stack.Navigator initialRouteName="loginScreen">
<Stack.Screen name="loginScreen" component={LoginScreen} />
<Stack.Screen name="main" component={MyTabs} />
</Stack.Navigator>
</NavigationContainer>
Take what you already have with MyTabs() and create a LoginScreen and then do the following. You will need to detect whether the user is present. If there is a user, then show the main screen, if not show the login screen.
<>
<Stack.Navigator screenOptions={{ headerShown: false }}>
{user ? (
<Stack.Screen name="Main" component={MainStack} />
) : (
<Stack.Screen name="Login" component={LoginStack} />
)}
</Stack.Navigator>
</>
The best way is to do like this:
<NavigationContainer>
{user !== null ? <RootNavigator /> : <AuthNavigator />}
</NavigationContainer>
The user is a useState.
The NavigationContainer has 2 options. If the user is logged it shows the RootNAvigator with the bottomNavigation, if not it shows the authentication flow.
I'm relatively new to React Native and am struggling with screens. I've gone through the nested navigation documentation (https://reactnavigation.org/docs/nesting-navigators/) which helped me setup the initial nav setup i have, but im having some issues.
I'm attempting to setup the app so it has the initial screen as a "Select User" which has no tab navigation. After selecting the user, you are redirected to a another screen which has tab navigation. I currently have it working however I am unable to access any route/props/params after the initial screen.
I've had to manually import navigation with import { useNavigation } from "#react-navigation/native"; and even though I'm providing params in the Navigation.push, trying to access {route} in my screens states that route is undefined.
My setup of the screens looks similar to below:
const Tab = createBottomTabNavigator();
const WelcomeStack = createStackNavigator();
const HomeStack = createStackNavigator();
const SettingsStack = createStackNavigator();
const Stack = createStackNavigator();
const WelcomeStackScreen = () => (
<WelcomeStack.Navigator>
<WelcomeStack.Screen
name="Welcome"
component={WelcomeScreen}
options={{ headerShown: false }}
/>
<WelcomeStack.Screen
name="SignUp"
component={SignUpScreen}
options={{ headerShown: false }}
/>
</WelcomeStack.Navigator>
);
const HomeStackScreen = () => {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={HomeScreen} />
<HomeStack.Screen
name="Search"
component={SearchResultScreen}
options={({ navigation }) => ({
headerLeft: () => (
<Ionicons
name={"arrow-back"}
size={30}
color={colours.text}
style={{ paddingLeft: 15 }}
onPress={() => {
navigation.goBack();
}}
/>
),
})}
/>
<HomeStack.Screen
name="Select"
component={SelectScreen}
options={({ navigation, route }) => ({
title: route.params.name,
headerLeft: () => (
<Ionicons
name={"arrow-back"}
size={30}
color={colours.text}
style={{ paddingLeft: 15 }}
onPress={() => {
navigation.goBack();
}}
/>
),
})}
/>
<HomeStack.Screen name="Read" component={ReaderScreen} />
</HomeStack.Navigator>
);
};
function SettingsScreen() {
return (
<View
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
>
<Text>TBD</Text>
</View>
);
}
const SettingsStackScreen = () => (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
);
const TabNavigator = ({ route }) => (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
switch (route.name) {
case "Home":
iconName = focused ? "home" : "home-outline";
break;
case "Settings":
iconName = focused ? "list" : "list-outline";
break;
default:
break;
}
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: "tomato",
inactiveTintColor: "gray",
}}
>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Settings" component={SettingsScreen}/>
</Tab.Navigator>
);
export default function App() {
return (
<NavigationContainer theme={navThemeOverride}>
<Stack.Navigator>
<Stack.Screen name="Welcome" component={WelcomeStackScreen} />
<Stack.Screen
name="TabNavigator"
component={TabNavigator}
options={{ headerShown: false }}
navigationOptions={{ gesturesEnabled: false }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Below is a snippet from the Welcome screen navigation
navigation.push("TabNavigator", {
screen: "Home",
params: {
userId: userId,
},
});
Your Home screen you're trying to navigate to from your parent-tab-navigator ... is also a StackNavigator ... and you wanna navigate to Select screen I guess ... so there's an extra level needed for your navigation to work...
navigation.navigate('TabNavigator', {
screen: 'Home', // <--- StackNavigator
params: {
screen: 'Select', // <-- nested inside HomeStack
params: {
title: 'Your custom title for Select screen here ...',
},
},
});
Plus +
There's a double definition for route in your Tab navigator
const TabNavigator = ({ route }) => ( //<--- here
<Tab.Navigator
screenOptions={({ route }) => ({ // <- and here
Instead
function TabNavigator() {
return <Tab.Navigator screenOptions={({ route }) => ({})>{/* ...Tabs... */}</Tab.Navigator>;
}
I would like to be able to hide the tabs on a screen using React Native Navigation v5.
I've been reading the documentation but it doesn't seem like they've updated this for v5 and it refers to the < v4 way of doing things.
here is my code:
import Home from './components/Home';
import SettingsScreen from './components/Settings';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
const SettingsStack = createStackNavigator();
const ProfileStack = createStackNavigator();
function SettingsStackScreen() {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
)
}
function ProfileStackScreen() {
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Home" component={Home} />
</ProfileStack.Navigator>
)
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={ProfileStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
Things I have tried:
Accessing the options of the function and hiding that way.
Passing tabBarVisible as a prop to the Screen.
What I am asking for is, what is the correct way of hiding tabs on screens in React Navigation v5.
tabbarvisible-option-is-no-longer-present in react navigation v5 upwards. You can achieve the same behavior by specifying
tabBarStyle: { display: 'none' } in options of the screen you want to hide bottom tab
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={ProfileStackScreen} />
<Tab.Screen options={{tabBarStyle:{display:'none'}}} name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
Let's suppose that you want to hide tabs when you are entering Settings. Just add navigation in your constructor:
function SettingsStackScreen({ navigation }) {
navigation.setOptions({ tabBarVisible: false })
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
)
}
This code should work.
You will have to restructure your navigation by having your Tab Navigator nested in the Stack Navigator. Following the details here hiding-tabbar-in-screens
This way it's still also possible to have a Stack Navigator nested in yourTab Navigator. SettingsStack
With this when the user is on the Setting screen and also the Update detail screen, the tab bar is visible but on the Profile screen, the tab bar is not.
import Home from './components/Home';
import Settings from './components/Settings';
import UpdateDetails from './components/UpdateDetails';
import Profile from './components/Profile';
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
const Stack = createStackNavigator();
const StackSettings = createStackNavigator();
const Tab = createBottomTabNavigator();
function SettingsStack() {
return (
<StackSettings.Navigator>
<StackSettings.Screen name="Settings" component={Settings} />
<StackSettings.Screen name="UpdateDetails" component={UpdateDetails} />
</StackSettings.Navigator>
)
}
function HomeTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={SettingsStack} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeTabs} />
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
</NavigationContainer>
);
}
I had this issue and couldn't find solution even in official docs ( the issues in github resulted to broken links) after some trials and research I found a solution for me To make it happen from the bottom tab navigator component
<Tab.Navigator tabBarOptions={stackOptions} >
<Tab.Screen
name={"market"}
component={MarketNavigator}
options={navigation => ({
// tabBarIcon: ,
tabBarVisible: navigation.route.state.index > 0 ? false : true
})}
/>
</Tab.Navigator>
Hope it helps someone!
2022 Answer - How to hide Bottom Tabs in React Navigation V6
Step 1 - Hiding tab bar in specific screens
Sometimes we may want to hide the tab bar in specific screens in a native stack navigator nested in a tab navigator. Let's say we have 5 screens: Home, Feed, Notifications, Profile and Settings, and your navigation structure looks like this:
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
function App() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}
With this structure, when we navigate to the Profile or Settings screen, the tab bar will still stay visible over those screens.
Step 2 - Solution to Hide Bottom Tabs
Now if we want to show the tab bar only on the Home, Feed and Notifications screens, but not on the Profile and Settings screens, we'll need to change the navigation structure. The way to achieve this is to nest the BottomTabs() as the first route of the stack.
Move your Tabs into a separate function BottomTabs()...
Other routes should be in the main App.js return function...
Make "BottomTabs" the First Route as seen below under the App() return function...
<Stack.Screen name="BottomTabs" component={BottomTabs} />
function BottomTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Notifications" component={Notifications} />
</Tab.Navigator>
);
}
function App() {
return (
<Stack.Navigator>
<Stack.Screen name="BottomTabs" component={BottomTabs} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
After re-organizing the navigation structure, now if you navigate to the Profile or Settings screens, the bottom tab bar won't be visible over the screen anymore.
You have API reference exactly for this.
Read: tabBarVisible
The above answer will help you to remove the bottom tabs from the root navigation.If you want to remove bottom tabs from a specific screen like Home Screen or Settings Screen you need to change navigation options dynamically.
For changing navigation options dynamically you will need the concept of:
React.Context
useNavigationState
Context - will dynamically change the navigationOption value i.e. either to hide the bottom Tabs or not. We can choose MobX or Redux to do the same.
UseNavigationState - will help context to know at which screen the user is.
We need to create Context in a separate .js file so that Home.js and Settings.js can access it in all the other screens.
import * as React from 'react';
import { View, Text } from 'react-native'
import { NavigationContainer, useNavigationState, useRoute } from '#react-navigation/native';
const Tab = createBottomTabNavigator();
const Context = React.createContext();
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator } from '#react-navigation/stack';
import { TouchableOpacity } from 'react-native-gesture-handler';
const SettingsStack = createStackNavigator();
const ProfileStack = createStackNavigator();
function SettingsScreen({ navigation }) {
return (
<View>
<Text>
Setting
</Text>
</View>
);
}
function Home({ navigation }) {
const rout = useNavigationState(state => state);
const { screen, setScreen } = React.useContext(Context);
setScreen(rout.index);
return (
<View>
<TouchableOpacity
onPress={() => {
navigation.navigate("Settings");
}}
>
<Text>
Home
</Text>
</TouchableOpacity>
</View>
);
}
function SettingsStackScreen({ navigation }) {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
</SettingsStack.Navigator>
)
}
function ProfileStackScreen({ navigation }) {
const { screen, setScreen } = React.useContext(Context)
if (screen == 0) {
navigation.setOptions({ tabBarVisible: true })
} else {
navigation.setOptions({ tabBarVisible: false })
}
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Home" component={Home} />
<ProfileStack.Screen name="Settings" component={SettingsScreen} />
</ProfileStack.Navigator>
)
}
function BottomNav({ navigation }) {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={ProfileStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
);
}
export default function App() {
const [screen, setScreen] = React.useState(0);
return (
<Context.Provider value={{ screen, setScreen }}>
<NavigationContainer>
<BottomNav />
</NavigationContainer>
</Context.Provider>
);
}
Here the screen is a flag that checks the index of the navigation and removes the bottom navigation for all the screen stacked in ProfileStackScreen.
Use You Looking for Nested Screen Visible then Tab Bar Options Should be hide than Use this Simple Condition in StackNavigator Funtions.
function HistoryStack({navigation, route}) {
if (route.state.index === 0) {
navigation.setOptions({tabBarVisible: true});
} else {
navigation.setOptions({tabBarVisible: false});
}
return (
<Historys.Navigator initialRouteName={Routes.History}>
<Historys.Screen
name={Routes.History}
component={History}
options={{headerShown: false}}
/>
<Historys.Screen
name={Routes.HistoryDetails}
component={HistoryDetails}
options={{headerShown: false}}
/>
</Historys.Navigator>
);
}
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs"; // version 5.6.1
import { createStackNavigator } from "#react-navigation/stack"; // version 5.6.2
From my inspection navigation.routes.state.index will have a value when you navigation/push to a second screen so I create a function
const shouldTabBarVisible = (navigation) => {
try {
return navigation.route.state.index < 1;
} catch (e) {
return true;
}
};
and call it in BottomTab.Screen options
<BottomTab.Navigator
initialRouteName='Home'
tabBarOptions={{
activeTintColor: "#1F2B64",
showLabel: false,
}}
>
<BottomTab.Screen
name='Home'
component={HomeNavigator}
options={(navigation) => ({
tabBarIcon: ({ color }) => <TabBarIcon name='home' color={color} />,
tabBarVisible: shouldTabBarVisible(navigation),
})}
/>
</BottomTab.Navigator>
just follow as what the documentation suggests: https://reactnavigation.org/docs/hiding-tabbar-in-screens/