Victory-native: Realtime charts with smooth scrolling

[udfalkso]

Has anyone managed to reproduce what Bostock is doing here:
https://bost.ocks.org/mike/path/

With Victory or Victory Native? Is this possible?

It seems like it should be doable with some fancy transitions, but I'm new to Victory so I thought I'd ask before diving into it.

Thanks!

[udfalkso]

I managed to get a pretty nice real-time line chart going. Performance is OK, but ideally there would be support for setNativeProps so that the new data could be appended without re-rendering the entire chart.

Here's the relevant animation bits here for anyone who may stumble on this later on:

  constructor(props) {
    super(props)

    this.slideAnim = new Animated.Value(0.0)
    this.slidePos = this.slideAnim.interpolate({
      inputRange: [0, 1],
      outputRange: [0.0, 0.0],
    })
  }

  addCurrentDataPoint = (updatedData) => {
    this.setState({
      data: updatedData,
    })

    //On each tick, reset the X translation immediately and then start a 1s slide again
    this.slideAnim.setValue(0)
    Animated.timing(this.slideAnim, {
      toValue: 1,
      duration: 1000,
      easing: Easing.linear,
    }).start()
  }

          <Animated.View
            style={{
              flex: 1,
              transform: [
                { translateX: secondWidth }, // Draw the newest point off screen for smooth disp.
                { translateX: this.slidePos }, //Animate the slide to the left
              ],
            }}
          >

[Yaweii]

@udfalkso you just saved my life! I am trying to build something like this and I've been getting stuck on this for days. Would you mind sharing the source code? I have some difficulties understanding the partial code.

[udfalkso]

@Yaweii It's been quite a while now so I don't really remember the particulars, and I ended up not using Victory in the end. But perhaps this will help:
https://gist.github.com/udfalkso/e00b34d91e34be00dcb4b87a22b7f596

I also ended up finding a much more performant native solution which you may find useful: SciChart

[Yaweii]

@udfalkso Thank you so much! I will take a look at this.