React Native Custom icon / image in Tab.Screen navigation - react-native

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==',
}}
/>
);
},
}}
/>

Related

How to link from drawer Item to external website react-native-expo

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.

How to navigate to a screen which is not on the <Tab.Navigator> in React-Nativ?

I have a <Tab.Navigator> and it has four <Tab.Screen> elements. What i try to do is, to press a button inside a specific <Tab.Screen> and open an another screen on top of it. But i don't want this another screen to have a <Tab.Screen> navigator in the <Tab.Navigator> bar.
I thought maybe there's an option to hide, make invisible a <Tab.Screen> but i couldn't find any documentation about it.
Is it possible to achieve this ?

According the official doc. You can reorganize your navigation and put the bottom tabs navigator inside the stack navigator like this
function HomeTabs() {
return (
<Tab.Navigator> // Here you can also navigate to both Profile and Settings
<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="Home" component={HomeTabs} />
<Stack.Screen name="Profile" component={Profile} /> // Here you won't have any tabs
<Stack.Screen name="Settings" component={Settings} /> // Here neither
</Stack.Navigator>
);
}

You have to nest navigators with the stack navigator as the outer navigator and the tab navigator as the inner navigator:
https://reactnavigation.org/docs/nesting-navigators

You have to reorganize your navigation structure , as documentation describe https://reactnavigation.org/docs/hiding-tabbar-in-screens
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.
But 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 easiest way to achieve this is to nest the tab navigator inside the first screen of the stack instead of nesting stack inside tab navigator:
function HomeTabs() {
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="Home" component={HomeTabs} />
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
);
}
After re-organizing the navigation structure, now if we navigate to the Profile or Settings screens, the tab bar won't be visible over the screen anymore.

React-native navigation, hide bottom tab

I have this
<NavigationContainer>
<Tab.Navigator
>
<Tab.Screen
name="ГалСрСя" component={Gallery}
/>
<Tab.Screen
}
}}
name="Π˜Π·Π±Ρ€Π°Π½Π½ΠΎΠ΅" component={Favorites}
/>
<Tab.Screen
name="{item}" component={PhotoScreen}
/>
</Tab.Navigator>
</NavigationContainer>
And i dont wanna show last bottom tab on the bottom menu
How can i hide it?
Maybe i need to create one more Stack?
or i can hide it with some options?

React Native Tab Navigator first tab is focused by default

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>

What is the proper way of dealing with navigation to screens located in separate navigators directly in react navigator 5?

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.