Load custom native component in react native using expo kit

Question

Im trying to load a custom Android WebView to be able to upload files using html file inputs (by default Android webview wont work with input file). Im using this code, the only difference is that im using expo kit, so my MainApplication.java is different (inherits from another class by default):

public class MainApplication extends MultiDexApplication {

    // Needed for `react-native link`
    public List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CustomWebViewPackage()
    );
  }

  @Override
  public void onCreate() {
      super.onCreate();
      SoLoader.init(this, /* native exopackage */ false);
  }
}

Basically what the git code do is override the default react native webview to make it use the CustomWebView.java in Android, using requireNativeComponent with this code (this is on CustomWebView.android.js):

var RCTWebView = requireNativeComponent('CustomWebView', WebView, {
nativeOnly: {
    messagingEnabled: PropTypes.bool,
},

});

But when i run the application using exp start and navigate to the screen that has the CustomWebView i receive this error:

Summarizing the problem is that my custom native component is not being read by React Native. Can someone help me please?

Answer 1

Expo by default will not support any custom native modules. This is because they have a single perbuilt binary and they only load the JS bundle that you write. So any code you write with Expo can only be pure Javascript. But Expo documentation does say that you can add custom native modules after detaching. More info here:

https://docs.expo.io/versions/latest/guides/detach.html#should-i-detach

https://docs.expo.io/versions/latest/introduction/faq.html#what-is-the-difference-between-expo-and-react-native

https://github.com/expo/expo/issues/56