react-native-vector-icons: Native module cannot be null on React Native 0.59+

Description

react-native-vector-icons fails to work with React-Native 0.59.1. The following errors are thrown. iOS: Native modular cannot be null. Android: BackAndroid is deprecated and has been removed from this package. Use BackHandler instead. The library was working fine in React Native version 0.57.1 and version 0.58.6.

Screen Shot 2019-03-20 at 9 37 17 AM

Environment

iOS
Android

Sample Code

Removing react-native-vector-icons fixes both errors.

import * as React from "react";
+ import { ViewStyle, Text } from "react-native";
- import { ViewStyle } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

interface Props {
  name: string;
  size: number;
  color: string;
  style?: ViewStyle | {};
}

export class IconWrapper extends React.PureComponent<Props> {
  public render() {
    const { name, size, color, style } = this.props;
+   return <Text>{name}</Text>;
    return <Icon name={name} size={size} color={color} style={style} />;
  }
}

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 17

Most upvoted comments

react: 16.8.6 => 16.8.6
react-native: 0.60.4 => 0.60.4
react-native-vector-icons: ^6.6.0

tuononh on Jul 26, 2019

It didn’t help

gazedash on Oct 18, 2019

Any solution?

saeedtkh on Sep 7, 2019

I figured it out. You need to update your metro.config.js and restart your bundler.

before

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: true,
        inlineRequires: true
      }
    })
  }
};

after

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  }
};

ethanneff on Apr 3, 2019