Icon in createMaterialBottomTabNavigator isn't showing - reactjs

I'm trying to set up a MaterialBottomTabNavigator in my app with custom icons using react-native-vector-icons, but the icons are not showing up. Am I doing something wrong in the NavigatorConfig?
At first I thought it was because my icons aren't loading in correctly, but placing them in a View on another screen (anywhere but inside the MaterialBottomTab) makes them show up no problem. Even the standard MaterialIcons provided with vector-icons aren't showing up in the bottomTab, but any other place is no problem.
I've tried shifting the configs around, placing the tabBarIcon in both the screen config, aswell as the navigator config, but still no result.
I've also tried the showIcon option, but also no results.
Here's my code right now:
export const userNavigation = createMaterialBottomTabNavigator({Bars, Settings}, {
Bars: {
screen: Bars,
navigationOptions: {
tabBarIcon: ({focused}) => <Icon name="bars" size={20} color={focused ? '#FFF' : '#DACE91'}/>,
},
},
shifting: false,
labeled: true,
activeColor: '#FFF',
inactiveColor: '#DACE91',
});
I expect the icons to show up in the bottomTab, but I get no error messages or any other feedback as to why they aren't showing.

You are putting in the tab configs the route configs.
createMaterialBottomTabNavigator({
Bars:{
screen: Bars,
navigationOptions:{
tabBarIcon: ({focused}) =><Icon name="bars" size={20} color={focused ? '#FFF' : '#DACE91'}/>,
}
}
},{
shifting: false,
labeled: true,
activeColor: '#FFF',
inactiveColor: '#DACE91',
})
Hopefully this will help!

to fix then icon
add these in bootom navigation
shifting: false,
labeled: true,

Related

React Navigation V6 large header option with blur effect doesn't work if my app is in dark mode but the phone is in light mode

I have the following styling to a NativeStackNavigationOption
navigationOptions = (): NativeStackNavigationOptions => ({
...LargeHeaderOptions,
title: "Search Screen",
})
The styling is:
LargeHeaderOptions: NativeStackNavigationOptions = {
headerLargeTitle: true,
headerShadowVisible: true,
headerLargeStyle: {
backgroundColor: 'transparent'
},
headerBlurEffect: 'regular',
headerTransparent: Platform.OS === 'ios',
headerTitleStyle: {
fontSize: getScaledFontSize(18, NAVIGATION_BAR_MAX_SCALE)
}
}
My problem is that when my app is in dark mode but the phone is in light mode, the blur effect that I get is still light. I tried changing the headerBlurEffect to other values from the documentation to make sure that it is working so that I can conditionally change it depending on my theme but no matter what value I set there, it seems to render a light mode blur effect but if the phone is in dark mode it renders a dark mode blur effect.

How to hide the navigation tab bar on a specific screen in react-navigation [duplicate]

I am using React Native and React Native Navigation to build out my application. Currently, I have three bottom tabs: Home, Upload Video and Messages. Upon selection of the Upload Video tab, I want to render the Upload Video component and hide the bottom tabs on just that screen, and display a header with 'Cancel' (takes them back to the HomeView) and 'Post' buttons (this has already been done). I've had an extremely difficult time hiding the tab bar on this specific screen.
I tried following the code here (How can I hide the bottom tab bar on a specific screen (react-navigation 3.x)); however, that ended up being unsuccessful and I was not able to hide the bottom tabs on any of the screens this way.
Currently, I have this as my bottom navigator:
const BottomTabNavigator = createBottomTabNavigator({
HomeView: {
screen: HomeView,
},
VideoView: {
screen: VideoSelectionView
},
Messages: {
screen: SearchView
}
});
Any insight would be extremely helpful, thanks.
I've traversed the internet like never before to find a solution for this problem as the provided solution by the docs did not work in the slightest.
I had the following navigational Set-Up:
Bottom Tabs
A (NativeStack)
1 (Screen)
2 (Screen)
3 (Screen)
B (NativeStack)
C (NativeStack)
I wanted to hide the bottom bar in Screen 1. What finally did the trick was the following snippet in the corresponding screen:
useEffect(() => {
navigation.getParent()?.setOptions({
tabBarStyle: {
display: "none"
}
});
return () => navigation.getParent()?.setOptions({
tabBarStyle: undefined
});
}, [navigation]);
The effect is run when the navigation prop updates and with that implicitly after the screen is being opened. With getParent() I get the bottom tabs navigator and can set the options with setOptions(...). To bring the bottom tabs back one has to manually set the options. I solved this by returning the method that resets the tabBarStyle in the call of useEffect(). This call is being made when it's time to clean-up, meaning that it will run as soon as the screen is being unmounted.
May this save same of you of the desperation I had to go through.
You need to specify for each TabBar screen or stack for which you need to hide tabbar,
const BottomTabNavigator = createBottomTabNavigator({
HomeView: {
screen: HomeView,
navigationOptions:()=>{
return {
tabBarVisible:false,
};
}
},
VideoView: {
screen: VideoSelectionView
},
Messages: {
screen: SearchView
}
});
on v5 you can modify options using a function and default arg navigation.:
<BottomTab.Screen
name="Explore"
component={Explore}
options={({ navigation }) => {
const { routes, index } = navigation.dangerouslyGetState();
const { state: exploreState } = routes[index];
let tabBarVisible = true;
if (exploreState) {
const { routes: exploreRoutes, index: exploreIndex } = exploreState;
const exploreActiveRoute = exploreRoutes[exploreIndex];
if (exploreActiveRoute.name === "RewardDetail") tabBarVisible = false;
}
return {
tabBarVisible,
title: "Explore",
tabBarLabel: "Explore",
tabBarIcon: ({ color, size }) => (
<AntDesign name="search1" color={color} size={size} />
),
};
}}
/>
see my answer: https://stackoverflow.com/a/64042879/5288560
Since react-navigation 5 is now being used, the above solution doesn't work anymore.
For React-Navigation 5, refer to this link.
In React Navigation V6 add display: none in options under tabBarStyle.
Add tabBarButton: () => null, to disable icon in Tab.
<Stack.Screen
name="Add Product"
component={AddProduct}
options={() => ({
tabBarStyle: {
display: "none",
},
tabBarButton: () => null,
})}
/>
Just setting the tabBarStyle to none doesn't work for me, I needed to use the property tabBarVisible too, if using hooks you can do something like that:
export function useHideBottomBar() {
const navigation = useNavigation();
useEffect(() => {
navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' }, tabBarVisible: false });
return () =>
navigation.getParent()?.setOptions({ tabBarStyle: undefined, tabBarVisible: undefined });
}, [navigation]);
}
In React navigation 5+ I used the following approach to hide a tab bar on a specific screen which was inside a stack navigator of a tab screen. In my tab navigator containing file I made a function, and then set the options property using the function which will trigger dynamically.
function getIsTabBarShown(route) {
const routeName = getFocusedRouteNameFromRoute(route) ?? routes.DASHBOARD;
switch (routeName) {
case routes.MEMBERDETAILS:
return false;
default:
return true;
}
}
This function will return false when user would go to MemberDetails Page which is inside MemberNavigator Stack.
<Tab.Screen
name="MemberTab"
component={MemberNavigator}
options={({ route }) => ({
title: 'Members',
tabBarVisible: getIsTabBarShown(route),
tabBarIcon: ({ color, size }) =>
<MaterialCommunityIcons name="account-group" color={color}
size={size} />
})} />
Here is the official docs to learn more click here.
Refer to the documentation by clicking here
After searching and trying a lot of methods I changed the top element View to Modal then hid bottombar, because modal can be upper bottom bar. It's not the best but still useful.
<View>
//code block
</View>
to->
<Modal animationType='fade' transparent={false} visible={true}>
/code block
</Modal>
In Version 6 this worked for me:
To hide the bottom tab navigator from the screen:
navigation.getParent()?.setOptions({tabBarStyle: {display: 'none'}});
To show the bottom tab navigator from the screen:
navigation.getParent()?.setOptions({tabBarStyle: {display: 'flex'}});
just on the Screen you want to hide the bar, set tabBarVisible: false.
<Tab.Screen
name="SignIn"
component={SignInScreen}
options={{
tabBarVisible: false, //like this
tabBarButton: (props) => null, //this is additional if you want to hide the tab element from the bottom nav
}}
/>

PolylinesOprtions DirectionRender react-google-maps/api

I try to change marker on a DirectionRender from react-google-maps/api.
I already change de polyline color but i dont make change de marker A and B, my code.
<DirectionsRenderer
getIcon={(icon) => console.log("icon render", icon)}
options={{
directions: response,
polylineOptions: {
strokeColor: "#c23531",
icons: [{
icon:{
path:{to},
strokeOpacity: 1
},
offset:'50%'
},{
icon:{
path:{fromm},
strokeOpacity: 1
},
offset:'50%'
}],
},
}}
/>
The DirectionsRenderer of #react-google-maps/api library doesn't have a getIcon prop name just like you have in your code. To change the icon of the markers in the DirectionsRenderer, you need to use the options which has the properties of google.maps.DirectionsRendererOptions interface.
In there, you can see a markerOptions props name which uses the google.maps.MarkerOptions interface that have the icon properties.
Here's a sample code (put your API key on the index.js file of the code sample to make it work) and code snippet how to use the options properties to change the icon:
<DirectionsRenderer
directions={this.state.directions}
options={{
markerOptions: {
icon:
'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
}
}}
/>

How to remove the header of createMaterialTopTabNavigator react native navigation

I want to be able to swipe between the screens, and on the third screen the swipe to the next screen must be disabled and it should happen through a click on a button.
So far I was unable to remove the header from the screen which must happen first.
const loginNavigation = createMaterialTopTabNavigator({
firstLogin: LoginFirstScreen,
secondLogin: LoginSecondScreen,
thirdLogin: LoginThirdScreen,
fourthLogin: startingNavigation
},{
headerMode: 'none',
navigationOptions: {
headershown: false,
}
})
the answer to this is the following.
const loginNavigation = createMaterialTopTabNavigator({
firstLogin: LoginFirstScreen,
secondLogin: LoginSecondScreen,
thirdLogin: LoginThirdScreen,
fourthLogin: startingNavigation
},{
swipeEnabled: true,
tabBarOptions: {
style: {display: "none"}
}
})
Add headerMode null instead of none
Try to use this option header: null in place headerMode: 'none'

How to add a list count inside TabNavigator in react native

How to implement the count inside the tab navigator in react native.Below is the example image. I have asked react communities but nobody seems to have an answer for this.
Please Help.
You have two options here:
1.Use redux or something else so that your tab component knows its own count, regardless of the route.
2.You can have a param like badgeCount, which is visible because tabBar or any other navigation option can be defined as a function of the navigation prop:
static navigationOptions = {
tabBar: (navigation) => ({
label: 'Home',
icon: ({ tintColor, focused }) =>
<IconBadge
MainElement={
<Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={26}
style={{ color: tintColor }}
/>
}
badgeNumber={navigation.state.params.badgeCount}
/>,
}),
}
Then you can change the param by calling navigation.setParams({ badgeCount: 123 }).
This has been addressed in this Github issue
In your Past Page:
static navigationOptions = ({navigation}) => ({
title: 'yourTitle',
tabBarLabel: 'Past${navigation.state.params.count}'
})
and it will display new count after you change the count by setParams method:
navigation.setParams({count: list.length})

Resources