react-native-reanimated: V2: interpolateNode causes crash

Description

when using interpolateNode the app crashes

Steps To Reproduce

create an interpolateNode value and assign it to useAnimatedStyle

const width = interpolateNode(tY.value, {
    inputRange: [10, 100],
    outputRange: [40, 200],
    Extrapolate: Extrapolate.CLAMP,
  });

Reanimated 2

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 32 (13 by maintainers)

Most upvoted comments

The interpolate function in Reanimated2 is a pure function. It takes arguments and returns a value.

You have two options here:

Use and log interpolate inside the worklet (useAnimatedStyle or inside any of the gesture handlers)
Wrap that interpolate call with useDerivedValue - it returns a shared value, so make sure to use .value:

const width = useDerivedValue(() => {
  return interpolate(...);
});

+14

terrysahaidak on Jun 9, 2020

useAnimatedStyle body is being executed on the UI Thread. When you pass its result (styles) to Animated.View as style, it bounds that style to that view and tells “if something changes in the AnimatesStyles, please update the view”.

Since you can return different styles at any time from useAnimatedStyle, you cannot just “spread” it.

Also, you can no longer pass animated values (now they are shared values) as style properties directly.

terrysahaidak on Jun 9, 2020

@terrysahaidak ok how about this question !

@terrysahaidak As documentation says that interpolate named to interpolateNode so how does reanimted 2 and up versions are accepting interpolate

If you are using reanimated v1 then interpolate renamed to interpolateNode. If you want to use interpolation in V2 you can just import “interpolate” because now it’s a worklet.

You can learn about worklet in documentation and this video

terrysahaidak on Jul 1, 2021

Please, carefully read my suggestion. The interpolation in Reanimated2 takes 4 parameters: sharedValue’s value, array of input, array of output and extrapolate. You’re using 2 parameters instead and passing the object as a second one. That’s how interpolate node works

terrysahaidak on Jun 9, 2020

Diffclamp is not working. @terrysahaidak any idea? How can we make it work.

prayaslashkari on Feb 8, 2022

Go to drawer.js file in /node_modules/react-navigation-drawer/lib/module/views/ and change interpolate to interpolatenode on two places. your problem solved

shadahmad7 on Nov 19, 2021