Search code examples
react-nativereact-native-reanimatedreact-native-drawerreact-native-reanimated-v2

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


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

Solution

  • 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