Victory-native: Performance good on iOS simulator, poor on iOS device

[ericketts]

The Problem

I have a data set with 100 points, which I'm rendering like so:

<View style={styles.container}>
  <VictoryChart
    width={width}
    theme={VictoryTheme.material}
    containerComponent={<VictoryZoomContainer zoomDimension="x" />}
  >
    <VictoryLine data={someData} y="someDataMember" />
  </VictoryChart>
</View>

This looks and performs fantastic on the iOS simulator.

However when running on an iOS device (in this case the iPhone 6S, which is a fairly recent and reasonably powered device), the panning and zooming is very laggy and choppy, even when building the react-native app in release mode.

The question

Is this simply due to the fact that the simulator has access to all the resources (processor, memory) of the laptop on which it is run, or is there some configuration that can be performed to optimize the experience on the device?

As I said previously, the experience is excellent on the simulator, and Victory provides a great, clean abstraction that I would hate to re-invent if the device performance issue can be rectified.

Reproduction

Not applicable

Edit: fix code formatting, some explanation tweaking

[SpencerAung]

I am having exactly the same issue. Just subscribed to this thread if there are any fixes coming.

[ericketts]

@susuaung for an immediate/interim solution, we've chose to go with react-native-charts-wrapper, which is a react-native binding to MPAndroidChart and Charts on Android and iOS respectively.

[SpencerAung]

I found a solution. It run smooth once I reduce the data set. Initially my data was an array of 385 points. Since I need to use log scale, I extract the points for one circle and repeat it. In that way, my data is reduced to an array of points [{ x: 0, y: 10 }, { x: 96, y: 1}, {x: 96, y: 10}, ... ]. The current max array length is only 9.

[ericketts]

unfortunately that is far too small a data set to be practical for our use case, glad to hear it works for you though 😃

[AbdallaElabd]

@ericketts We're running on Expo, so we're basically stuck with victory-native. I subscribed to the issue in case something comes up.

[ericketts]

@AbdallaMohamed if the data visualisation is important enough to your app, you can eject to ExpoKit to use native libs (I personally am not a fan of expo, a bit too much everything-and-the-kitchen-sink jquery-esque for my taste, I'd rather pull in focused dependencies as needed -- not to mention that exp convert is broken, just remove it if it doesn't work).

[AbdallaElabd]

@ericketts so far, Expo's pros have outmatched its cons for us and charts are not a must-have at the moment. I was just trying to render a chart with a width larger than the screen's width and enable horizontal scrolling, but I haven't had much luck. Would appreciate any help though!

[prcbass]

Currently experiencing this issue with a chart composed of ~100 data points. I have a Victory Line inside a Victory Group with a VictoryVoronoiContainer as a container component. This is very very unfortunate as I get good/great behavior on the simulator and completely unusable performance on my iPhone 6.

I initially thought it was a problem with the Debug build and the bundling process, but after serving a pre-bundled bundle and running a Release build on my device the extremely poor performance persists.

At the moment the only avenues I have available to me are to continue tinkering with the build process or to use a completely different library, thereby nullifying a week's worth of work.

A comment from a contributor, member, or owner would be extremely appreciated

[ryan-roemer]

Can we get a minimal repository with install + build + error reproduction steps to allow our engineers to see / reproduce what y'all are seeing? Thanks!

[prcbass]

Thank you for the reply @ryan-roemer. I am currently in the process of creating a minimal repository for your team so that they may take a closer look at this. In the meantime I have created two gifs of the same application built for Release, the first one is on the simulator and the second one is on a physical device (iPhone 6). I am performing the same action of panning left and right in both gifs.

[prcbass]

@ryan-roemer Please find the example repository at the following link: https://github.com/prcbass/react-native-stock-chart

Please let me know if you have any questions. I very much look forward to seeing the progress on this issue (if there is one)

[shaoliangzhong]

Experiencing the same issue. Is there a way to use native acceleration for these animation related problems?

[boygirl]

We are now tracking all performance related issues from a single issue here: https://github.com/FormidableLabs/victory-native/issues/369

[matthewkwong2]

This is kind of expected because of iOS simulator uses DESKTOP HARDWARE to render your app. i.e. you are essentially running an iOS app on desktop.

While Android emulator "emulates" the performance on a phone.

[bitpit]

@matthewkwong2

Is this simply due to the fact that the simulator has access to all the resources (processor, memory) of the laptop on which it is run

hur dur