React Native reanimated doesn't work with interpolate

The variable that is using interpolate should be inside useAnimatedStyle.

const positionX = useSharedValue(-40);
const animatedStyles = useAnimatedStyle(() => {
    const opacity = interpolate(positionX.value, [-40, 0], [0, 1]); // <- It must be here to work.
    return {
      transform: [{ translateX: positionX.value }],
      opacity,
    };
  });

Try this without naming inputRange or outputRange:

import { useSharedValue, interpolate } from 'react-native-reanimated' // version 2.x

const animatedValue = useSharedValue(0)

const interpolatedValue = interpolate(
  animatedValue.value,
  [valueMin, valueMax],
  [interpolatedValueMin, interpolatedValueMax]
)

Note: In favour for better UX use react-native-reanimated, which uses the UI thread to perform animations instead of the JS thread

If you upgraded to version 2.X from version 1, then this needs to be renamed from interpolate to interpolateNode

more info here https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/migration/#1-interpolate-renamed-to-interpolatenode

import Animated,{interpolate} from 'react-native-reanimated';

const scale = interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });

const borderRadius = interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [0, 10],
  });

when i did it like this, my problem was solved

Please check this documentation.

https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/event

https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/code

https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/nodes/interpolate

And try this.

Animated.useCode(
  () =>
    [
      //...
      Animated.interploate(...),
    ],
  [animated, offset]
);

I managed to find the issue.The version of react-native-reanimated was 2.2.0 and I installed the 1.12.0 one and is finally working