Graph show empty

[vtantai99]

[chezhe]

Same here, building with expo

[IgnacioMadariaga]

I have the same issue, my steps to reproduce these bug:

Expo init <name-project>

yarn add [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)

after this, I added the react-native plugin into babel.config.ts

yarn add [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler)
yarn add [@shopify/react-native-skia](https://github.com/Shopify/react-native-skia)
yarn add react-native-graph

Later, in App.tsx, I added:

<LineGraph points={array: GraphPoint[]} isAnimated={false} color: '#fff' />

And these render a white panel

[chezhe]

This PR https://github.com/margelo/react-native-graph/pull/58 fixed this. I just remove the package and copy the files I need into my project, it works.

[IgnacioMadariaga]

@chezhe how u run the project? These solution didn't work for me

[chezhe]

@chezhe how u run the project? These solution didn't work for me

I just copied the files I need into my project, and change the line of this PR https://github.com/margelo/react-native-graph/pull/58/files#diff-06fd647238a64a5d74ab05762e14c45040bde793aa467df2686d9e3d71d72162L224

For you, you can use patch-package, after yarn install, change the file as above PR, and patch it.

Anyway, the package itself has bug, and that PR fixed it.

[edreyyo]

@chezhe @IgnacioMadariaga does react-native-graph work with Expo? I read it was unsupported because of Skia

[chezhe]

Expo supports Skia, you can find more info here https://docs.expo.dev/versions/latest/sdk/skia/

[IgnacioMadariaga]

@edreyyo I think should work, as @chezhe say before, I'm actually running a expo project using skia

[daginfinity]

Hi, @chezhe @IgnacioMadariaga I tried this solution by modifying the CreateGraphPath.ts file like below, I still have an empty graph. Did I miss something ? Maybe could you please provide an example array of 'points' ?

My Component:

const priceHistory = generateRandomGraphData(70);
// console.log(priceHistory);
// const priceHistory = [];

class StockLineChartNew extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <LineGraph
          points={priceHistory}
          //   animated={true}
          color="#4484B2"
          //   enablePanGesture={true}
          //   onGestureStart={() => hapticFeedback('impactLight')}
          //   onPointSelected={(p) => updatePriceTitle(p)}
          //   onGestureEnd={() => resetPriceTitle()}
        />
      </View>
    );
  }
}

The Node modules changes:

// Calculates how many points between two points must be
    // calculated and drawn onto the canvas
    const drawingFactor = pixelFactorX(
      point.date,
      range.x.min,
      range.x.max
    )

package.json

  "dependencies": {
    "@shopify/react-native-skia": "0.1.157",
    "expo": "~47.0.13",
    "patch-package": "^6.5.1",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-graph": "^0.3.0",
    "react-native-reanimated": "~2.12.0",
....
  },

[chezhe]

@daginfinity I didn't install this package, just copied those files I need. like this

[daginfinity]

@daginfinity I didn't install this package, just copied those files I need. like this

My project is in JS not TS. So it's complicated

[neo773]

If anyone is still facing this, the fix is to add width and height to the Chart component