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
Top comments (0)