I have been trying to put an Icon in the bottom tab, I have been using the react navigation tabs version 4. I have tried to upgrade to version 5 but that's a different story.
The goal is just to include an icon but I'm just failing left and right. The documentation says to add it in the navigationOptions
HomeScreen.navigationOptions = ({navigation}) => {
return {
title: 'Get Me Goods',
headerStyle: HeaderStyle.headerStyle,
headerTintColor: HeaderStyle.headerTintColor,
headerTitleStyle: HeaderStyle.headerTitleStyle,
tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>,
headerLeft: () => <MenuImage
onPress={() => {
// navigation.openDrawer()
navigation.navigate('SignOut')
}}
/>
,
headerRight: () =>
<MenuImage
onPress={() => {
navigation.openDrawer()
}}
/>
}
}
and also tried it in the bottom tab navigator
const BottomTabMenu = createBottomTabNavigator(
{
Home: {
screen: Home,
options: {
tabBarLabel: 'Testing',
tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
}
},
Me,
Search,
Messages,
Sell
},
{
initialRouteName: 'Home'
}
)
what else am I missing?
Got this figured out, just used the navigationOptions instead of options in the bottom tab bar configuration
const BottomTabMenu = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: 'Testing',
tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" color={color} size={size}/>
}
},
Me,
Search,
Messages,
Sell
},
{
initialRouteName: 'Home'
}
)
Related
I had build the layout using fontawsome icons in snack expo but when run the same project in expo cli the icons are not displayed.It displayed as a cross.App workes perfectly in snack but not in expo cli.I have tried googleing the probelem but the solutions are change files in gradle i dont have a gardle file this is a snack project.Is there any solution any help will be greatfull,Thanks.
import Icon from 'react-native-vector-icons/FontAwesome';
{
Home: {
screen: FetchNewsApp,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Icon name="home" color={tintColor} size={25} />
),
},
},
Explore: {
screen: ExploreScreenApp,
navigationOptions: {
tabBarLabel: 'Explore',
tabBarIcon: ({ tintColor }) => (
<Icon name="wpexplorer" color={tintColor} size={25} />
),
},
},
Search: {
screen: SearchScreenApp,
navigationOptions: {
tabBarLabel: 'Search',
tabBarIcon: ({ tintColor }) => (
<Icon name="search" color={tintColor} size={25} />
),
},
},
Settings: {
screen: SettingScreenApp,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<Icon name="cog" color={tintColor} size={25} />
),
},
},
Profile: {
screen: ProfileScreenApp,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({ tintColor }) => (
<Icon name="user-circle" color={tintColor} size={25} />
),
},
},
},
{
initialRouteName: 'Home',
}
);
If you are using expo managed app just use expo vector icons
Expo vector icons
because react native vector icons require linking which is not possible with expo managed apps.
here is an example for expo icons on snack:
Snack
You also use images replace icons it works fine,
tabBarIcon: ({ tintColor }) => (
<Image source={require('...')} style={{}}/>
)
I want to dynamically change the icon of the bottom tab bar icon to the icon of the drawer page i change to. When the drawer open and i select cards page i want the payment icon to change from money to cards icon. Is this possible to achieve ? thanks
bottom tab
const bottomtab = createBottomTabNavigator(
{
home: {
screen: home,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => <Icon name="home" color={tintColor} focused={focused} size={30} />,
},
},
payment: {
screen: paymentdrawerstack,
navigationOptions: ({ navigation }) => {
return{
tabBarIcon: ({ tintColor }) => <Icon name="money" color={tintColor} size={20} />,
}
},
},
},
drawer nav
const paymentdrawerstack = createDrawerNavigator(
{
balance: {
screen: balance,
navigationOptions: ({ navigation }) => {
return{
drawerIcon: ({ tintColor, focused }) => (
<Icon name="money" color={tintColor} focused={focused} size={20} />
),
drawerLabel: 'balance',
}
},
},
cards: {
screen: cards,
navigationOptions: ({ navigation }) => {
return{
drawerIcon: ({ tintColor, focused }) => (
<Icon name="cards" color={tintColor} focused={focused} size={20} />
),
drawerLabel: 'cards',
}
},
},
Try this, use this function to get the active route:
const getActiveRoute = route => {
if (!route.routes || route.routes.length === 0 || route.index >= route.routes.length) {
return route.routeName;
}
const childActiveRoute = route.routes[route.index];
return getActiveRoute(childActiveRoute);
}
And then in navigationOptions of payment, check what the active route is, change the icon accordingly, like so:
payment: {
screen: paymentdrawerstack,
navigationOptions: ({ navigation }) => {
const name = getActiveRoute(navigation.state) === 'cards' ? 'cards' : 'money';
return {
tabBarIcon: ({ tintColor }) => <Icon name={name} color={tintColor} size={20} />,
}
},
},
I’m setting up a new component with an icon from the "react-native-vector-icons" and I got a yellow warning.
This is for a new feature of the icon
Dashboard: {
screen: DashboardStack,
navigationOptions: {
title: 'HOME',
tabBarOnPress: ({ navigation, defaultHandler }) => handleTabPress(navigation, defaultHandler),
tabBarIcon: ({ focused, tintColor }) => {
// HERE IS THE PROBLEM //
return <SSIcon name={'home'} size={20} color={focused ? GStyle.GREEN : Color(GStyle.BLACK).alpha(.45)} />
},
}
},
I expect for no yellow warning
You could try this code
<SSIcon name={'home'} size={20} color={focused ? "green" : "black"} />
have you tried separating the color instead?
const stackNav = createStackNavigator ({
Dashboard: {
screen: DashboardStack,
navigationOptions: {
title: 'HOME',
tabBarOnPress: ({ navigation, defaultHandler }) => handleTabPress(navigation, defaultHandler),
tabBarIcon: ({ focused, tintColor }) => <SSIcon name={'home'} size={20} color={tintColor} />
}
}}, {
tabBarOptions: {
activeTintColor:GStyle.GREEN,
inactiveTintColor: Color(GStyle.BLACK).alpha(.45)
})
in your application's root index.js add this line:
console.disableYellowBox = true;
i want to hide tab bar in 1st screen only and show in other screens, how can i achieve this. any help is appreciated
const TabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-home" color={tintColor} size={24} />
)
}
},
Quotes: {
screen: QuoteScreen,
navigationOptions: {
tabBarLabel: 'Quotes',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-quote" color={tintColor} size={24} />
)
}
},
About: {
screen: AboutScreen,
navigationOptions: {
tabBarLabel: 'About',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-person" color={tintColor} size={24} />
)
}
},
Books: {
screen: BoookScreen,
navigationOptions: {
tabBarLabel: 'Books',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-book" color={tintColor} size={24} />
)
}
},
Videos: {
screen: VideoScreen,
navigationOptions: {
tabBarLabel: 'Videos',
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-videocam" color={tintColor} size={24} />
)
}
}
},
{
tabBarOptions: {
activeTintColor: 'yellow',
inactiveTintColr: 'white',
activeBackgroundColor:'black',
inactiveBackgroundColor:'black'
}
});
export default createAppContainer(TabNavigator);
show tab bar only in home screen i tried hiding in tab bar option but it either hides the tab bar on all screens or tab bar is visible in all screens.what should i try to achieve the desired result? any help is appreciated. thanks in advance...
Add tabBarVisible: false, to the home screen navigationOptions
I'm coding an app that uses react-navigation. My app has a bottom TabNavigator in which each tab consists of a stackNavigator, like so:
Routes.js:
const FirstStack = createStackNavigator({
First: {
screen: FirstScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const SecondStack = createStackNavigator({
Second: {
screen: SecondScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const ThirdStack = createStackNavigator({
Third: {
screen: ThirdScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const FourthStack = createStackNavigator({
Fourth: {
screen: FourthScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
const FifthStack = createStackNavigator({
Fifth: {
screen: FifthScreen,
navigationOptions: {
header: props => <AppToolbar />
}
}
});
export const AppStack = createBottomTabNavigator(
{
First: {
screen: FirstStack,
navigationOptions: {
title: "First",
tabBarLabel: "First",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-home" color={tintColor} size={24} />
)
}
},
Second: {
screen: SecondStack,
navigationOptions: {
title: "Second",
tabBarLabel: "Second",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-clock" color={tintColor} size={24} />
)
}
},
Third: {
screen: ThirdStack,
navigationOptions: {
title: "Third",
tabBarLabel: "Third",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-fitness" color={tintColor} size={24} />
)
}
},
Fourth: {
screen: FourthStack,
navigationOptions: {
title: "Fourth",
tabBarLabel: "Fourth",
tabBarIcon: ({ tintColor }) => (
<Icon
name="ios-cloud-download"
color={tintColor}
size={24}
/>
)
}
},
Fifth: {
screen: FifthStack,
navigationOptions: {
title: "Fifth",
tabBarLabel: "Fifth",
tabBarIcon: ({ tintColor }) => (
<Icon name="ios-person" color={tintColor} size={24} />
)
}
}
},
{
initialRouteName: "First",
order: ["First", "Second", "Third", "Fourth", "Fifth"],
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "grey",
style: {
backgroundColor: "#121212",
borderTopColor: "#303030"
}
}
}
);
Each stackNavigator inside the tabs in the tabNavigator has its own header so that I can customize the header for each tab, but all headers have a button which should navigate to the profile screen (in this example its the contact icon).
AppToolbar.js:
const appToolbar = props => {
return (
<View style={styles.toolbar}>
<Text style={styles.toolbarTitle}>Title</Text>
<TouchableOpacity onPress={...}>
<Icon
name="ios-contact"
color="grey"
size={30}
style={{ padding: 0, margin: 0, marginRight: 10 }}
/>
</TouchableOpacity>
</View>
);
};
What I want to do is that by pressing the contact icon the app should navigate to the profile screen, what I don't know is if its possible to define like a global route thats accesible from everywhere, Or do I have to add the profile screen to all the stackNavigators so that it is accesible from every screen in every stack?
Thanks in advance!
Found the answer here https://stackoverflow.com/a/50701940/1276438
Use a stackNavigator with the profile stack and the tabNavigator as children, making the tabNavigator the default route.