React Native reanimated doesn't work with interpolate

Question

I try to use Animated.interpolate but I get a strange error that I've never had. How can it be solved ? Thanks

Answer 1

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,
    };
  });

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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]
);

Answer 6

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