Issue with react-navigation-gesture-handler on iOS

jinkoay commented 4 years ago

[x] Review the documentation: https://docs.viromedia.com/
[x] Search for existing issues: https://github.com/viromedia/viro
[x] Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

Environment

Please provide the following information about your environment:

Development OS: Mac
Device OS & Version: iOS version (13.3)
Version: ViroReact version (2.17.0) and React Native version (0.59.9)
Device(s): What device(s) are you are seeing the issue on (iPhone 11.0 emulator)

Description

I keep getting this error: null is not an object evaluating _RNGestureHandlerModule.default.Direction on iOS when I try to use the react-navigation-stack with an app I created using the react-viro tool. This only happens when I try to run the app on my iOS emulator but the app works completely fine when I run it on my physical Android device.

Reproducible Demo

Steps I took:

1. react-viro init tester
2. ./setup-ide.sh --all
3. yarn add react-navigation
4. yarn add react-native-gesture-handler
5. yarn add react-native-safe-area-context
6. yarn add react-navigation-stack @react-native-community/masked-view
7. react-native link
8. yarn add --dev jetifier
9. add it to the postinstall script in package.json
    "postinstall": "jetifier -r"
10. yarn postinstall
11. react-native run-ios

I used react-navigation-stack in App.js.

I created a repo containing a sample app with the issue I mentioned. (I added my ios/Pods folder to .gitignore as it was too large.) https://github.com/jinkoay/viro-tester

I would really appreciate any help I can get on how to fix this. I have been stuck on this issue for over a week; it's been stalling progress for my group project :( I have tried a lot of the solutions mentioned in https://github.com/software-mansion/react-native-gesture-handler/issues/676 and https://github.com/software-mansion/react-native-gesture-handler/issues/494 but nothing has worked so far so I wondered if it has something to do with the way the Viro project is set up.

wude935 commented 4 years ago

+1 I "fixed" it by simply downgrading to React Navigation v2 and changing my code to match v2 documentation.

jinkoay commented 4 years ago

@wude935 Could you share the specific steps of what you did and how you downgraded it, and which specific version did you downgrade it to (i.e. 2.18.3)? Did you just change the version in package.json, delete the node-modules and run npm/yarn install? Also did you put the carat in front of the version number (ex. 2.x.x or ^2.x.x)? And did you uninstall the other modules like gesture-handler? Sorry for all the questions this just has been taking me way too long to figure out.

wude935 commented 4 years ago

I simply downgraded to the 2.18.2. To change it I simply ran yarn install react-navigation@2.18.2 and that changed my package.json for me. There is no carat in front of my package.json but I’m pretty sure it doesn't matter. I still have gesture-handler as a dependency but its not being used at all so you can probably remove it—I was just lazy.

jinkoay commented 4 years ago

Thanks so much, this seems to be the only solution that works for me. I'll use this for now but if anyone else has an alternative way that works with the latest version of react-navigation please let me know.

euphoriawolf commented 4 years ago

Thanks a lot for this solution. I battled with it for over 2 weeks. I tried every solution online but this is the only one that has worked. It's definitely because of the way viro is set up. The team should look into this

kosmos02 commented 3 years ago

@jinkoay I'm trying to make a viroreact project and the only and easiest way to incorporate a "homePage" or some type of navigation with it is to build it in the App.js file, like yours. I'm getting the exact same error as you when trying to introduce anything react native navigation. I've spent days trying to figure this out. The only solution for you was to downgrade your react navigation? my package.json file currently looks like this. where did you downgrade? I have a @react-navigation/native is that it? Thanks for any help.

{
  "name": "Portfolio",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "prestart": "./node_modules/react-viro/bin/run_ngrok.sh",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.7",
    "@react-navigation/native": "^5.9.2",
    "@react-navigation/stack": "^5.14.2",
    "link": "^0.1.5",
    "react": "16.8.3",
    "react-native": "^0.59.9",
    "react-native-gesture-handler": "^1.10.0",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.17.1",
    "react-viro": "2.17.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/runtime": "^7.12.5",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.65.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

viromedia / viro