how to animate in a map() by selectedIndex?

[zilahir]

Hi!

It seems I am unable to figuring it out, if anyone can help me out here, that would be greatly appreciated.

I have the following:

const animatedDotSharedValue = useSharedValue(activeIndex); // activeIndex is being handled elsewhere 

  const animatedDotStyle = useAnimatedStyle(() => {
    const backgroundColor = interpolateColor(
      animatedDotSharedValue.value,
      [0, 1],
      [colors.gray200, colors.orange]
    );

    return {
      backgroundColor,
    };
  }, []);

<View style={[styles.dotsContainer]}>
        {books.map(({ _id }) => {
          return (
            <Animated.View style={[styles.dot, animatedDotStyle]} key={_id} />
          );
        })}
</View>

Now, this is obviously wrong, because either all of the dots colors.gray200, or color.orange. How can achieve that the currently active dot in the map (by index) is being animated?

Thanks for the help in advance!

[tjzel]

Hi @zilahir. I'm not sure what you are trying to achieve, could you elaborate?