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