I want user to set preferences first and then be able to navigate the app.
I have nested stack inside tabnvaigator is there any way to disable other tabs and prompt user to set preferences first
tabnavigator code
const tab=createBottomTabNavigator()
return (
<tab.Navigator
initialRouteName="profile"
tabBarOptions={{
activeTintColor: '#0000A0',
inactiveTintColor: 'gray',
keyboardHidesTabBar:true
}}>
<tab.Screen name="personal" component={personalNav}
options={{
tabBarIcon:({color,size})=>{ return <Icon name='person-outline' size={size} color={color} />;}
}}/>
<tab.Screen name="general" component={genRecomNav}
options={{
tabBarIcon:({color,size})=>{ return <Icon name='explore' size={size} color={color} />;}
}}/>
<tab.Screen name="profile" component={profileNav}
options={{
tabBarIcon:({color,size})=>{ return <Icon name='fingerprint' size={size} color={color} />;}
}}/>
</tab.Navigator>
)
stacknavigator code
const profileNav = createStackNavigator();
return (
<profileNav.Navigator headerMode="none" screenOptions={
{
gestureEnabled:false,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
transitionSpec:{
open:TransitionSpecs.FadeInFromBottomAndroidSpec ,
close:TransitionSpecs.TransitionIOSSpec,
}
}} >
<profileNav.Screen name="profileMain" component={profileMain}/>
<profileNav.Screen name="preference" component={preference}/>
<profileNav.Screen name="preferenceApp" component={preferenceApp}/>
<profileNav.Screen name="preferenceTopic" component={preferenceTopic}/>
</profileNav.Navigator>
)
Related
I have a very big problem I am using two navigations in one app the first one is the drawer navigator this is how I use the drawer navigator:
<Drawer.Navigator
screenOptions={{
drawerStyle: {
backgroundColor: 'white',
},
}}
drawerContent={props => <CustomSidebarMenu {...props} />}
drawerContentOptions={{
activeTintColor: '#e91e63',
activeBackgroundColor: 'red',
itemStyle: {marginVertical: 20},
}}>
<Drawer.Screen
options={{
headerShown: true,
headerTitle: () => (
<Image
style={{height: 150, width: 100, resizeMode: 'contain'}}
source={require('../assets/images/referans2.png')}
/>
), // Title to appear in the header
headerRight: ({navigation, scene}) => (
// Custom component to appear on the right side of the header
<View style={{flexDirection: 'row'}}>
<Pressable>
<Ionicons
name="notifications-outline"
size={30}
color={'black'}
/>
</Pressable>
<Pressable style={{marginHorizontal: 10}}>
<Ionicons
name="chatbubbles-outline"
size={30}
color={'black'}
/>
</Pressable>
</View>
),
}}
name="Ana Sayfa"
component={Main}
/>
<Drawer.Screen
options={{headerShown: true}}
name="Şiparişlerim"
component={MyOrders}
/>
<Drawer.Screen name="Adreslerim" component={AddressesScreen} />
<Drawer.Screen name="Üyelik Bilgilerim" component={AccountInfoScreen} />
</Drawer.Navigator>
[
and this gives me the following output:](https://i.stack.imgur.com/73o8f.png)
In the main function you see here, the bottomtabnavigator, which I use in the whole app, returns.:
const Main = () => {
return (
<Tab.Navigator screenOptions={screenOptions}>
<Tab.Screen
component={HomeStack}
name="Ana Sayfa"
options={{
tabBarIcon: ({focused, color}) => (
<Ionicons name="home-outline" size={28} color={color} />
),
}}
/>
<Tab.Screen
component={CategoriesStack}
name="Kategoriler"
options={{
tabBarIcon: ({focused, color}) => (
<Ionicons name="grid-outline" size={28} color={color} />
),
}}
/>
<Tab.Screen
component={CartStack}
name="Sepet"
options={{
tabBarIcon: ({focused, color}) => (
<Ionicons name="cart-outline" size={28} color={color} />
),
}}
/>
<Tab.Screen
component={DiscoverStack}
name="Keşfet"
options={{
tabBarIcon: ({focused, color}) => (
<Ionicons name="compass-outline" size={28} color={color} />
),
}}
/>
<Tab.Screen
component={ProfileStack}
name="Profilim"
options={{
headerShown: true,
tabBarIcon: ({focused, color}) => (
<Ionicons name="person-circle-outline" size={28} color={color} />
),
}}
/>
</Tab.Navigator>
);
};
What I want is this; Turning off the header of the drawer in the profile stack in the bottom tab navigator, but I can't do it
but it still didn't close the header of the drawer navigation. Even if I set the headershown of the drawer to false, the header on all screens closes, I'm just not on the screen I want
As far as I understand, there are 3 nested navigator.
Drawer
|---------> BottomTab
| |---------> ProfileStack
|... |...
If you want to hide or show only specific screen you can use navigation.setOptions()
For example,we have a Profile screen in ProfileStack and get navigation with screen props or useNavigation()
If you want to hide ProfileStack header in Profile:
React.useLayoutEffect(() => {
navigation.setOptions({ headerShown:false })
})
If you want to hide BottomTab header in Profile:
React.useLayoutEffect(() => {
navigation.getParent().setOptions({ headerShown:false })
})
If you want to hide Drawer header in Profile:
React.useLayoutEffect(() => {
navigation.getParent().getParent().setOptions({ headerShown:false })
})
You can use setOptions with headerShown:true when the drawer screenOptions headerShown:false
react-navigation getParent() and setOptions() docs
I am having trouble aligning the headerRight consistently across Screens.
I have a StackNavigator with a nested TabNavigator:
const Tabs = ({navigation}) => {
return (
<Tab.Navigator
screenOptions={{
headerRight: () => (
<View style={{backgroundColor: 'red'}}>
<IconButton icon="account" onPress={navigation.navigate('Profile')}/>
</View>
),
}}>
<Tab.Screen name="Home" component={Screens.Home}/>
<Tab.Screen ... />
</Tab.Navigator>
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
{!auth.user ? (
<Stack.Screen name="Login" component={Screens.Login} />
) : (
<>
<Stack.Screen name="Tabs" component={Tabs} />
<Stack.Screen
name="Profile"
component={Screens.Profile}
options={({navigation}) => ({
headerShown: true,
headerRight: () => (
<View style={{backgroundColor: 'red'}}>
<IconButton icon="close" onPress={navigation.goBack()}/>
</View>
),
})}
/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
Here are 2 screenshots showing the header buttons, the first is the <Stack.Screen name="Profile"> and the second is the <Tab.Screen name="Home">:
As you navigate between the 2 screens the top right button jumps right to left because of the spacing to the right of the button on the Profile Screen.
I have tried moving items around (screens, nesting, options vs screenOptions...), and tried other options and screenOptions but have not had any luck.
It seems like a StackScreen has padding whereas the TabScreen does not.
Any ideas here?
I have created a Drawer Navigator with some screens that I want the user to be able to see and access, however, I also want to be able to navigate to a screen in which the user can only access if they press a button to go to. So that screen should not be accessible through the drawer screen. The problem is that I have no idea how to do that. I have searched everywhere and still didn't fidn a way to do it.
AppStack.js:
const Drawer = createDrawerNavigator();
const AppStack = () => {
return (
<Drawer.Navigator
drawerContent={props => <CustomDrawer {...props}/>}
screenOptions={{headerShown: false,drawerActiveBackgroundColor: '#000c1a', drawerActiveTintColor: 'white', drawerInactiveTintColor: 'white', drawerLabelStyle: {marginLeft: -25, fontSize: 17}}}
>
<Drawer.Screen name="Home" component={HomeScreen} options={{
drawerIcon: ({color}) => (
<Ionicons name="home-outline" size={24} color={color} />
)
}}/>
<Drawer.Screen name="Inventory" component={ListingScreen} options={{
drawerIcon: ({color}) => (
<Ionicons name="car-sport-outline" size={24} color={color} />
)
}}/>
<Drawer.Screen name="Iventory" component={ListingScreen} options={{
drawerIcon: ({color}) => (
<Ionicons name="car-sport-outline" size={24} color={color} />
)
}}/>
<Drawer.Screen name="Inventy" component={ListingScreen} options={{
drawerIcon: ({color}) => (
<Ionicons name="car-sport-outline" size={24} color={color} />
)
}}/>
<Drawer.Screen name="Invent" component={ListingScreen} options={{
drawerIcon: ({color}) => (
<Ionicons name="car-sport-outline" size={24} color={color} />
)
}}/>
</Drawer.Navigator>
)
}
export default AppStack
App.js
export default function App() {
const Stack = createNativeStackNavigator()
return (
<View style={styles.container}>
<NavigationContainer theme={MyTheme}>
<AppStack/>
</NavigationContainer>
</View>
);
}
Is there any way I could do this?
To make it easier to understand, I have a list of cars that whenever a user press on the picture of the car, it will go to a vehicle details screen with the info of the car the user clicked.
I'd really appreciate any help.
I'm trying to get the Recipes header in the following image to display above the tab navigator (home and settings in the image below). Currently I have the tab navigator in a stack navigator. On the stack navigator I defined a title and headerTitle but neither are displaying. How can I get the header above? Thanks!
This is what it looks like currently:
I want to achieve something similar to this:
This is my stack nav code:
<NavigationContainer>
<Tab.Navigator
shifting={false}
labeled={false}
initialRouteName="Home"
activeColor="#32CA81"
barStyle={styles.navContainer}
screenOptions={{
headerShown: false,
}}
tabBarOptions={{
activeTintColor: '#e91e63',
}}
>
<Tab.Screen
name="Camera"
component={Camera}
options={{
tabBarLabel: "Camera",
tabBarIcon: ({ color }) => (
<MaterialIcons name="camera-alt" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Home"
component={Home}
options={{
title: "Recipes",
headerTitle: "Recipes",
tabBarLabel: "Recipes",
tabBarIcon: ({ color }) => (
<MaterialIcons name="restaurant-menu" color={color} size={26} />
),
}}
/>
<Tab.Screen
name='Saved'
component={SavedScreen}
options={{
shifting: true,
tabBarLabel: 'Saved',
tabBarIcon: ({color}) => (
<MaterialIcons name='favorite' color={color} size={26} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
This is my tab nav code:
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Recipes} />
<Tab.Screen name="Settings" component={Recipes} />
</Tab.Navigator>
);
I ended up wrapping the component with the tabs, with a stack navigator. I put the text component and tabs on the same stack screen.
Hello i want to be able to go to a new page without adding them to <Tab.Screen by another meaning i want to use this.props.navigation.navigate so in order for me to do that i need to add the new screen but how i can add a new screen without adding them to <tab.screen
this is a small sample of my code
const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();
const App = ({navigation}) => {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="Home" shifting={true}>
<Tab.Screen
name="Feed"
component={mainPage}
options={{
tabBarLabel: 'Home',
tabBarColor: '#29a8ab',
tabBarIcon: ({color}) => (
<Icon name="home" color={color} size={26} />
),
}}
tabBarColor={'#FF0000'}
/>
<Tab.Screen
name="Notifications"
component={cartPage}
options={{
tabBarLabel: 'Shop',
tabBarColor: '#ff8b94',
tabBarIcon: ({color}) => (
<Icon name="cart" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
};
export default createApp;