13

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:

enter image description here

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

Renato Probst
  • 5,914
  • 2
  • 42
  • 45

4 Answers4

9

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

Atul
  • 2,170
  • 23
  • 24
7

You can't use native code when using expo, you can use only what they give you. Ejecting will allow you to use native code but then you can't use expo anymore and I'm pretty sure it's irreversible.

You can see more about the caveats of using expo here: https://facebook.github.io/react-native/docs/getting-started.html#caveats

Matt Aft
  • 8,742
  • 3
  • 24
  • 37
  • Hi Matt, thanks for answering, i have already ejected. Im using Expo kit, the documentation says it allows native code (you can eject to expo kit or react native) along with the expo framework. – Renato Probst Dec 29 '17 at 02:56
5

You can start with the best generator of code for React Native Known as Ignite it is very easy to use it has some BoilerPlates.

From the given useful boilerplates you can use Ignite Expo BoilerPlate which will setup all the code with expo + native modules support. After installing ignite-cli as global package and running ignite new [AppName] -b ignite-expo

So this will be an easy step for you. Also it adds some useful other modules as well.

Waqas Ahmed
  • 1,321
  • 1
  • 14
  • 23
  • Thanks for answering. I already have all my code done and working, the only piece i still need to make is this native module, so i cant restart everything from scratch (by using ignite) – Renato Probst Dec 31 '17 at 19:10
1

After you eject a project, trying to use it via exp start will not give you the result you wish to achieve. While expo kit is still supported, you are now in need of new native code, as such you need to run it using react-native run-android. When you do so, it will not only serve JS as exp start does, but also compile your native code and put it in your device.

Right now, using exp start serves the JS bundle, however said bundle cannot find your native module as it does not exist within the generic expo client.

Tukan
  • 2,253
  • 15
  • 17