React Native SVG - Gesture Handler - not working in Dev Client?

Expo Development Tools
, ,
1

This is similar to a long standing problem I have been facing for the past few months. React-Native-SVG seems to be having issues with Expo. Issue with react-native-svg 13.6.0 (Android) - #25 by wodin

After finding a workaround for that (go to package json and change the react native svg to 12.3 : “react-native-svg”: “12.3.0”, then run: expo cli 45) , it finally worked - on Expo Go.

I noticed that a new issue pops up when I use the Expo Dev Client - which is " Invariant Violation: requireNativeComponent: “GestureHandlerRootView” was not found in the UIManager".

I do not understand why this is happening, or what to do. I have tried installing gesture handler root view again, but it didn’t work.

2

Hi @atangaexpo

That is not a case of “react-native-svg having issues with Expo”. It’s a case of you using a dependency that wants a later version of react-native-svg than the Expo SDK version you’re using wants.

I don’t think you should have to use a non-default version of expo-cli

This could possibly be caused by installing a version of react-native-gesture-handler that is not compatible with the version of the Expo SDK you’re using.

Could you elaborate on what you mean by this? What did you do and how did you do it?

3

What I am doing is working for Expo Go, though. It’s Expo-Dev that isn’t working. So I am not sure how to resolve this discrepancy with that Expo-Dev wants and what the dependency wants.

This is what I did when installing gesture-handler:

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

I might try installing an older version

4

As per the installation instructions you should install it as follows:

expo install react-native-gesture-handler

5

I used this:
“react-native-gesture-handler”: “^2.5.0”,

And it worked. The app loaded up. But when I go to the part of the app that requires it, I get:

"There was a problem loading the project.

java.lang.Double cannot be cast to com.facebook.react.bridge.ReadableMap"

So I can either try to fix that (as I have had it in the past) or I can just install gesture handler the way you showed.

EDIT: So I tried the “expo install react-native-gesture-handler” and now I am just getting the same error I got before

image
image864×79 1.07 KB

6

Please post your dependencies and devDependencies from package.json and also the plugins section from app.json if you have any config plugins in app.json.

Also, please post some minimal code to show how you’re using react-native-gesture-handler.

7

dependencies and devDependencies from package.json

  "dependencies": {
    "@expo-google-fonts/inter": "^0.2.2",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/datetimepicker": "6.1.2",
    "@react-navigation/material-top-tabs": "^6.3.0",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@react-navigation/stack": "^6.2.1",
    "@reduxjs/toolkit": "^1.9.1",
    "expo": "^45.0.0",
    "expo-app-loading": "~2.0.0",
    "expo-dev-client": "~1.0.1",
    "expo-font": "~10.1.0",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "firebase": "^9.16.0",
    "jssoup": "^0.0.15",
    "pod-install": "^0.1.37",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-animated-spinkit": "^1.5.2",
    "react-native-dynamic-search-bar": "^2.0.2",
    "react-native-dynamic-vector-icons": "github:WrathChaos/react-native-dynamic-vector-icons#expo",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-gifted-charts": "1.2.41",
    "react-native-haptic-feedback": "^1.14.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-pager-view": "5.4.15",
    "react-native-reanimated": "~2.8.0",
    "react-native-root-toast": "^3.4.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-svg": "12.1",
    "react-native-tab-view": "^3.3.0",
    "react-native-wagmi-charts": "^2.2.0",
    "react-native-web": "0.17.7",
    "util": "^0.12.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },

I do not have any plugins in app.json.

Pretty much all my uses of Gesture Handler were actually in instances where I was using FlatList, or occasionally Touchable Opacity. It was sprinkled throughout the app.

The error specifically pops up with component that uses React-Native-Gifted Charts. If I delete that line that the component is in in the render() method, it no longer occurs. So it seems like React-Native-Gifted-Charts is causing this issue

8

OK. Then I suggest you contact the RN Gifted Charts project to see if they have any ideas