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

[ethanneff]

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.

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

[nes123]

+1

[737]

+1

[a-eid]

• go throu the readme again.
• then rebuild ur project and restart the packager.

[ethanneff]

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

[jesster2k10]

I still have his issue, nothing seems to fix it

[wouterds]

I also noticed this package stopped working since 0.59 (on Android), haven't found a fix yet. Above suggestion doesn't work since my config was already set to that (experimentalImportSupport & inlineRequires to false). Edit: downgrading works.

[melkishengue]

+1

[tuononh]

+1

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

[saeedtkh]

Any solution?

[Luckygirlllll]

@ethanneff where is this metro.config.js?

[ethanneff]

The metro.config.js was introduced in version 0.59.9 https://react-native-community.github.io/upgrade-helper/?from=0.58.6&to=0.59.9

[gazedash]

It didn't help

[erassynathingo]

any solution for this yet?

[kigh143]

Anything yet, I have tried everything here nothing really seems to work.

[dilipsuthar97]

Anyone here tested that which version of react-native-vector-icons is working fine with react-native >= 0.59+ for ios(Native module cannot be null)?

[zwerg44]

Can confirm react-native-vector-icons 7.1.0 - works perfectly for me with react-native 0.62

In my case Native module cannot be null at ios was caused by:

• other (my own) native module, that has only android implementation
• me, forgotten to npm i during previous ios build

To debug Native module cannot be null:

• that error is caused by passing null to something like NativeEventEmitter (or other stuff for native module integration)
• look for NativeModules usage at js/jsx files at your project and node modules (and places where it is passed as argument)
• in my case it was new NativeEventEmitter(NativeModules.ActivityResult);