CODEWITHSUNDEEP
reactjsreact-nativereact-native-reanimated
John Doe
John Doe

Reputation: 71

React Native reanimated doesn't work with interpolate

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

- enter image description here

Upvotes: 4

Views: 10122

Answers (6)

EigenFool
EigenFool

Reputation: 543

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

Upvotes: 1

Mateus Marinho
Mateus Marinho

Reputation: 352

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

Upvotes: 7

yaren hilal &#252;rkmez
yaren hilal &#252;rkmez

Reputation: 1

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

Upvotes: 0

Thomas Dittmar
Thomas Dittmar

Reputation: 1924

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 😉

Upvotes: 1

John Doe
John Doe

Reputation: 71

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

Upvotes: -1

Zhang TianYu
Zhang TianYu

Reputation: 1195

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

Upvotes: -1

Related Questions