Icons/Images do not display with TabBarBottom in React Native : <p>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?</p>

<p><a href="https://i.stack.imgur.com/3z0VQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3z0VQ.png" alt="enter image description here"></a></p>

<p>Here's the link to the docs I've been using: 
<a href="https://reactnavigation.org/docs/navigators/tab" rel="noreferrer">https://reactnavigation.org/docs/navigators/tab</a></p>

<p>Here's my code:</p>

<pre><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 }) =&gt; (
      &lt;Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      /&gt;
    ),
  };

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

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

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

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

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