React-native-gesture-handler: [Android] Trying to use this library with wix/react-native-navigation throws error: `undefined is not an object (evaluating 'RNGestureHandlerModule.State')`

[ghoshabhi]

Thank you for putting together this awesome library 👍

I am facing a small issue while integrating it with react-native-tab-view and wix/react-native-navigation. I raised an issue to here.

I was checking the logs inside Android Studio and get an error saying:

undefined is not an object (evaluating 'RNGestureHandlerModule.State')

Relevant stack trace:

03-05 08:42:30.000 12426-12426/com.tabview_example E/unknown:ReactNative: Unable to display loading message because react activity isn't available

03-05 08:42:31.277 12426-12456/com.tabview_example E/ReactNativeJS: undefined is not an object (evaluating 'RNGestureHandlerModule.State')

03-05 08:42:31.282 12426-12426/com.tabview_example E/unknown:ReactNative: Unable to launch redbox because react activity is not available, here is the error that redbox would've displayed: undefined is not an object (evaluating 'RNGestureHandlerModule.State')

03-05 08:42:32.459 2120-2254/system_process E/TaskPersister: File error accessing recents 
directory (directory doesn't exist?).

Here's the example repo with the change: https://github.com/ghoshabhi/rn-tabview-problem/commit/9d5b1eed6c8ab2adf716094e76a868fa44b016b0

When I run the app - I see a blank white screen with no error (you can see that in the first line of the error trace I have shared)

I am wrapping my navigation screens with the gestureHandlerRootHOC component too.

Am I missing something here ?

react-native: v0.54.0
react-native-gesture-handler: v1.0.0-alpha.41
react-native-tab-view: v0.0.74
react-native-navigation: v1.1.397

[AndrewJack]

I've added some comments on the commit you linked.

You haven't added the package to the MainApplication.java or the required code to MainActivity.java
https://github.com/ghoshabhi/rn-tabview-problem/blob/master/android/app/src/main/java/com/tabview_example/MainApplication.java#L22

That'll probably fix your issue.

The example code might help - https://github.com/kmagiera/react-native-gesture-handler/tree/master/Example/android/app/src/main/java/com/swmansion/gesturehandler/react/example

[ghoshabhi]

@AndrewJack : Thanks for looking into it. I thought react-native link would've done it! I will try out manual linking anyways.

[qasimalbaqali]

@ghoshabhi I'm getting the same error, have you solved it?

[ghoshabhi]

@qasimalbaqali : No I did not get time to try it back out again. Here is a sample repository: https://github.com/ghoshabhi/rn-tabview-problem for you to play around.

If you're using react-native-tab-view I got around it using TabViewPagerPan from the package itself:

renderPager = (props: any) => <TabViewPagerPan {...props} />;

render() {
  return (
      <TabViewAnimated
          .....
          renderPager={this.renderPager}
        />
   )
}

[Apak00]

That didn't work for me @AndrewJack am I missing something?
`
import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import com.oblador.vectoricons.VectorIconsPackage;

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

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

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

    @Override
    protected String getJSMainModuleName() {
        return "index";
    }
};

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

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

}`

[AndrewJack]

@Apak00 you also need to add some code to the MainActivity - https://github.com/kmagiera/react-native-gesture-handler#installation

// Don't forget imports
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  // Add the following method to your main activity class
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

[osdnk]

This issue seems to be inactive
@ghoshabhi, If you still face any problem, let us know

[alz10]

Im having this problem. After i install 'react-native-gesture-handler' and link it

undefined is not an object (evaluating 'RNGestureHandlerModule.State')

I also tried to change what's on my Android MainActivity and MainApplication and im still facing the same problem. The problem gone when i do not import the plugin inside my code

[91ranjan]

Same here with wix/react-native-navigation the MainActiveity needs to be extended with SplashActivity. When i do
@Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; }
It says @overrideing a function not defined in the super class.

There was another issue with the wix which got resolved recently that would not let the red screen load. I applied that fix too. Just for reference to others.

https://github.com/wix/react-native-navigation/pull/2801#issuecomment-394278656

Please let me with any patch or solution.
Also not sure how to open this issue.
@osdnk @AndrewJack

[AndrewJack]

Looks like SplashActivity doesn't extend ReactActivity.

You should add this method to the activity that extends ReactActivity, assuming wix/react-native-navigation supports that?

[91ranjan]

Thanks, @AndrewJack for the quick reply :)

Still waiting for their answer but for the time being is there any workaround?

Also is the above error only due not able to add this code to Main Activity because of the SplashActivity issue?

[AndrewJack]

Looks like this issue was solved in #35

Here's the docs: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation

[91ranjan]

Yeah ... But there is no solution as I can find there. The file referenced there "https://github.com/kmagiera/react-native-gesture-handler/blob/master/NATIVE_NAVIGATORS.md"
is not more valid.

Already using the above solution. Wrapping each screen

Navigation.registerComponent('Home', () => gestureHandlerRootHOC(Landing), store, Provider); Navigation.registerComponent('Login', () => gestureHandlerRootHOC(Login), store, Provider); Navigation.registerComponent('Search', () => gestureHandlerRootHOC(Search), store, Provider);

[jiahaoChen]

@91ranjan
you can checkout the branch to 1.0.0-alpha.32 to find the NATIVE_NAVIGATORS.md,
but, I follow the document still have problem.
I get this error

[latir]

@91ranjan @AndrewJack was this issue ever resolved? Having the same problem now after adding gestureHandlerRootHOC to relevant screens.

[Tsektiantoro25]

help

[OmgDef]

To make it work you need to modify MainApplication.java.

First, import the library :
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
Second, modify getPackages method. It should look like this:

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

[im-hamza-dev]

For React Native, follow these steps

1. remove node_modules and package-lock.json

2. npm install

3. npm install --save react-navigation

4. npm install --save react-native-gesture-handler

5. react-native link

[betasve]

Exactly the same problem for me. Tried everything described here and on another 100 places on SO. Still the same error.
In my case it just does not work with "react-navigation@^3.0.9", when I switch to "react-navigation@^2" it seems to be working properly.

Maybe this problem is constantly re-appearing when both libraries did not yet catch each others' latest versions.

[JohnnyDevX]

Same problem on a very simple Wix Navigation app with the lib (and react-native-tab-view)

[JohnnyDevX]

Ok fixed it!

1. In MainApplication.java 2 changes:

...

import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; // <-- change 1

...

protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    // eg. new VectorIconsPackage()
    new RNGestureHandlerPackage() // <-- change 2
  );
}

...

1. And follow these steps: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation

I think we can close the issue.

Thank you for the library Magiera!

[osdnk]

This issue appears to be resolved. Thanks!
I think it's covered by an example here: https://github.com/henrikra/nativeNavigationGestureHandler/blob/master/android/app/src/main/java/com/nativenavigationgesturehandler/MainApplication.java