Error following getting started instructions:

[Nathan-PureCoding]

Hi, I'm trying to get Victory Native XL to work. After following the instructions in 'getting started' I'm getting this error in the console:

TypeError: Cannot read properties of undefined (reading 'XYWHRect')
at Object.XYWHRect (XXXX\node_modules@shopify\react-native-skia\lib\module\skia\web\JsiSkia.js:72:47)
at anonymous (XXXX\node_modules@shopify\react-native-skia\lib\module\skia\core\Rect.js:7:15)
at CartesianChart (XXXX\node_modules\victory-native\dist\cartesian\CartesianChart.js:290:50)
at renderWithHooks (XXXX\node_modules\react-dom\cjs\react-dom.development.js:16305:18)
at mountIndeterminateComponent (XXXX\node_modules\react-dom\cjs\react-dom.development.js:20074:13)
at beginWork (XXXX\node_modules\react-dom\cjs\react-dom.development.js:21587:16)
at HTMLUnknownElement.callCallback (XXXX\node_modules\react-dom\cjs\react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (XXXX\node_modules\react-dom\cjs\react-dom.development.js:4213:16)
at invokeGuardedCallback (XXXX\node_modules\react-dom\cjs\react-dom.development.js:4277:31)
at beginWork$1 (XXXX\node_modules\react-dom\cjs\react-dom.development.js:27451:7)

And this log:

The above error occurred in the component:
at CartesianChart (XXXX/node_modules%5Cexpo%5CAppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:115774:7)
at div
at XXXX/node_modules%5Cexpo%5CAppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:34875:27
at Graph
at div
at XXXX/node_modules%5Cexpo%5CAppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:34875:27
at App (XXXX/node_modules%5Cexpo%5CAppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:49810:67)
at withDevTools(App)
at AppContainer (XXXX/node_modules%5Cexpo%5CAppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app:29714:7)

I'm just trying to get a simple chart to work, using expo environment. The code I'm using this:

import { View } from "react-native";
import { CartesianChart, Line } from "victory-native";

export default function Graph() {
    const DATA = Array.from({ length: 31 }, (_, i) => ({
        day: i,
        highTmp: 40 + 30 * Math.random(),
      }));
  return (
    <View style={{ height: 300 }}>
      
      <CartesianChart data={DATA} xKey="day" yKeys={["highTmp"]}>
      {({ points }) => (
          
          <Line points={points.highTmp} color="red" strokeWidth={3} />
        )}

      </CartesianChart>
    </View>
  );
}

Is this an expo error or something in victory Native XL, or is my installation somehow not working properly? Any help in pointing me in the right direction would be so appreciated.

[EmilioP94]

I have the exact same issue. No replies on here, guess I will use another lib where the basic setup instructions don't immediately crash

[keithluchtel]

Can you post your code sample you're using and running into issues with? There's also the example app within the repo that you can reference and run locally using Expo Go to try out the demos.

[EmilioP94]

The code posted above is what I am using, copied and pasted from the Getting Started page of the docs: https://commerce.nearform.com/open-source/victory-native/docs/getting-started#add-a-line-to-the-chart

I installed the dependencies (yarn add react-native-reanimated react-native-gesture-handler @shopify/react-native-skia ), the lib (yarn add victory-native), imported what is needed (import { CartesianChart, Line } from 'victory-native'; in my imports) and wrapped the provided code in a simple div inside of an already existing page of my app, which properly compiles before adding the chart code:

[...] represents voluntarily omitted lines of code for the purpose of showing the code responsible for the issue

import { ActivityIndicator, ScrollView, StyleSheet, useWindowDimensions } from 'react-native';
import { CartesianChart, Line } from 'victory-native';
[...]
export default function ObservationResults() {
  [...]
  const { height: viewportHeight } = useWindowDimensions();
  [...]
  const DATA = Array.from({ length: 31 }, (_, i) => ({
    day: i,
    highTmp: 40 + 30 * Math.random()
  }));
  return (
      <ScrollView style={{ maxHeight: viewportHeight - 64 }}>
        <ThemedColumn xs={12} sm={6} lg={4}>
          <div style={styles.graphContainer}> // style is defined & working properly, not relevant to the current example
            <CartesianChart data={DATA} xKey="day" yKeys={['highTmp']}>
              {({ points }) => (
                <Line points={points.highTmp} color="red" strokeWidth={3} />
              )}
            </CartesianChart>
          </div>
        </ThemedColumn>
        <ThemedColumn xs={12} sm={6} lg={4}>
          [...]
        </ThemedColumn>
      </ScrollView>
    );
}

As soon as I navigate to the page containing this code, I am greeted with this error:

entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:147446 Uncaught TypeError: Cannot read properties of undefined (reading 'XYWHRect')
    at Object.XYWHRect (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:147446:60)
    at shopify_RectJs1 (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:149876:25)
    at boundsToClip (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:163522:63)
    at CartesianChartContent (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:88492:54)
    at renderWithHooks (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:188045:24)
    at mountIndeterminateComponent (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:192021:19)
    at beginWork (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:193324:22)
    at HTMLUnknownElement.callCallback (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:178301:20)
    at Object.invokeGuardedCallbackDev (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:178345:22)
    at invokeGuardedCallback (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:178402:37)
    at beginWork$1 (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:198305:13)
    at performUnitOfWork (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:197553:18)
    at workLoopSync (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:197476:11)
    at renderRootSync (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:197449:13)
    at performSyncWorkOnRoot (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:197141:26)
    at flushSyncCallbacks (entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:185138:28)
    at entry.bundle?platform=web&dev=true&hot=false&transform.routerRoot=src%2Fapp:196773:19

The relevant package.json information:

{
  "dependencies": {
    "expo": "~52.0.31",
    "expo-build-properties": "^0.13.2",
    "expo-constants": "~17.0.5",
    "expo-dev-client": "~5.0.11",
    "expo-font": "~13.0.3",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.17",
    "expo-splash-screen": "^0.29.21",
    "expo-status-bar": "~2.0.1",
    "expo-system-ui": "~4.0.8",
    "expo-web-browser": "~14.0.2",
    "@shopify/react-native-skia": "^1.11.8",
    "react-native-gesture-handler": "^2.24.0",
    "react-native-reanimated": "^3.17.0",
    "victory-native": "^41.16.1",
  }
}

Thanks for your quick reply!

[keithluchtel]

This could be an issue with the version of Skia that you are using within your Expo Go project. Expo Go is expecting a specific version of Skia.

Try running npx expo install @shopify/react-native-skia and see which version it gives you.

Another thing to check would be running npx expo install --fix to check if your other package version are what's expected.

[EmilioP94]

Hi,

Sadly, no luck. Running the first command installed the same version as above, the second one changed the version to 1.5.0 but it still crashes in the same way. It also downgraded react-native-reanimated to 3.16.1 and react-native-gesture-handler to 2.20.2.

[keithluchtel]

If you want to create a minimal reproduction repo, I can try taking a quick look.