Support in Expo SDK 48

[Riza Hassan]

Hi everyone,

react-native-skia is supported in Expo starting Expo SDK 46. I am trying to get react-native-graph working in my Expo app (Expo SDK 48) but am not successful at that. Can someone create a Snack example to get it working?

Thanks!

[Colin Franceschini]

im running into the same issue i think. Running expo 48.0.5. I am able to get example code to run visually, BUT i am not able to move the selectionDot.

is this the same issue you are dealing with?

[Riza Hassan]

@colinfran I can't get my project to show the graph visually. Can you share the example code with me?

[Colin Franceschini]

https://github.com/colinfran/react-native-crypto-wallet

• Run app with npx expo start(I've only ran it on iOS. Also I've only ran it in dark mode, so to see it correctly render make sure you set the phones default theme to dark mode)
• once app has opened, Press "Create Wallet", then follow the steps to add a wallet.
• when your wallet is created it will take you to a screen with the bottom navigation, you should see the graph render on the wallet screen.

[Colin Franceschini]

I was able to get everything to work, including selectionDot. See my above app for an example of running this package running with expo 48.0.5.

[Art Kullashi]

Make sure your points have different date values, otherwise the graph doesn't render.
Example:
const dataPoints = [ {value: 10, date: new Date(1675904400000)}, {value: 20, date: new Date(1675990800000)} ]

[Joelis57]

@colinfran How exactly did you solve the SelectionDot not moving? As though your included sample is very helpful, it's also large and it's not exactly clear what specifically solves the issue.

[Art Kullashi]

@Joelis57 Try wrapping your entire view where your graph is with a GestureHandlerRootView imported from react-native-gesture-handler

[Colin Franceschini]

@Joelis57 honestly this package gave me a headache. Although it worked, i was having so many issues with it.

if you want an almost issue free experience, use https://github.com/coinjar/react-native-wagmi-charts, it’s what I’m using now. Its documentation is amazingly helpful.

Im using it exactly how the example in this repo.

[Joelis57]

@ArtKullashi Thanks for this, completely missed this! But even after adding it, it did not solve the issue.

@colinfran Thank you for the suggestion, probably will try to switch if I'm not able to solve my current issues, but I'd still prefer to use skia if possible. Thanks again for a viable alternative!

[Kasra Ghasemi]

In my case I have a weird issue with these versions:

    "@shopify/react-native-skia": "0.1.182",
    "expo": "~48.0.9",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.6",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-graph": "^1.0.1",
    "react-native-reanimated": "~2.14.4",

I am using the exact same data in the example app and my own app:

export const POINTS = [
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 0),
    value: 1,
  },
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 1),
    value: 5,
  },
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 2),
    value: 10,
  },
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 3),
    value: 3,
  },
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 4),
    value: 10,
  },
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 5),
    value: 6,
  },
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 6),
    value: 0,
  },
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 7),
    value: 35,
  },
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 8),
    value: 19,
  },
  {
    date: new Date(new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * 9),
    value: 0,
  },
]

Below you can see the rendering in the example app and my app:

Example App	My App (The plot is not correct)

I don't know which version of react-native-graph the example uses. But in my case (you can see the versions above), it renders wrong!

[Jeff]

I also can only get the graph to render but gestures are not working on expo 49