Victory Native with Expo Go getting error "Objects are not valid as a React child (found: [object Error])"

Question

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

function MyChart() {
  return (
    <View style={{ height: 300 }}>
      <CartesianChart data={DATA} xKey="day" yKeys={['lowTmp', 'highTmp']}>
        {({ points }) => (
          <Line points={points.highTmp} color="red" strokeWidth={3} />
        )}
      </CartesianChart>
    </View>
  );
}

const DATA = Array.from({ length: 31 }, (_, i) => ({
  day: i,
  lowTmp: 20 + 10 * Math.random(),
  highTmp: 40 + 30 * Math.random()
}));

This is code copied directly from the victory native docs, aside from removing the font I have changed nothing. But when running in Expo Go I am frustratingly getting this error on my IOS device.

"Error: Objects are not valid as a React child (found: [object Error]). If you meant to render a collection of children, use an array instead."

I have looked around and it seems noone has had this problem before when using victory native. What is happening? Is victory-native simply not compatible with expo?

Answer 1

I tested your code on Expo snack and it works with expo go iOS.

Did you follow the Installation guide on vicory-native.

You must follow these steps:

1. Install peer dependencies:

yarn add react-native-reanimated react-native-gesture-handler @shopify/react-native-skia

2. Add "react-native-reanimated/plugin" to babel.config.js
3. Install victory-native:

yarn add victory-native