I want to add a bar chart on my app using victory-native library, I tried the getting started guide as seen below and got this error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
I tried deleting node_modules and yarn.lock then do yarn install
but it still gives the error, if I remove the victory component code (ex. just add view and random text) it will show up without an error
My code
import React from "react";
import { StyleSheet, View } from "react-native";
import { VictoryBar, VictoryChart } from "victory-native";
export default function Homepage() {
const data = [
{ quarter: 1, earnings: 13000 },
{ quarter: 2, earnings: 16500 },
{ quarter: 3, earnings: 14250 },
{ quarter: 4, earnings: 19000 },
];
return (
<View style={styles.container}>
<VictoryChart width={350}>
<VictoryBar data={data} x="quarter" y="earnings" />
</VictoryChart>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f5fcff",
},
});
Dependencies
"expo": "~49.0.15",
"react": "18.2.0",
"react-native": "0.72.6",
"@shopify/react-native-skia": "0.1.196",
"react-native-gesture-handler": "~2.12.0",
"react-native-reanimated": "~3.3.0",
"react-native-svg": "13.9.0",
"victory-native": "^40.0.2",