Hiding tab bar with nested navigation - react-native

I used nested navigation for my problem. Currently, however, the tab bar is only displayed on pages listed in TabNavigator. Is it possible to display on other pages as well? It is possible to display the tab bar also on screen5. I also have screen6 where I don't want to display the tab bar, so I solve it this way.
App.js
<NavigationContainer
ref={ref}
>
<Navigation />
</NavigationContainer>
Tab.js
const Tab = createBottomTabNavigator();
const Tabs = (props) => {
return(
<Tab.Navigator>
<Tab.Screen name="Screen1" component={Screen1} />
<Tab.Screen name="Screen2" component={Screen2} />
<Tab.Screen name="Screen3" component={Screen3} />
<Tab.Screen name="Screen4" component={Screen4} />
</Tab.Navigator>
);
}
<Stack.Navigator>
<Stack.Group screenOptions={{ headerShown: false }}>
<Stack.Screen name="Screen1" component={Tabs}/>
<Stack.Screen name="Screen2" component={Screen2}/>
<Stack.Screen name="Screen3" component={Screen3}/>
<Stack.Screen name="Screen4" component={Screen4}/>
<Stack.Screen name="Screen5" component={Screen5}/>
<Stack.Screen name="Screen6" component={Screen6}/>
</Stack.Group>
</Stack.Navigator>
Screen4
const Screen4 = ({navigation}) => {
return (
<SafeAreaView>
<Pressable onPress={() => {navigation.navigate('Screen5')}}>
<Text>Screen5</Text>
</Pressable>
</SafeAreaView>
);
}
export default Screen4;

I think you are aksing about this.
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const HomeNavigator = () => {
<Stack.Navigator>
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
</Stack.Navigator>;
};
const ProfileNavigator = () => {
<Stack.Navigator>
<Stack.Screen name="Screen3" component={Screen3} />
<Stack.Screen name="Screen3" component={Screen3} />
</Stack.Navigator>;
};
const Tabs = (props) => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeNavigator} />
<Tab.Screen name="Profile" component={ProfileNavigator} />
<Tab.Screen name="YourOtherNavigator" component={YourOtherNavigator} />
</Tab.Navigator>
);
};

Related

What's the correct approach for having a list/detail view with React Native Navigation Bottom Tab?

I have something like:
const Tab = createBottomTabNavigator<DefaultTabbedParamList>();
const DefaultTabbedNavigation = () => {
return (
<>
<Tab.Navigator initialRouteName='Home' screenOptions={{
unmountOnBlur: true,
}}>
<Tab.Screen name="Home" component={HomeScreen} options={{
...defaultOptions,
tabBarIcon: ({ color, size, focused }) => (
<Icon as={Ionicons} name={`home${focused ? `` : `-outline`}`} size={size} color={color} />
)
}} />
...
</Tab.Navigator>
</>
);
}
When a user clicks to a detail view from Home (or any other tab), I want to load a detail view with the currently selected tab remaining.
What's the correct approach to handle this?
One idea I had was to have a StackNavigator in HomeScreen that includes a Detail screen. But it seems repetitive to do for every screen, no?
You can do something like this :-
<Tab.Navigator initialRouteName='Home' screenOptions={{
unmountOnBlur: true,
}}>
<Tab.Screen name="Home" component={HomeScreen} options={{
...defaultOptions,
tabBarIcon: ({ color, size, focused }) => (
<Icon as={Ionicons} name={`home${focused ? `` : `-outline`}`} size={size} color={color} />
)
}} />
// Something like this.
<Tab.Screen name="Home2" children={({route}) => <route?.name />} ...{otherProperties}/>
...
</Tab.Navigator>
Note:- To use this kind of approch your routeName and componentName should be same.
How about this?
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name={"Tabs"} component={Tabs} />
<Stack.Screen name={"Detail"} component={DetailScreen} />
</Stack.Navigator>
</NavigationContainer>
);
Yeah, you'll likely want to define a StackNavigator for each tab. It's a bit repetitive, but that's been a theme of my experience with RN.
You can do something like:
const HomeStackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
const OtherStackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Other" component={OtherScreen} />
<Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};
const DefaultTabbedNavigation = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStackNavigator} />
<Tab.Screen name="Other" component={OtherStackNavigator} />
</Tab.Navigator>
)
}

Use DrawerNavigator and StackNavigator together [duplicate]

This is my tab navigator:
<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute">
<Tab.Screen
name="Science"
component={Science}
options={{
tabBarLabel: 'Science',
tabBarIcon: ({color, size}) => (
<Image source={require('../../assets/images/science-tab.png')} />
),
}}
/>
<Tab.Screen name="Dashboard" component={Dashboard} />
</Tab.Navigator>
This is DrawerNavigator:
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
And this is my root navigator: Below Bottomnavigation is the tab navigator.
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="BottomNavigation"
component={BottomNavigation}
options={{title: this.createTitle()}}
/>
</Stack.Navigator>
</NavigationContainer>
I recommend you to make your TabNavigator a screen of DrawerNavigator
You can do something like this:
function TabNavigator({navigation}) {
return (
<Tab.Navigator>
// Your tab screens
</Tab.Navigator>
);
}
function DrawerNavigator() {
return (
<Drawer.Navigator>
<Drawer.Screen name="TabNavigator" component={TabNavigator} />
</Drawer.Navigator>
);
}
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="DrawerNavigator" component={DrawerNavigator} />
</Stack.Navigator>
</NavigationContainer>
);
};
If you want to open your drawer, you can call navigation.openDrawer() in your TabNavigator.
Update to address label issue
You can create a drawer content component to override the default behavior of adding the DrawerNavigator screens' labels as the content of the drawer.
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItem
label="Home"
onPress={() => props.navigation.navigate('Home')}
/>
// ...
</DrawerContentScrollView>
);
}
Then you need to change the DrawerNavigator to this:
function DrawerNavigator({route}) {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="TabNavigator" component={TabNavigator} />
<Drawer.Screen name="Home" component={Home} />
</Drawer.Navigator>
);
}
So you can add new screens to your DrawerNavigator and navigate to them using the DrawerItem onPress function.
Of course make sure to import DrawerContentScrollView, DrawerItemList and DrawerItem from #react-navigation/drawer.
For more info look at: https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent.

Remove header on createMaterialTopTabNavigator

how do I remove the header on createMaterialTopTabNavigator()?
I've looked everywhere, including the documentation. So far I've only seen examples
which are relevant to the previous version.
Here's my code:
<NavigationContainer headerMode='none'>
<Tab.Navigator options={{ headerShown: false }}>
<Tab.Screen name="Home" component={Home}/>
<Tab.Screen name="Settings" component={Settings}/>
</Tab.Navigator>
</NavigationContainer>
EDITED
HeaderShown option is for screens, not navigator. So replace by this
const IndexStack = createStackNavigator()
const index = () => {
return(
<IndexStack.Navigator initialRouteName="tabNav">
<IndexStack.Screen name="tabNav" options={{ headerShown: false }} component={tabNav} />
</IndexStack.Navigator>
)
}
const tabNav = () => {
return(
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
</NavigationContainer>
)
}

How to use drawer navigator and tab navigator simultaneously?

This is my tab navigator:
<Tab.Navigator initialRouteName="Home" backBehavior="initialRoute">
<Tab.Screen
name="Science"
component={Science}
options={{
tabBarLabel: 'Science',
tabBarIcon: ({color, size}) => (
<Image source={require('../../assets/images/science-tab.png')} />
),
}}
/>
<Tab.Screen name="Dashboard" component={Dashboard} />
</Tab.Navigator>
This is DrawerNavigator:
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
And this is my root navigator: Below Bottomnavigation is the tab navigator.
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="BottomNavigation"
component={BottomNavigation}
options={{title: this.createTitle()}}
/>
</Stack.Navigator>
</NavigationContainer>
I recommend you to make your TabNavigator a screen of DrawerNavigator
You can do something like this:
function TabNavigator({navigation}) {
return (
<Tab.Navigator>
// Your tab screens
</Tab.Navigator>
);
}
function DrawerNavigator() {
return (
<Drawer.Navigator>
<Drawer.Screen name="TabNavigator" component={TabNavigator} />
</Drawer.Navigator>
);
}
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="DrawerNavigator" component={DrawerNavigator} />
</Stack.Navigator>
</NavigationContainer>
);
};
If you want to open your drawer, you can call navigation.openDrawer() in your TabNavigator.
Update to address label issue
You can create a drawer content component to override the default behavior of adding the DrawerNavigator screens' labels as the content of the drawer.
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItem
label="Home"
onPress={() => props.navigation.navigate('Home')}
/>
// ...
</DrawerContentScrollView>
);
}
Then you need to change the DrawerNavigator to this:
function DrawerNavigator({route}) {
return (
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="TabNavigator" component={TabNavigator} />
<Drawer.Screen name="Home" component={Home} />
</Drawer.Navigator>
);
}
So you can add new screens to your DrawerNavigator and navigate to them using the DrawerItem onPress function.
Of course make sure to import DrawerContentScrollView, DrawerItemList and DrawerItem from #react-navigation/drawer.
For more info look at: https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent.

ReactNative- Tab Navigator Inside Stack Navigator

Need to Show Tabs For Home Module after Signup Module
using React-navigation
Working Code with Only Stack Screens
const Stack = createStackNavigator();
const Bottom = createBottomTabNavigator();
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Welcome" headerMode='none' >
<Stack.Screen name="Welcome" component={WelcomeScreen}
options={{
title: '',
headerBackTitleVisible: false,
headerBackTitle: '',
headerShown: true
}}
/>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Signup" component={SignupScreen} />
<Stack.Screen name="ResetPassword" component={ResetPasswordScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
Need to show Tab from SigninScreen Button
Tab 1: Dashboard:
Tab 2: Profile
Tried Code:
<Bottom.Navigator initialRouteName="Dashboard" >
<Bottom.Screen name="Dashboard" component={TabDashboard} />
<Bottom.Screen name="Profile" component={TabProfile} />
</Bottom.Navigator>
Now I need to combine these two block of codes so I can navigate to Tabs
Tab screen will have further navigations
The idea would be to wrap the tabs screen inside component and add it to the stack conditionally.
const HomeScreen = () =>{
return (
<Bottom.Navigator initialRouteName="Dashboard" >
<Bottom.Screen name="Dashboard" component={TabDashboard} />
<Bottom.Screen name="Profile" component={TabProfile} />
</Bottom.Navigator>
);
}
Your stack should change as below
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Welcome" headerMode='none' >
{
this.state.isSignedIn ? (
<>
<Stack.Screen name="Welcome" component={WelcomeScreen} />
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Signup" component={SignupScreen} />
<Stack.Screen name="ResetPassword" component={ResetPasswordScreen} />
</>
) : (
<>
<Stack.Screen name="ResetPassword" component={HomeScreen} />
</>
)
}
</Stack.Navigator>
</NavigationContainer>
);
}
IsSignedIn can be the state variable or a variable that you store the logged in status
You can refer the authentication flows
https://reactnavigation.org/docs/auth-flow