I followed the steps mentioned in the victory-native documentation.
Installed dependencies:
yarn add react-native-reanimated react-native-gesture-handler @shopify/react-native-skia
Added "react-native-reanimated/plugin" to plugins list in babel.config.js config file.
Then installed victory-native:
yarn add victory-native
When I run my app in iOS simulator with the sample code present on the same doc site, I get error saying:
TypeError: Cannot read property 'S' of undefined
Sample Code:
import React from "react";
import { View } from "react-native";
import { CartesianChart, Line } from "victory-native";
const DATA = Array.from({ length: 31 }, (_, i) => ({
day: i,
highTmp: 40 + 30 * Math.random(),
}));
export function TestChart() {
return (
<View style={{ height: 300 }}>
<CartesianChart data={DATA} xKey="day" yKeys={["highTmp"]}>
{({ points }) => (
<Line points={points.highTmp} color="red" strokeWidth={3} />
)}
</CartesianChart>
</View>
);
}
My package.json dependencies list:
{
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-brands-svg-icons": "^6.5.1",
"@fortawesome/free-regular-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/pro-light-svg-icons": "^6.5.1",
"@fortawesome/pro-regular-svg-icons": "^6.5.1",
"@fortawesome/pro-solid-svg-icons": "^6.5.1",
"@fortawesome/pro-thin-svg-icons": "^6.5.1",
"@fortawesome/react-native-fontawesome": "^0.3.0",
"@gorhom/bottom-sheet": "5.1.2",
"@hookform/resolvers": "^2.9.1",
"@notifee/react-native": "^7.8.2",
"@react-native-async-storage/async-storage": "1.21.0",
"@react-native-clipboard/clipboard": "^1.14.1",
"@react-native-community/datetimepicker": "8.2.0",
"@react-native-community/slider": "4.5.5",
"@react-native-cookies/cookies": "^6.2.1",
"@react-native-firebase/app": "^20.5.0",
"@react-native-firebase/messaging": "^20.5.0",
"@react-native-menu/menu": "^1.1.7",
"@react-native-picker/picker": "2.11.0",
"@react-navigation/bottom-tabs": "^6.5.11",
"@react-navigation/material-top-tabs": "^6.6.5",
"@react-navigation/native": "^6.1.9",
"@react-navigation/stack": "^6.3.20",
"@shopify/react-native-skia": "^2.2.3",
"@shopify/restyle": "^2.4.2",
"add": "^2.0.6",
"axios": "^1.6.5",
"decimal.js": "^10.4.3",
"expo": "^52.0.0",
"expo-camera": "16.0.14",
"expo-status-bar": "~2.0.1",
"formik": "^2.4.5",
"i18next": "^23.7.16",
"json-logic-js": "^2.0.5",
"lottie-react-native": "^6.0.0",
"moment": "^2.30.1",
"moment-timezone": "^0.5.44",
"normalizr": "^3.6.2",
"react": "18.3.1",
"react-hook-form": "7.32.2",
"react-i18next": "^14.0.0",
"react-native": "0.76.7",
"react-native-blob-util": "^0.21.3",
"react-native-calendars": "^1.1303.0",
"react-native-config": "^1.5.1",
"react-native-countdown-component": "https://github.com/reponame/react-native-countdown-component.git",
"react-native-device-info": "^10.12.0",
"react-native-document-picker": "^9.1.0",
"react-native-elements": "^3.4.3",
"react-native-fast-image": "^8.6.3",
"react-native-file-viewer": "^2.1.5",
"react-native-floating-action": "^1.22.0",
"react-native-gesture-handler": "^2.28.0",
"react-native-health": "^1.19.0",
"react-native-hyperlink": "^0.0.22",
"react-native-iap": "^12.16.2",
"react-native-image-crop-picker": "^0.41.2",
"react-native-keyboard-manager": "^6.5.11-2",
"react-native-linear-gradient": "^2.8.3",
"react-native-localize": "^2.2.2",
"react-native-modal": "^13.0.1",
"react-native-orientation-locker": "^1.6.0",
"react-native-otp-textinput": "^1.1.3",
"react-native-pager-view": "^6.4.1",
"react-native-pdf": "^6.7.7",
"react-native-permissions": "^4.0.4",
"react-native-reanimated": "~3.16.7",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^4.12.0",
"react-native-screens": "~4.2.0",
"react-native-segmented-control-tab": "^4.0.0",
"react-native-spotlight-tour": "^3.0.1",
"react-native-svg": "^15.8.0",
"react-native-svg-charts": "^5.4.0",
"react-native-tab-view": "^3.5.2",
"react-native-toast-message": "^2.2.0",
"react-native-track-player": "^4.1.1",
"react-native-vector-icons": "^10.1.0",
"react-native-video": "~6.9.1",
"react-native-webview": "13.6.4",
"react-native-wheel-picky": "^0.4.4",
"react-query": "^3.39.3",
"react-redux": "^7.1.3",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"reselect": "^5.1.0",
"valtio": "^1.13.0",
"victory-native": "^41.19.2",
"yarn": "^1.22.21",
"yup": "^1.3.3"
},
Any idea on how to resolve the error?
Updating react and react-native to latest version fixed the issue