How to really control the animation/bounce speed?

[HectorRicardo]

(Please download both .mov videos below, so you can see the bug. They are really short - 5 seconds each)

I found a use case in which the component is not behaving as expected:

const App = () => (
  <SafeAreaView style={styles.root}>
    <View style={styles.container}>
      <TextTicker>A long text that won't fit in a linei</TextTicker>
      <TextTicker>A long text that won't fit in a lineo</TextTicker>
    </View>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    width: 200,
    borderColor: 'black',
    borderWidth: 1,
  },
});

https://user-images.githubusercontent.com/16261233/108609384-20a4f380-7393-11eb-8c8c-4a205dda75e3.mov

As you can see, the first TextTicker moves way much faster than the second one If I put a bounceSpeed = 1000 on both of them, it makes them slower, but the first one is still faster than the second one.

https://user-images.githubusercontent.com/16261233/108609425-682b7f80-7393-11eb-96be-81fd81083638.mov

I understand that the total duration of the animation will change between both of them (because the first one is slighly shorter than the second one). My question is, how do I force them to be at the same speed?

[deanhet]

I've done a little bit of digging into this as it's a very strange bug (but thanks for reporting!). I can confirm the issue, how the text-ticker works is that it measures the text and sets the speed/animation duration based on the width of it. You can see that in the source with the references to this.distance.

Although the sentences look almost the same width here, one is reporting back with 17.66... and the other is 13. The code is working as intended here, even though it's not ideal behaviour.

You can use the duration prop to make them behave a bit more like you would expect. Would that be a suitable solution in this case?

[RobinBobin]

I think my issue is related to this one.