React-native-gesture-handler: Android 'react-native-gesture-handler' error

[lehang123]

When I follow the instruction by the react-navigation website : https://reactnavigation.org/docs/en/getting-started.html.

react-native link react-native-gesture-handler

and then change the MainActivity.java like it asks.

Then run react-native run-android, and error pop up :
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:

• react-native-gesture-handler (to unlink run: "react-native unlink react-native-gesture-handler")
  This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink " and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.

my react-native version :
react-native-cli: 2.0.1
react-native: 0.60.0

However, when I follow the instruction, to unlink the library
use : react-native unlink react-native-gesture-handler

The app successfully built, but now it pops up another error in the app :
null is not an object (evaluating 'rngesturehandlermodule.direction')
I tried a lot of solution in a lot of websites, like
https://github.com/kmagiera/react-native-gesture-handler/issues/494
https://stackoverflow.com/questions/52861437/undefined-is-not-an-object-evaluating-rngesturehandlermodule-state

non of them is working for me

[thymikee]

Hey! ~RNGH doesn't support autolinking in Android yet~. RNGH is compatible with autolinking, but still it needs some extra steps. What you need to do:

• if you have it manually linked already (e.g using link), run unlink:

react-native unlink react-native-gesture-hadnler

• adjust MainActivity.java, as said in Getting Started: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android
• make sure to run jetifier on "postinstall" step because RNGH not yet compatible with AndroidX
• if you build for iOS, make sure to install CocoaPods dependencies:
  sh cd ios && pod install

[himanshupadia]

facing same error in iOS, could anyone please help to resolve this issue.

[thymikee]

EDIT: both platforms work with autolinking, see https://github.com/kmagiera/react-native-gesture-handler/issues/671#issuecomment-508903588

@himanshupadia iOS should be working just fine with autolinking. If you get this error, it means that the CLI detected you have this lib manually linked. Here's what you can do to get it sorted out:

1. Update the @react-native-community/cli to the latest version.
2. Run:
   react-native unlink react-native-gesture-handler --platforms ios

[himanshupadia]

@thymikee Yes, in iOS it's autolinking, it's was working fine on last week but, on today, suddenly it's starting getting this error, bellow is dependencies.

"dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-navigation": "^3.11.0"
  }

I am new in this so I am following tutorial and performing operation.

Could you please share any link regarding your post/reply.
It would be great for me.

[xxRockOnxx]

@thymikee I think Step 5 should come before Step 2 because otherwise executing react-native link react-native-gesture-handler --platforms android won't do anything. At least for me it does that.

EDIT: I just realized if you put android in react-native.config.js it will disable the autolink for that. So instead, on step 2, put ios

[femiveys]

I also saw that if you disable something in react-native.config.js, it disables linking and autolinking.

So what should the steps be then?

[thymikee]

@xxRockOnxx @femiveys updated the comment accordingly, thanks!

[jivtesh813]

Below steps have worked for me. So I have captured those for myself, but hope will help someone. Although I can see that official documentation on React Navigation website is now changed. But if you stuck, follow below steps:

Steps to create React-Native app with React-Navigation

1. Create React Native app with below command. It is better if you open cmd as administrator, as one of the below jetifier commands might request that.
   react-native init AwesomeProject

2. Go into project by:
   cd AwesomeProject
   Note - All commands in below steps will be run from this project location

3. Install React Navigation and its handler by below 2 commands:
   npm install --save react-navigation

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

1. I have not followed next steps from React Navigation website, instead followed below steps
   Unlink for iOS with below command:
   react-native unlink react-native-gesture-handler --platforms iOS

2. Although it did nothing and i got the message below, which is ok.
   info iOS module "react-native-gesture-handler" is not installed

3. Create a file named react-native.config.js in the root directory of your project. Means in this case it will be under folder AwesomeProject, and this file will be adjacent to other files such as - package.json etc
   Add below code to the react-native.config.js file
   module.exports = {
   dependencies: {
   'react-native-gesture-handler': {
   platforms: {
   ios: null,
   },
   },
   },
   };

4. After saving above file, run below command:
   npm install --save-dev jetifier

5. Now go to project’s package.json file and add below code in Scripts section and save:
   "postinstall": "npx jetify"

Your package.json, should look like below:
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"postinstall": "npx jetify"
},

1. Now run below command:
   npm install

You should see something like this on console:
Jetifier found 893 file(s) to forward-jetify. Using 4 workers…

1. That’s it..Remember we haven’t changed MainActivity.java file, which was mentioned in ReactNavigation official site. That is not required. Just follow the above steps.

2. Now let’s test if React Navigation working. Add below code to your App.js

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
render() {
return (
Home Screen

);
}
}

const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
}
});

export default createAppContainer(AppNavigator);

1. Run below command:
   react-native run-android

It should run ok, but I got below error:
error: bundling failed: Error: Unable to resolve module ./createNavigationContainer

1. If you get above error as well, then delete all files from %TEMP% folder. OR you can use below command to clear cache.
   react-native start --reset-cache

For me clearing %TEMP% folder works.

GOOD LUCK!

[thymikee]

react-native-gesture-handler is compatible with autolinking. What you need to do:

• if you have it manually linked already (e.g using link), run unlink:

react-native unlink react-native-gesture-hadnler

• adjust MainActivity.java, as said in Getting Started: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android
• make sure to run jetifier on "postinstall" step because it's not yet compatible with AndroidX

cc @osdnk feel free to close this.

[doctor-mosbat]

react-native-gesture-handler is compatible with autolinking. What you need to do:

• if you have it manually linked already (e.g using link), run unlink:
  react-native unlink react-native-gesture-hadnler
• adjust MainActivity.java, as said in Getting Started: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#android
• make sure to run jetifier on "postinstall" step because it's not yet compatible with AndroidX

cc @osdnk feel free to close this.

react-native unlink react-native-gesture-handler

[Tbaut]

Building is still failing if I don't link manually:

 * What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 3s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/home/me/myApp/android/app/src/main/java/io/parity/signer/MainActivity.java:6: error: package com.swmansion.gesturehandler.react does not exist
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
                                         ^
/home/me/myApp/android/app/src/main/java/io/parity/signer/MainApplication.java:28: error: cannot find symbol
          new RNGestureHandlerPackage()
              ^
  symbol: class RNGestureHandlerPackage
/home/me/myApp/android/app/src/main/java/io/parity/signer/MainActivity.java:38: error: cannot find symbol
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
                           ^
  symbol: class RNGestureHandlerEnabledRootView
3 errors

FAILURE: Build failed with an exception.

I followed https://github.com/kmagiera/react-native-gesture-handler/issues/671#issuecomment-510890353.

• using [email protected].
• manually unlinked with react-native unlink react-native-gesture-handler.
• MainActivity.java is ajusted according to the guide.
• npx jetifier runs as postinstall.

[doctor-mosbat]

1)

yarn add react-navigation
# or with npm
# npm install react-navigation

2)

yarn add react-native-gesture-handler react-native-reanimated
# or with npm
# npm install react-native-gesture-handler react-native-reanimated

3) To finalize installation of react-native-gesture-handler for Android, be sure to make the necessary modifications to MainActivity.java:

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

4) Finally, run react-native run-android to launch the app on your device/simulator.

[tapz]

I'm also having this error and wonder how it can be so difficult to make this lib working.

error: package com.swmansion.gesturehandler.react does not exist
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

[tangtai]

@tapz I am having the same problem, when i upgrade to rn 0.60. i am since in the docs for react-native gesture-handler website they didn't say they support rn > 0.60 i wonder if we have to wait for the offical support.

[benkane]

@Tbaut I had the same issue. Notice there's a line in your error output referencing MainApplication.java. You need to remove the packages.add(new RNGestureHandlerPackage()); line from MainApplication. I was also able to remove the MainActivity code. In other words, autolinking worked fine

[raajnadar]

I updated my react native cli to latest alpha and followed the steps in this guide http://facebook.github.io/react-native/docs/navigation

yarn add react-navigation react-native-gesture-handler react-navigation-stack

Configure your router and react-native run-android

The autolinking worked in android (No extra setup needed in java files).

[rajathongal]

error: class, interface, or enum expected com.swmansion.gesturehandler.react.example;

getting this weird error
my MainActivity.java looks like this

package com.example
import com.facebook.react.ReactActivity;
package com.swmansion.gesturehandler.react.example;


import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "Travel_app";
  }
  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

my MainApplication.java looks like this
package com.example;
import com.imagepicker.ImagePickerPackage;
import com.facebook.react.shell.MainReactPackage;
import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import java.util.Arrays;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import com.swmansion.reanimated.ReanimatedPackage;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactRootView;
import android.os.Bundle;
import com.facebook.react.ReactFragmentActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.BuildConfig;

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() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new RNGestureHandlerPackage(),
            new ReanimatedPackage(),
            new ImagePickerPackage()); // <-- add this line
        };


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

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

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

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.travel_app.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

[jakub-gonet]

Should be resolved by properly set up autolinking in project.