CODEWITHSUNDEEP
androidreactjsreact-nativeexpo
Renato Probst
Renato Probst

Reputation: 6054

Load custom native component in react native using expo kit

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?

Upvotes: 13

Views: 3096

Answers (4)

Tukan
Tukan

Reputation: 2333

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.

Upvotes: 1

Waqas Ahmed
Waqas Ahmed

Reputation: 1421

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.

Upvotes: 5

Atul
Atul

Reputation: 2310

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

Upvotes: 9

Matt Aft
Matt Aft

Reputation: 8936

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

Upvotes: 7

Related Questions