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

7.2k Views Asked by At

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} />;
          }}
    ```
1

There are 1 best solutions below

0
On BEST ANSWER

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