Trying to animate opacity, Reanimated2

[PanArnaud]

I work on a slider. I passing a currentIndex property to my component and I want it to be used to animate.

See:

interface DotProps {
  index: number;
  currentIndex: Animated.Node<number>;
}

export const Dot = ({index, currentIndex}: DotProps): JSX.Element => {
  const x = useSharedValue(currentIndex);
  const opacityStyles = useAnimatedStyle(() => {
    return {
      opacity: interpolate(
        currentIndex,
        [index - 1, index, index + 1],
        [0.5, 1, 0.5],
        Extrapolate.CLAMP,
      ),
    }
  });

  {/* rest of code */}

On the parent view, I used the Dot component this way:

{slides.map((_, index) => (
  <Dot
    key={index}
    currentIndex={divide(x.value, width)}
    {...{index}}
  />
))}

My problem is that I get the following error : Argument of type 'AnimatedNode<number>' is not assignable to parameter of type 'number'..

Can someone help me solve this please ?

[joshuaaron]

You need to use interpolateNode from reanimated here, not interpolated:

const opacityStyles = useAnimatedStyle(() => {
    return {
       opacity: interpolateNode(currentIndex, { 
            inputRange: [index - 1, index, index + 1],
            outputRange: [0.5, 1, 0.5],
            extrapolate: Extrapolate.CLAMP },
        }),
    }
});