React-native-gesture-handler: Integrating in existing Android app, getting error null is not an object ( evaluating 'RNGestureHandlerModule.Direction)

[aprofromindia]

I am trying to integrate React Native in an existing Native App. I have been successful in integrating with iOS using CocoaPods and react native link. For Android I am getting the following error : -

null is not an object ( evaluating 'RNGestureHandlerModule.Direction)

I am following the FB tutorial for Android here

my package.json dependencies section : -

"dependencies": {
    "react": "^16.8.4",
    "react-native": "^0.59.1",
    "react-native-gesture-handler": "^1.1.0",
    "react-navigation": "^3.5.0",
    "react-redux": "^6.0.1"
  },

I have linked the RNGH following the guide here. I think the solution is the same as the comment here. But in FBs guide to integrate with existing Native App, they don't have a guide with how to integrate with libraries that have native code.

ReactMainActivity.java

public class ReactMainActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    private final int OVERLAY_PERMISSION_REQ_CODE = 10;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new RNGestureHandlerEnabledRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .setDefaultHardwareBackBtnHandler(this)
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // The string here (e.g. "MyReactNativeApp") has to match the
        // string in AppRegistry.registerComponent() in index.js
        mReactRootView.startReactApplication(mReactInstanceManager,
                "ReactApp", null);

        setContentView(mReactRootView);

        if (BuildConfig.DEBUG && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                        Uri.parse("package:" + getPackageName()));
                startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
            }
        }
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (!Settings.canDrawOverlays(this)) {
                    Toast.makeText(this, "Please enable System overlay display from settings", Toast.LENGTH_LONG).show();
                }
            }
        }
        mReactInstanceManager.onActivityResult(this, requestCode, resultCode, data);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

Application.java

public class App extends MultiDexApplication implements ReactApplication {

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

    @Override
    public ReactNativeHost getReactNativeHost() {
        return new ReactNativeHost(this) {
            @Override
            public boolean getUseDeveloperSupport() {
                return BuildConfig.DEBUG;
            }

            @Override
            protected List<ReactPackage> getPackages() {
                return Arrays.asList(new MainReactPackage(), new RNGestureHandlerPackage());
            }
        };
    }
}

The problem as I can determine is the Application::getReactNativeHost() method in the Application class implementing ReactNativeApplication, never gets triggered and hence I believe the native linking is failing.

Any help in this regard would be much appreciated.

[kpelelis]

Hey! I had the same problem, and it turns out I hadn't installed the RNGH pod.

1. Make sure there is an entry for RNGH in your ios/Podfile
2. cd ios && pod install

Let me know if that works :)

[andresmtz98]

Same problem :/

[ivl-sajid]

From Adb Log, Facing same problem,

[Info] 04-11 17:39:00.230 26819 26880 E ReactNativeJS: null is not an object (evaluating 'r(d[0]).NativeModules.RNGestureHandlerModule.Direction')


[Info] 04-11 17:39:00.230 26819 26880 E ReactNativeJS: null is not an object (evaluating 'r(d[0]).NativeModules.RNGestureHandlerModule.Direction')


[Info] 04-11 17:39:00.230 26819 26880 E ReactNativeJS: null is not an object (evaluating 'r(d[0]).NativeModules.RNGestureHandlerModule.Direction')


[Info] 04-11 17:39:00.276 26819 26880 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling runApplication)


[Info] 04-11 17:39:00.276 26819 26880 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling runApplication)


[Info] 04-11 17:39:00.276 26819 26880 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling runApplication)


[Info] 04-11 17:39:00.834 26819 26819 D ReactNative: ReactInstanceManager.detachViewFromInstance()
04-11 17:39:00.838 26819 26880 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling unmountApplicationComponentAtRootTag)


[Info] 04-11 17:39:00.834 26819 26819 D ReactNative: ReactInstanceManager.detachViewFromInstance()
04-11 17:39:00.838 26819 26880 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling unmountApplicationComponentAtRootTag)


[Info] 04-11 17:39:00.834 26819 26819 D ReactNative: ReactInstanceManager.detachViewFromInstance()
04-11 17:39:00.838 26819 26880 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling unmountApplicationComponentAtRootTag)

[dgoecke2]

Same problem. Trying to manually link vs auto link to see if that works.

[vevnkataSukumar]

Have you found a solution for this?

[maicolsantos]

Same problem

[jakub-gonet]

Duplicate of #494.