VictoryLine from Victory-Native not working in Expo

Question

I'm posting this stack overflow questions with an answer, so that hopefully no one else spends ages as I have being perplexed that Victory-Native Charts are not displaying correctly. It's so simple, yet so easy to miss.

When trying out the Victory-Native in an Expo app, I followed the installation instructions, and installed react-native-svg. DO NOT do this, Expo includes react-native-svg by default, and for some reason installing it again in your node_modules causes any svg components to not work in the charts.

If you installed react-native-svg, just follow the instrutions in this SO thread:

Can victory-native be used with expo?

Answer 1

If you have installed react-native-svg, just follow the instrutions in this SO thread:

Can victory-native be used with expo?

Answer 2

Using NativeBase as my UI framework, I am required to explicitly install react-native-svg as a dependency.

My solution is to use both "victory-native" and "victory". Since import statements cannot be dynamic/conditional in JS, this requires a bit of a workaround.

1. First workaround that I could not get working is to use aliasing in babel.config.js to switch "victory-native" to "victory" for web only. This means you "yarn add victory-native victory" such that you have both modules, and in the appropriate file you write "import {VictoryChart, VictoryBar } from "victory-native". The "victory-native" part will change to "native" on web. Again, I couldn't get this to work.

2. Second, slightly less elegant, workaround is to use React Native's platform specific code solution. At the bottom of the link it explains the file.js and file.native.js solution. You can use that to expose the module dynamically

So for example I have two files: victory.ts and victory.native.ts (ts for typescript). Inside of victory.ts is the following:

import * as Victory from "victory";

export default Victory;

It's the same for victory.native.ts, except it references "victory-native" in the import statement.

In the component using Victory Charts I have the following...

import V from "@utils/victory"; // @utils is just an alias

// some other code...

function Chart() {
  return (
    <View style={styles.container}>
      <V.VictoryChart width={350} theme={V.VictoryTheme.material}>
        <V.VictoryBar data={data} x="quarter" y="earnings" />
      </V.VictoryChart>
    </View>
  );
}