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

[alz10]

What i did

1. npm install --save react-native-gesture-handler
2. react-native link react-native-gesture-handler
3. Edit my MainActivity
4. Edit my MainApplication
5. import { TapGestureHandler } from 'react-native-gesture-handler';
6. Got the error below

[alz10]

"dependencies": {
    "@expo/vector-icons": "^6.3.1",
    "axios": "^0.18.0",
    "firebase": "^5.0.3",
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-native-gesture-handler": "^1.0.4",
    "react-native-nested-scroll-view": "^6.0.1",
    "react-native-progress": "^3.4.0",
    "react-native-responsive-dimensions": "^1.0.2",
    "react-native-swiper": "^1.5.13",
    "react-native-text": "0.0.7",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.0.1",
    "watchman": "^1.0.0"
  }

[victorporof]

I had a similar issue. I'm using CocoaPods instead of react-native link.

Add this to your podfile:

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler/ios'

[alz10]

Hi i solved it now what i did was is to create a new RN project using react-native init nameOfYourProject and install the following:

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

and edit my MainActivity and MainApplication:

android\app\src\main\java\com\nameOfYourProject\MainActivity.java

package com.mlguide; // make sure you change it to your project's name, mine is com.mlguide 

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 {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "mlguide"; // this one too
    }

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

android\app\src\main\java\com\nameOfYourProject\MainApplication.java

package com.mlguide; // change it

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.oblador.vectoricons.VectorIconsPackage; // Remove this, this another library i use for my project
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

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(), // This one too
            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);
  }
}

[kmagiera]

Thanks for reporting @Albert0405 it looks like you've missed some setup steps (namely link command). Since you managed to resolve it I'm going to close this issue. If you think k there is something we can do to make setup instructions cleaner feel free to start a new issue

[victorporof]

@kmagiera Lots of people integrate React Native into an existing project instead of starting from scratch. This often means using CocoaPods instead of react-native link. Some instructions for this use case would probably help immensely, especially since the Podfile isn't in the root directory.

[kmagiera]

Thanks @victorporof, I well understand the importance of supporting people who rely kn cocoapods for pulling in their dependencies. I just thought react-native link works with cocoapods (I think since RN 52) so didn't see it to be necessary to add that to instructions.

There is a PR open that adds podfile to the root folder. Would that help if we put it there under a "standardized" name?

[alz10]

I would also like to suggest to update your documentation (Installation Guide). Make it beginner friendly. I was confused on Android part where you need to change some codes in it. It says:

Update your main activity (or wherever you create an instance of ReactActivityDelegate), 
so that it overrides the method responsible for creating ReactRootView instance. Then 
use a root view wrapper provided by this library:

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);
      }
    };
  }
}

I was like, What? Where can i find my main activity class? Im clueless so i googled it but it would be a time saver if you just include the location of that file just like what i did on my solution above

[kmagiera]

That's a great suggestions @Albert0405 would you be interested in updating the docs and sending a PR with that? If so I'd be more than happy to merge it

[0xpatrickdev]

Hey @kmagiera this was also a little unclear to me so I took a go at updating the docs

[anchetaWern]

I'm getting the same issue on iOS:

This is after doing react-native-link. So I decided to use cocoapods instead:

cd ios
pod init

Then I added the following to my podfile:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RNRealworldAnimations' do

  rn_path = '../node_modules/react-native'
  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: rn_path, subspecs: [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
  ]

  pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
  pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"

  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler/ios'
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

Executed pod install and ran the project again:

cd ..
react-native run-ios

Then I got the error:

`PickerIOS` does not exist in the Haste module map

Which was fixed by:

yarn start --reset-cache

But after that, I got the original error back.

Any ideas?

[kmagiera]

Sorry to hear it's happening to you too @anchetaWern

This problem has clearly to do with the library setup process and indicates that the native code is not being properly included and run in your app.

Unfortunately with the following details it is difficult for me to tell what's going wrong in your case. It seems like you should've run "pod install" or sth after adding stuff to Podfile (not sure if you did but it's not mentioned in your message).

The only advice that I have is to also check in other libraries as this problem is not specific to this one but rather to linking RN library with native code into your project in general. You could try adding some other library (such as react-native-permissions) and checking if it works. If you are familiar with xcode I'd suggest to look into the xcode project config and check if gesture handler library is added as dependency and being properly linked. If you are unfamiliar I suggest that you create a new RN project, link gesture handler with it and check if it works and if it does then try to find where the gesture handler library is listed in the project where it works vs your original project.

[ikzjfr0]

I got the similar problem on iOS, i tried both way (link and cocoapod)

[anchetaWern]

@kmagiera I wasn't really sure how to check if a module is linked in Xcode, so what I did was to just start a new React Native project and copied the existing code over. I skipped react-native link and just proceeded to using the Podfile that I used above.

@ikzjfr0 maybe that will solve your issue too. But this method requires you to manually link on Android.

[ikzjfr0]

@anchetaWern starting a new RN project does resolve the problem. However, my project is too big to easily just copying :)

[gao520sun]

Unhandled JS Exception: undefined is not an object (evaluating 'RNGestureHandlerModule.State')

[casper123]

I was also getting the same issue. What I did was delete the app from my iPhone simulator and then go to Hardware -> Erase all content & settings. After that I reinstalled the app and everything worked fine after that :)

[nshoes]

@casper123 Wow! Haha that worked for me, thanks. I have a relatively small RN project, followed the first code example on the react-navigation website, and hit this error. react-native link did not help.

[achmadk]

Manual linking with Xcode work for me. You can drag RNGestureHandler.xcodeproj into Libraries, then drag libRNGestureHandler.a into Build Phases > Link Binary with Libaries

[a-bayat]

i have this issue and solve using :

• npm install
• npm install --save react-navigation
• npm install --save react-native-gesture-handler
• react-native link this link

[harish-aka-shivi]

I am using RNGestureHandlerEnabledRootView as my root view in Android Activity. Ideally it should work because createRootView() also returns the same, but its not and it is throwing same error. Is there anything I can do?

[harish-aka-shivi]

I am following these instructions to integrate react-native to my existing app.

[harish-aka-shivi]

I solved it by adding RNGestureHandlerPackage() to the ReactInstanceManagerBuilder's list of packages, manually. @kmagiera Is this something that can be added in the documentation, particularly, for the cases when developer is adding react-native to the existing native android apps? I am happy to help.

[AntonioErdeljac]

My solution was to wipe out emulator data or try react-native run-android on a completely new emulator. I installed and linked react-native-gesture-handler while my emulator was active and I thought re-running run-android would reset all cache but the emulator app needs to be removed and data wiped out and then try again. Hope this helps someone.

[yangkezun]

My solution was to wipe out emulator data or try react-native run-android on a completely new emulator. I installed and linked react-native-gesture-handler while my emulator was active and I thought re-running run-android would reset all cache but the emulator app needs to be removed and data wiped out and then try again. Hope this helps someone.

thanks

[tandemloop]

Did react-native link, wiped data, cleared cache, updated packages, no go. Just using the copied example in starting react-native docs. What fixed it was @achmadk suggested. The file already existed in Libraries but it didn't exist in Build Phases...

[MIyulong]

I had a similar issue. I'm using CocoaPods instead of react-native link.

Add this to your podfile:

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler/ios'

as for me, it doesn't work, i get this [!] No podspec found for 'RNGestureHandler' in '../node_modules/react-native-gesture-handler/ios/',

[achmadk]

Change pod path for RNGestureHandler to ../node_modules/react-native-gesture-handler, @MIyulong

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

[MIyulong]

@achmadk Wow! Haha that worked for me, thanks.

[acro5piano]

I had the same problem in iOS, solved by manual installation:

• open node_modules/react-native-gesture-handler/ios/
• finder will show up
• drag the dir RNGestureHandler.xcodeproj to Libraries in the top of Xcode
• select only reference and create group if the dialog shows up
• follow @cmcaboy https://github.com/kmagiera/react-native-gesture-handler/issues/205#issuecomment-450504372

I think it is helpful if this alternative procedure is written in the document of Getting Started > Installation section.

[hichamnaimi]

If you are using react-link to link your dependencies: 1/ open your ios Podfile and delete all yout linked dependencies: pod 'xxxxxxx', :path => '../node_modules/xxxxx' 2/ Close Xcode 3/ In your /ios folder run "pod update" 4/ In your project source run "react-native link" 5/ Open Xcode and Clean Build Folder from Xcode Menu -> Product 6/ Run your application from Xcode 7/ Link manually the dependency "react-native-gesture-handler" into your Xcode Project following steps in documentation: https://facebook.github.io/react-native/docs/linking-libraries-ios 8/ Now run your application from Xcode, you should be fine.

[cmcaboy]

I was able to fix this by following @acro5piano's recommendation, but I had to also add libRNGestureHandler.a to General -> Linked Frameworks and Libraries section.

More or less, I had to manually link. react-native link did not work for my project.

[Akashsystematix]

Manual Mehod Will fix the issue.

[lchenfox]

I had a similar issue. I'm using CocoaPods instead of react-native link.

Add this to your podfile:

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler/ios'

it works for me, thx

[joydeep33]

I had a similar issue. I'm using CocoaPods instead of react-native link.

Add this to your podfile:

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler/ios'

What is pod file

[Aakash61212]

It is a used for adding third party

Refer https://cocoapods.org

[KGDeveloper]

手动链接Xcode为我工作。您可以拖动RNGestureHandler.xcodeproj到图书馆，然后拖动libRNGestureHandler.a到Build Phases > Link Binary with Libaries

Hello, I used this method, but still show this error

[vinaygode]

1. (As first stated by @achmadk) Add to Podfile: pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
2. It helped me to remove pods and reinstall: rm -rf Pods; pod install

[andresmtz98]

Nothing from these workarounds work for me :/

[Ovi]

I was having same problem in Android Emulator Here's what I did

• Deleted node_modules

• npm install (or yarn install if you're using yarn)

• npm install --save react-navigation (or for yarn yarn add react-navigation)

• npm install --save react-native-gesture-handler (yarn: yarn add react-native-gesture-handler)

• Open YourApp > android > app > build.gradle into dependencies block add the following line

implementation project(':react-native-gesture-handler')

• Open YourApp > android > settings.gradle add following lines

include ':react-native-gesture-handler' project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

[mdbaniani]

If you are using react-link to link your dependencies: 1/ open your ios Podfile and delete all yout linked dependencies: pod 'xxxxxxx', :path => '../node_modules/xxxxx' 2/ Close Xcode 3/ In your /ios folder run "pod update" 4/ In your project source run "react-native link" 5/ Open Xcode and Clean Build Folder from Xcode Menu -> Product 6/ Run your application from Xcode 7/ Link manually the dependency "react-native-gesture-handler" into your Xcode Project following steps in documentation: https://facebook.github.io/react-native/docs/linking-libraries-ios 8/ Now run your application from Xcode, you should be fine.

after hours, only this worked for me

[axdamx]

@AmirhosseinBayat tricks does solved the problem! Thanks bro!

[FadiAboMsalam]

@achmadk finally after spending many hours linking manually solved the issue for me thanks a million

[Dhirajbhujbal]

Manual Integration of the Navigation project resolved this issue. 2 options we can use pods or we can do the manual integration.

PS: This will occur only v3.0

[ggoldens]

I've spent many hours on this. Using pods worked to me.

[AGPatel]

Yes i got it , you need to change the setting.gradle from android

from->

include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-gesture-handler\android')

to ->

include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

if you install anything from npm install... so first check the setting.gradle and it's same like backward slash( \ ) so change to forward slash ( / )

[Nizzam123]

I had tried all the solution given above. But I still failed and getting this error.

This is my env : "react": "16.6.3", "react-native": "0.58.5", "react-native-gesture-handler": "^1.0.16", "react-navigation": "^3.3.2"

npm : v6.8.0

Appreciate any help. Thanks.

[Dhirajbhujbal]

@Nizzam123 try to manual integration of the navigation lib.

[Nizzam123]

@Dhirajbhujbal I did it, plus also reinit the native project and install the library, the result still same. Sigh.

[Dhirajbhujbal]

follow the below step

install react-native-navigation lib 3.0 1 npm install --save react-navigation 2 npm install --save react-native-gesture-handler 3 react-native link

check whether all configuration is fine or not if still getting the same issue then you might be missing so the configuration so after step 2 try to add RNGestureHandler.xcodeproj to your lib. a folder in the Xcode then add libRNGestureHandler.a file into 'Link Binary With libraries' also in the build setting put header Search path as '$(SRCROOT)/../node_modules/react-native-navigation/lib/ios'.

and clean the Xcode and try to build again hope this will work

Thanks, Dhiraj

[RicardoBer]

In iOS

Add this to your Podfile

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

Remove "Pods" folder located into "ios" Directory

then >pods install

Finally reboot your mac, yes, I'm think that it is a joke but no, restart your mac.

This works for me.