I have here this drawer
return (
<NavigationContainer >
<Drawer.Navigator initialRouteName="MetalDetector" screenOptions={{
drawerStyle: {
backgroundColor: '#8e9dad',
width: 220
}
}}>
<Drawer.Screen name="MetalDetector" component={Home} options={{
headerRight: () => (
<Entypo name="sound" size={24} color="black" />
),
drawerLabel: '🛠 MetalDetector'
}} />
<Drawer.Screen name="Settings" component={Settings} options={{drawerLabel: '🛠 Settings'}} />
<Drawer.Screen name="Calibrate" component={Home} options={{drawerLabel: '💡 Calibration'}}/>
<Drawer.Screen name="Feedback" component={Home} options={{drawerLabel: '👨👩👧👦 Feedback'}}/>
<Drawer.Screen name="Website" component={Home} options={{drawerLabel: '🌎 Website'}} />
</Drawer.Navigator>
</NavigationContainer>
);
}
I have added a few drawerScreens, like settings calibration feedback and website, but how can i make it that when someone clicks on website that he gets actually redirected to a website?
Currently I have
<Drawer.Screen name="Website" component={Home} options={{drawerLabel: '🌎 Website'}} />
I tried to add an onclick and onPress function but when removing the component I get an error and with using the component I cant link to anywhere
How can i fix this?
You can do this using drawerContent prop. Check out this Snack to see how it's done.
Related
I'm using React Native BottomTabNavigator.
Example:
<Tab.Navigator tabBarOptions={tabBarOptions} screenOptions={screenOptions}>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Saved" component={Saved} />
<Tab.Screen name="Map" component={Map} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
I want to make the last tab focused instead of the first.
I can't find any option in the documentation.
It should be something like options={{ focused: true }}
Or maybe it's not implemented at all
<Tab.Navigator initialRouteName={"Your Initial Screen Name"}
...>
</Tab.Navigator>
I have aan app scenario where I have a Bottom tabs navigator as my base navigator tab with Home, Products ... as my tabs:
<Tab.Navigator
screenOptions={{
headerShown: true,
}}
tabBarOptions={{
showLabel: false,
activeTintColor: MyColors.COLOR_ACCENT,
}}>
<Tab.Screen
name="Home"
component={HomeStack}
options={{
tabBarIcon: ({color, size}) => (
<Icon name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Product"
component={ProductStack}
options={{
tabBarIcon: ({color, size}) => (
<Icon name="business-center" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Request"
component={MedRequest}
options={{
color: MyColors.COLOR_PRIMARY,
tabBarIcon: ({color, size}) => (
<Icon
name="near-me"
color={color}
size={35}
style={{transform: [{rotateZ: '20deg'}]}}
/>
),
}}
/>
<Tab.Screen
name="Reminder"
component={Reminder}
options={{
tabBarIcon: ({color, size}) => (
<Icon name="alarm" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Location"
component={LocationStack}
options={{
tabBarIcon: ({color, size}) => (
<Icon name="location-on" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
Lets consider my first 2 screens from Bottom Tabs.
The first one is Home. It contains a list of top 5 popular products and a "view all" link which navigates it to the second tab products.
Each individual listed products are supposed to navigate to the product detail page.Since, the productDetail navigation is not defined in the bottom tabs navigator, I tried to resolve this by creating a new Stack navigator in home via homeStack which is as:
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Notifications" component={Notifications} />
<Stack.Screen name="ProductDetail" component={ProductDetail} />
<Stack.Screen name="AuthStack" component={AuthStack} />
<Stack.Screen name="BlogStack" component={BlogStack} />
<Stack.Screen name="BlogDetail" component={BlogDetail} />
<Stack.Screen name="Cart" component={CartStack} />
</Stack.Navigator>
Now that we have the productDetail navigator in handler, I am able to navigate to product detail.
Similarly, the product bottom tab has another stack navigator as ProductStack on top which helps in navigation to its various links. It is as:
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Product" component={Product} />
<Stack.Screen name="CartStack" component={CartStack} />
<Stack.Screen name="ProductDetail" component={ProductDetail} />
</Stack.Navigator>
My main concern here is that I have been including the ProductDetail and CartStack as an element of navigators in more than one places and I have a feeling that I'm not doing this right.
Also can this multilevel stacking of navigators lead to a performance issue?
Also the cartStack I access when directly navigating to productDetail from home screen causes the disappearance of the bottom tabs.
Am I handling the situation totally wrong here?? Is there an easier way of doing this, that hasn't crossed my mind?
So it depends on which tab you want to stay on, if you want to stay on the home tab you can leave it in the home stack. If you want to go to the products tab -> product details page so when they go back/dismiss it will go back to the root screen of the products tab then you can do something like this to navigate to nested screens:
navigation.navigate('Product', { screen: 'ProductDetail' });
I think you should put your ProductDetail and CartStack and your BottomTabContainer in a Stack.Navigator, then you can easily navigate to ProductDetail or CartStack from anywhere in your BottomTabNavigator
Something like this:
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="TabNavigator" component={YourTabComponent} />
<Stack.Screen name="CartStack" component={CartStack} />
<Stack.Screen name="ProductDetail" component={ProductDetail} />
</Stack.Navigator>
then you can remove your CartStack and ProductDetail out of HomeStack and ProductStack.
I have a bottomtab in my React Native setup;
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="News" component={News} />
<Tab.Screen name="Mens" component={Mens} />
<Tab.Screen name="Ladies" component={Ladies} />
<Tab.Screen name="Watch" component={Fixtures} />
</Tab.Navigator>
</NavigationContainer>
What I'd like to do is add in the middle a dummy Tab so I can add a custom icon;
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="News" component={News} />
<Tab.Screen name="Mens" component={Mens} />
<Tab.Screen name="logo" />
<Tab.Screen name="Ladies" component={Ladies} />
<Tab.Screen name="Watch" component={Fixtures} />
</Tab.Navigator>
</NavigationContainer>
The challenge I'm having is where to start (TabBarOptions doesn't appear to work within the tab.screen). I've found loads of explains (they seem like overkill for adding an icon), but they all use pre-defined icon sets. What I want to do is create an icon from a custom image and then use that for the logo tab so it appears in my bottom navigation.
You can set the tabbaricon like below. The there are parameters for focused as well which you can use to set images based on condition.
<Tab.Screen
name="Settings1"
component={SettingsScreen}
options={{
title: 'My profile',
tabBarIcon: ({size,focused,color}) => {
return (
<Image
style={{ width: size, height: size }}
source={{
uri:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
}}
/>
);
},
}}
/>
I have tried to use minSwipeDistance property of drawer navigator.But It gives me error like Inviolant object.After trying a lot I didn't know what to do.Anyone can help me?
<NavigationContainer ref={navigationRef}>
<Loader loading={this.state.loading} close={()=>{}} />
<Drawer.Navigator
drawerStyle={{
width:Dimensions.get('window').width,
}} drawerContent={ ()=>{return(<MenuDrawer cats={this.state.cat_list} />)}}>
screenOptions={{
minSwipeDistance:0.5
}}
<Drawer.Screen
name="Main"
component={MainComponent}
/>
</Drawer.Navigator>
</NavigationContainer>
I work on a react-native app and this project used react-navigation 4.x to navigate around the app.
I recently upgraded the project to 5.x of react-navigation and while trying to upgrade I ran into a problem. The problem is that my project has both a FooterNavigator and a DrawerNavigator, they both call on the same component.
We already figured out a way to fix the problem in react-navigation 4.x but the new version of react-navigation requires a name and a component for each Screen. Is there any way for me to have both the navigators at the same time or is it better to downgrade?
Image of the error
This is my FooterNavigator
const Tab = createBottomTabNavigator();
export const FooterNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Search" component={Search}>
<Button>
<Icon name="magnify" type="MaterialCommunityIcons"/>
<Text style={footerStyle.footerText}>Zoeken</Text>
</Button>
</Tab.Screen>
<Tab.Screen name="Count" component={Count}>
<Button>
<Icon name="counter" type="MaterialCommunityIcons"/>
<Text style={footerStyle.footerText}>Tellen</Text>
</Button>
</Tab.Screen>
<Tab.Screen name="Identify" component={Identify}>
<Button>
<Icon name="file-question" type="MaterialCommunityIcons"/>
<Text style={footerStyle.footerText}>Herken</Text>
</Button>
</Tab.Screen>
<Tab.Screen name="Program" component={Program}>
<Button>
<Icon name="chip" type="MaterialCommunityIcons"/>
<Text style={footerStyle.footerText}>Wijzig</Text>
</Button>
</Tab.Screen>
</Tab.Navigator>
)
}
And this is my DrawerNavigator
export const RootNavigator = () => {
let DrawerScreens = [];
Routes.forEach(function (route) {
DrawerScreens.push(<Drawer.Screen name={route.name} component={route.component}/>)
});
return (
<Drawer.Navigator>
{DrawerScreens}
</Drawer.Navigator>
)
}
They are both called and rendered in my Layout.js
render() {
return (
<NavigationContainer>
<RootNavigator />
<FooterNavigator/>
</NavigationContainer>
)
}
Many thanks in advance !!
use this
<Stack.Screen name="Home" component={HomeScreen} />
instead of this
<Stack.Screen name="Home" component={HomeScreen}> </Stack.Screen>
solve your problem
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Details" component={DetailScreen} />
</Stack.Navigator>
</NavigationContainer>
Just remove component prop from stack screen. if you are passing custom values through navigation stack
I get this error when I use a <Stack.Screen> and provide a component and a child to it, as the error mentions.
<Stack.Screen name="Home" component={Home}>
{props => <Home {...props} sampleProperty="XXXXXXXX" />}
</Stack.Screen>
removing this bit component={Home} on line1 fixes the error.