React Native Reanimated: Argument of type 'AnimatedNode' is not assignable to parameter of type 'number'.ts(2345)

Question

I need to create a drawer animation using React Native Reanimated(https://www.npmjs.com/package/react-native-reanimated).

before update interpolate method works properly with 2 arguments. which is used like

interpolate(
   props.progress,
   {
    [0, 1],
    [1, 0.85],
    Extrapolate.CLAMP
   }
);

But after the update, the method will take 3 to 4 parameter

interpolate(
   props.progress,
   [0, 1],
   [1, 0.85],
   Extrapolate.CLAMP
);

Now I got error as below

Argument of type 'AnimatedNode<number>' is not assignable to parameter of type 'number'

My current version of React Native Reanimated is 2.1.0

Passing Props through drawerContent(DrawerContentComponentProps) as below

drawerContent={(props) => {
            const scale = interpolate(
              props.progress,
              [0, 1],
              [1, 0.85],
              Extrapolate.CLAMP
            );

            const borderRadius = interpolate(
              props.progress,
              [0, 1],
              [0, 10],
              Extrapolate.CLAMP
            );

            screenStyle = {
              transform: [
                {
                  scaleY: scale,
                },
              ],
              borderRadius,
            };
            return <SideBar {...props} user={user} />;
          }}
    ```

What are you updating from? 1.x to 2.x? Their docs say that interpolate renamed to interpolateNode. Also their docs say that the first param is a node, not a number. You haven't shown us what props.progress is though. — windowsill, Apr 21 '21 at 02:41
@windowsill Question edited. thanks for suggestion, here props.progress is Animated.NodeL type and interpolate method takes only number. — Meet Prajapati, Apr 21 '21 at 02:51

score 8 · Accepted Answer · answered Apr 29 '21 at 03:48

In Reanimated 2 interpolate was renamed to interpolateNode. So I did the change my code like

...
const scale = interpolateNode(props.progress, {
 inputRange: [0, 1],
 outputRange: [1, 0.85],
 extrapolate: Extrapolate.CLAMP,
});

const borderRadius = interpolateNode(props.progress, {
 inputRange: [0, 1],
 outputRange: [1, 10],
 extrapolate: Extrapolate.CLAMP,
});
...

And it's worked properly

React Native Reanimated: Argument of type 'AnimatedNode' is not assignable to parameter of type 'number'.ts(2345)

1 Answers1

Linked