BottomNavigation does not show @expo/vector-icons in React Native

Question

I am using the package from https://github.com/timomeh/react-native-material-bottom-navigation . The code was taken from the example, but the icons that are used in the example are not loaded.

I tried to borrow from another library: https://github.com/oblador/react-native-vector-icons . But it also didn't help.

Here is the full component:

...
import BottomNavigation, { FullTab } from 'react-native-material-bottom-navigation';
import Icon from '@expo/vector-icons/MaterialCommunityIcons'
interface Props {
  navigation: NavigationScreenProp<NavigationState, NavigationParams>,
}
interface State {
  activeTab: number | string
}
class HomeScreen extends Component<Props, State> {
  static navigationOptions = {
    header: null,
  };
  constructor(props: Props) {
    super(props);
    this.state = {
      activeTab: 'games'
    }
  }
  tabs = [
    {
      key: 'games',
      icon: 'gamepad-variant',
      label: 'Games',
      barColor: '#388E3C',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
      key: 'movies-tv',
      icon: 'movie',
      label: 'Movies & TV',
      barColor: '#B71C1C',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    },
    {
      key: 'music',
      icon: 'music-note',
      label: 'Music',
      barColor: '#E64A19',
      pressColor: 'rgba(255, 255, 255, 0.16)'
    }
  ]
  renderIcon = icon => ({ isActive }) => (
    <Icon size={24} color="white" name={icon} />
  )
  renderTab = ({ tab, isActive }) => (
    <FullTab
      isActive={isActive}
      key={tab.key}
      label={tab.label}
      renderIcon={this.renderIcon(tab.icon)}
    />
  )
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
          {/* Your screen contents depending on current tab. */}
        </View>
        <BottomNavigation
          tabs={this.tabs}
          activeTab={this.state.activeTab}
          onTabPress={newTab => this.setState({ activeTab: newTab.key })}
          renderTab={this.renderTab}
          useLayoutAnimation
        />
      </View>
    );
  }
}
...

That's what I get now:

Answer 1

If you can install and use the expo-vector-icons module,

There is no problem with your code. You can see this in the example of a link I created.

OR

You can try this

import { MaterialCommunityIcons } from '@expo/vector-icons'
...
renderIcon = icon => ({ isActive }) => (
    <MaterialCommunityIcons size={24} color="white" name={icon} />
  )