How to create a dynamic array of animated styles for an array of components

[mohsinulhaq]

const AnimatedText = Animated.createAnimatedComponent(Text);

const Component = ({texts}) => {
  // can't create an array of shared value for each text
  const textScaleShared = useSharedValue(1);

  // can't create an array of animated style for each text
  const animatedTextStyle = useAnimatedStyle(() => ({
    transform: [{ scale: textScaleShared.value }],
  }));

  useEffect(() => {
    // code to reduce text scale one after another
  }, [])

  return texts.map(text => <AnimatedText style={animatedTextStyle}>{text}</AnimatedText>)
}

I want to apply animated styles to an array of components, but since useSharedValue and useAnimatedStyle are both hooks, I am unable to loop over the prop and create a shared value and the corresponding style for each of the component.

How can I achieve the same?

[mohsinulhaq]

https://stackoverflow.com/a/67590367/3734818