convert reanimated 1 to 2

Question

What's the equivalent of this:

const scrollViewStyle = useMemo(
  () => [
    {
      opacity: interpolate(animatedIndex, {
        inputRange: [0, 1],
        outputRange: [0, 1],
        extrapolate: Extrapolate.CLAMP,
      }),
    },
  ],
  [animatedIndex]
);

in reanimated 2?

Answer 1

You can still use interpolate. Just use animatedIndex.value, as it's now needs to be a shared value.

// somewhere earlier
const animatedIndex = useSharedValue(0)

// calculate style object
const scrollViewStyle = useAnimatedStyle(
  () => {
     return {
      opacity: interpolate(animatedIndex.value, {
        inputRange: [0, 1],
        outputRange: [0, 1],
        extrapolate: Extrapolate.CLAMP,
      }),
    }
  },
);