ExpoKit (SDK 24) Link Native Modules Problem - Android


#1

I’ve a problem about expokit. After detached 2 different library I tried to link. But NativeModules always empty. Here is my first code;

package host.exp.exponent;

import com.facebook.react.ReactPackage;

import java.util.Arrays;
import java.util.List;

// Needed for `react-native link`
// import com.facebook.react.ReactApplication;
import com.wix.reactnativenotifications.RNNotificationsPackage;
import com.reactlibrary.RNIapPackage;
import com.facebook.react.shell.MainReactPackage;

public class MainApplication extends ExpoApplication {

  @Override
  public boolean isDebug() {
    return BuildConfig.DEBUG;
  }

  // Needed for `react-native link`
  public List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        // Add your own packages here!
        // TODO: add native modules!

        // Needed for `react-native link`
        //new MainReactPackage(),
            new RNNotificationsPackage(MainApplication.this),
            new RNIapPackage()
    );
  }

  @Override
  public String gcmSenderId() {
    return getString(R.string.gcm_defaultSenderId);
  }

  @Override
  public boolean shouldUseInternetKernel() {
    return BuildVariantConstants.USE_INTERNET_KERNEL;
  }
}

Then I tried like this;

package host.exp.exponent;

import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;

import java.util.Arrays;
import java.util.List;

// Needed for `react-native link`
import com.facebook.react.ReactApplication;
import com.wix.reactnativenotifications.RNNotificationsPackage;
import com.reactlibrary.RNIapPackage;
import com.facebook.react.shell.MainReactPackage;

public class MainApplication extends ExpoApplication implements ReactApplication {

    @Override
    public boolean isDebug() {
        return BuildConfig.DEBUG;
    }

    // Needed for `react-native link`
    public List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                // Add your own packages here!
                // TODO: add native modules!

                // Needed for `react-native link`
                new MainReactPackage(),
                new RNNotificationsPackage(MainApplication.this),
                new RNIapPackage()
        );
    }

    @Override
    public String gcmSenderId() {
        return getString(R.string.gcm_defaultSenderId);
    }

    @Override
    public boolean shouldUseInternetKernel() {
        return BuildVariantConstants.USE_INTERNET_KERNEL;
    }

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return MainApplication.this.getPackages();
        }
    };
}

Testing in js;

import React, { Component } from 'react';
import {
    StyleSheet, View, Text, Button, NativeModules
} from 'react-native'
import { NavigationActions } from 'react-navigation'

import BaseComponent from '../base/BaseComponent'

console.log('NativeModules', NativeModules.RNIapModule, NativeModules.WixRNNotifications)

That prints

NativeModules undefined undefined

By the way I created a new project with ‘react-native init’. That works very well. What am I missing?

My package.json;

{
  "name": "Test1",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.8.1",
    "jest-expo": "24.0.0",
    "react-test-renderer": "16.0.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^24.0.0",
    "react": "16.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
    "react-native-easy-toast": "^1.0.9",
    "react-native-iap": "^0.1.10",
    "react-native-notifications": "^1.1.17",
    "react-native-scrollable-tab-view": "^0.8.0",
    "react-native-tab-navigator": "^0.3.4",
    "react-navigation": "^1.0.0-beta.21"
  }
}

#2

Hi @onka13 I think this problem might be related to the following posts:

Can you confirm if they are similar issues?

Thanks,
Shawn


#3

Hi @voshawn, thanks for reply. They are similar issues. I think we’ve exactly same problem Linking not working on Android after detached.


#4

Thanks for confirming! Just wanted to make sure it wasn’t just me. Unfortunately, I don’t have a fix and rolled back to APK 23 for now, but hopefully, others can chime in.


#5

@voshawn, I’ve just created a new crna project with sdk 23. Linking is working very well after detached the project for android. So the problem is about SDK 24.


#6

Hey everyone thanks for the report. I just pushed out a new build, if you run exp detach again you’ll get the new code. Can you let me know if that works for you?


#7

I’m on SDK 25 and having a crazy time trying to get linking native modules to work in a detached project (similar issue as above). Trying to use react-native-iap. The craziest part is that it worked at one point, but now it simply gives me “Undefined” and I can’t figure out what has changed. I can open a new topic if that is more appropriate, however this issue has ground us to a halt over the last few days.


#8

@brentj84062 will need more information if you want help debugging. Where are you getting “undefined”?


#9

Sorry for the lack of detail in my original post.

The undefined value is coming back when looking at NativeModules. A fresh exp init and exp detach works fine when installing the module in question, and at some point my own project worked fine (initially an expo app but had to detach for in-app purchases), but I cannot isolate where the breakdown is and why it doesn’t seem to get anything for NativeModules.


#10

I have the same issue as @brentj84062 in a fresh exp init and exp detach project


#11

I noticed this problem occurs when an app first time after being started doesn’t connect to the packager. If I reload the app, it connects to the packager successfully, but for some reason reactPackages() method of ShellAppActivity is invoked instead of MainActivity's method reactPackages(). ShellAppActivity.reactPackages() returns null, thus no external package is injected.


#12

I narrowed it down to the AndroidManifest.xml file. I’m no Android expert, nor do I know the difference between ShellAppActivity vs MainActivity, however I fixed it by using MainActivity as the activity targeted by the activity that uses deep-linking schemes. This thread has more information on how I solved the issue.

Could this be a bug in Expo?


#13

Could you help me when I am using sdk27, but however the problem about Link Native Modules problem is still exists in sdk27. I get undefined when I link react-native-tcp the “NativeModules” still has the problem.
Could you please share me the solution about this problem? Sincerely. Thank you.


#14

@123wangssss I’m using sdk27 and everything is ok for me. You can use these versions. Here’s my config;

package.json

“devDependencies”: {
“jest-expo”: “~27.0.0”,
“react-native-scripts”: “1.14.0”,
“react-test-renderer”: “16.3.2”
},

“dependencies”: {
“expo”: “^27.0.1”,
“react”: “16.3.1”,
“react-native”: “https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz”,
}

app.json
“expo”: {
“sdkVersion”: “27.0.0”,