React Native Text Cycler using reanimated

Below is a code snippet on how to make a text looping effect in React Native with reanimated for animations.

Check out the snack example here

import React, { useEffect, useState } from 'react';
import { StyleProp, TextStyle } from 'react-native';
import Animated, { FadeInDown, FadeOutUp } from 'react-native-reanimated';

const TextCycler = ({
  items,
  textStyles,
  duration = 3000,
  textColors = ['#000000'],
}) => {
  const [index, setIndex] = useState(0);
  const numberOfItems = items.length;

  useEffect(() => {
    const timeout = setInterval(() => {
      setIndex((previousIndex) => {
      // if last item in the array the index is set to 0 meaning start again (looping effect)
        if (previousIndex === numberOfItems - 1) return 0;

        // go to next index
        return previousIndex + 1;
      });
    }, duration);

    // cancels repeating timer
    return () => clearInterval(timeout);
  }, [duration, numberOfItems]);

  return (
    <Animated.Text
      key={index}
      entering={FadeInDown}
      exiting={FadeOutUp}
      style={[textStyles, { color: textColors[index] }]}>
      {items[index]}
    </Animated.Text>
  );
};

export default TextCycler