How to use useDrawerProgress with Reanimated 2 (types issue)

[joshuaaron]

Trying to interpolate the progress value returned from useDrawerProgress from react-navigation (v6) but having some type related issues.

The returned value from useDrawerProgress is Readonly<Animated.SharedValue<number>> | Animated.Node<number> where the first argument to interpolateNode from reanimated is Animated.Adaptable<number>. Likewise to interpolate as it takes just a number.

When trying to pass the progress value in, typescript errors at Type 'Readonly<SharedValue<number>>' is not assignable to type 'Adaptable<number>'

const progress = useDrawerProgress();
const style = useAnimatedStyle(() => {
    const translateX = interpolate(progress, [0, 1], [-120, 0] ); 
                  // = interpolateNode(progress, { inputRange: [0, 1], outputRange: [-120, 0] }); <-- neither work

    return {
        transform: [{ translateX }],
    };
});

Anyone know how to get these to work together?

"@react-navigation/drawer": "6.1.8",
"@react-navigation/native": "6.0.4",
"react-native-reanimated": "2.3.1",

[joshuaaron]

It seems just passing the value outside of a useAnimatedStyle and using any to silence TS works but this stills seems like a bug.

One other comment/question is when should you use useAnimatedStyle or not then? I would have thought since the translateX value is being interpolated, it would be an animated style therefore using the hook?

const translateX = interpolateNode(progress as any, {
    inputRange: [0, 1],
    outputRange: [-120, 0],
    extrapolate: Extrapolate.CLAMP,
});

return (
    <Animated.View style={{ transform: [{ translateX }] }}>...</Animated.View>
)