React Native - 创建 N 个动画值

Question

I am creating a "Color Palette" component which has a prop "paletteColors".

The prop "paletteColors" is an array of variable length, and contains the representative color value as string.

Now, in this component, I am mapping this property in order to render N colors:

   {paletteColors.map((paletteColor, index) => (
      <Animated.View
        key={index}
        style={{ transform: [{ scale: getColorAnimatedScale(index) }] }}
      >
        <TouchableOpacity
          onPress={() => handleOnSelectColor(index)}
          style={[
            styles.color,
            {
              backgroundColor: paletteColor,
            },
          ]}
        />
      </Animated.View>
    ))}

Every time the user presses a color, the pressed animated view will scale, so I need to create N (palleteColors.length) animated values...

Something like this but adapted to the length of the given "paletteColors" array:

const [firstColorScale] = useState(new Animated.Value(1)); 
const [secondColorScale] = useState(new Animated.Value(1));
const [thirdColorScale] = useState(new Animated.Value(1));
const [fourthColorScale] = useState(new Animated.Value(1));

Any ideas?

Answer 1

This code worked for me:

const colorsScales = useRef(
    paletteColors.map(
      (_, index) =>
        new Animated.Value(
          index === defaultSelectedColorIndex
            ? selectedColorScale
            : nonSelectedColorScale
        )
    )
  );