Icons/Images do not display with TabBarBottom in React Native

react-native-vector-icons
tab bar icon not showing react native
tabbaricon react native icons
react native image
add icon in navigationoptions in react native
react native tabs
react-navigation-tabs - npm
tab navigation in react-native example

I've pretty much taken the sample code from the TabNavigator documentation and the icon's/images simply don't appear on iOS or Android. Even the label override doesn't seem to take effect. What am I doing wrong?

Here's the link to the docs I've been using: https://reactnavigation.org/docs/navigators/tab

Here's my code:

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Not displayed',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Notifications',
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require('./notif-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
});

const MyApp = TabNavigator({
  Displayed: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

Alright, I finally figured it out after wanting to slam my face into the keyboard.

The title and tab bar icon is actually a different structure to what's inside the docs.

  const MyApp = TabNavigator({
    Displayed: {
      screen: MyHomeScreen,
      navigationOptions: {
          title: 'Favorites',
          tabBar: {
            icon: ({tintColor}) => (<Image
              source={require('./chats-icon.png')}
              style={{width: 26, height: 26, tintColor: tintColor}}
            />)
          },
      },
    },
    ...

or

 class MyHomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Foo Bar',
        tabBar: {
            icon: ({ tintColor }) => (
              <Image
                source={require('./chats-icon.png')}
                style={{width: 26, height: 26, tintColor: tintColor}}
              />
            ),
        }
      };
 ...

Tab Navigator icons not showing � Issue #1720 � react-navigation , I have no idea what to do. It's my first time I try to set icons to tabs. : ( import { StyleSheet, View, Text } from "react-native"; import { TabNavigator }. Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

As for react-navigation-tabs v2.6.2 is it now as described in the doc.

To update the old example, you have to replace tabBar: { icon: ... } by tabBarIcon: ...

e.g.

 class MyHomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Foo Bar',
        tabBarIcon: ({ tintColor }) => (
              <Image
                source={require('./chats-icon.png')}
                style={{width: 26, height: 26, tintColor: tintColor}}
              />
            )
      };

tabBarIcon image not visible � Issue #4648 � react-navigation/react , Current Behavior I wanted to customize my tabBar Bottom navigation with some image for each button instead of default icon. GitHub is home to over 50 million developers working together to host and review react-native. You can do this by calculating the width of the container, then simply dividing the width by the number of items you need per row: Check out this example I set up, also pasted the code below.

I was searching for answers in stack overflow while answer was in documentation itself. For using images as icon in react-native bottom tab. This is according to current React Navigation 4.x.

const tabNavigator = createBottomTabNavigator({
        Style: HomeScreen,
        Location: LocationScreen,   
    },
        {
            defaultNavigationOptions: ({ navigation }) => ({
                tabBarIcon: ({ focused, horizontal, tintColor }) => {
                    const { routeName } = navigation.state;
                    if (routeName === 'Style') {
                        return <Image
                            source={require('./screens/assets/notifications.png')}
                            style={{ height: 25, width: 25, tintColor: tintColor }}
                        />;
                    } else if (routeName === 'Location') {
                        return <Image
                            source={require('./screens/assets/location.png')}
                            style={{ height: 35, width: 35, tintColor: tintColor }}
                        />;
                    }
                },
            }),

        tabBarOptions: {
            activeTintColor: 'tomato', //For changing tint colors
            inactiveTintColor: 'gray',
        },
    }
),

You can find additional info here.

Bottom Navigation with Navigation Icon from Local , 1 React Native Bottom Navigation; 2 To Make a React Native App in this example is from local directory// import React from 'react'; import { Button, Image } from Component { //Detail Screen to show from any Open detail button render() { return Swipe Gestures not Working in Android- React Native Gesture Handler �

Got the same problem, but this solution didn't worked for me. Invalid Key 'tabBar' defined in navigation options... Edit: Got it working when I removed the tabBarOptions from my tab navigator. instead used the activeTintColor and inactiveTintColor as the props of TabBarBottom.

createBottomTabNavigator, Routes are lazily initialized -- their screen components are not mounted until they are first focused. To use this navigator, ensure that you have @react-navigation /native and its Function that returns a React element to display as the tab bar. Example: Whether the label is rendered below the icon or beside the icon.

createMaterialBottomTabNavigator, Routes are lazily initialized - their screen components are not mounted until npm install @react-navigation/material-bottom-tabs react-native-paper Badge to show on the tab icon, can be true to show a dot, string or number to show text.

React Native: Tab bar is customizable | by Alex Melnyk, In our example, we need to have a big button with a plus icon and three hidden buttons with icons. Image for post. Tab bar with�

BottomNavigation � React Native Paper, icon : icon to use as the tab icon, can be a string, an image source or a react component; color : color to use as background color for shifting bottom navigation �

Comments
  • Are you sure you set the width and height in styles.icon?
  • @ViktorSeč yep, it's right there in the style sheet.create code.
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review
  • and also remove the tabBar key. and put the tabBarIcon and tabBarLabel with the tab navigator screens.