CODEWITHSUNDEEP
react-nativereact-navigation
theHarvester
theHarvester

Reputation: 583

Icons/Images do not display with TabBarBottom in React Native

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?

enter image description here

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

Upvotes: 13

Views: 12061

Answers (4)

Bhavya Khurjawal
Bhavya Khurjawal

Reputation: 336

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. Here is my bottom tabs navigator with image

Upvotes: 1

Kruup&#246;s
Kruup&#246;s

Reputation: 5474

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

Upvotes: 3

Yash Ojha
Yash Ojha

Reputation: 818

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.

Upvotes: 0

theHarvester
theHarvester

Reputation: 583

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

Upvotes: 12

Related Questions