Icons / images not displayed with TabBarBottom in React Native

Question

I took a lot of sample code from the TabNavigator documentation, and the icon / images just don't display on iOS or Android. Even label overrides do not take effect. What am I doing wrong?

Here's a link to the docs I used: https://reactnavigation.org/docs/navigators/tab

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

Answer 1

Well, I finally figured it out, wanting to slap my face.

The title bar and tab bar icon is actually different from the structure inside the documents.

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

Answer 2

, . "tabBar", ... : , tabBarOptions . activeTintColor inactiveTintColor TabBarBottom.