Show static text instead of animated text when contentFits is true

[bluenex]

I faced the problem when the text fits in container width. In that case I want the text just align on center by {textAlign: 'center'}. However this.setState({ animating: true }); is called even before this.calculateMetrics(); thus the static text with center aligned opacity is set to 0 and show ScrollView instead.

My proposal is to return promise from calculateMetrics, and instead of setTimeout we can chain then() to control what happens after.

this.setTimeout(() => {
        this.calculateMetrics();

        if (!this.contentFits) {
          Animated.timing(this.animatedValue, {
            toValue: -this.distance,
            duration: duration,
            easing: easing,
            useNativeDriver,
          }).start(({ finished }) => {
            if (finished) {
              if (loop) {
                this.resetAnimation();
              } else {
                this.stop();
                onMarqueeComplete();
              }
            }
          });
        }
      }, 100);

I tried implementing this but not yet success, any help would be grateful.

[bluenex]

I have found the alternative which have been inspired by this repo. So I'm closing this.

here is the one -> https://www.npmjs.com/package/react-native-text-ticker