I'm trying to achieve this animation with react navigation v6 where the Screen scales down when the drawer is opened.
Here's my code so far:
App.js
<Drawer.Navigator
drawerContent={(props) => <CustomDrawer {...props} />}
initialRouteName="Home"
>
<Drawer.Screen name="Home" component={Home} />
<Drawer.Screen name="About" component={About} />
</Drawer.Navigator>
Home.js
const Home = ({ navigation, setProgress }) => {
const progress = useDrawerProgress();
const scale = Animated.interpolateNode(progress.value, {
inputRange: [0, 1],
outputRange: [1, 0.7],
});
...
return (
<Animated.View style={{ flex: 1, transform: [{ scale }] }}>
...
</Animated.View>
However this doesn't work as expected, transform: scale doesn't change in the ui. If I make some dummy changes to Home.js while the drawer in open the Home screen suddenly scales down.
I think the const progress = useDrawerProgress() doesn't updates the progress
Edit: Very similar to this question here
useDrawerProgress update progress of opening drawer, but we need small rewrite logic of animation
try this:
import { interpolate, Extrapolate, useAnimatedStyles } from react-native-reanimated;
.
.
.
const drawerProgress = useDrawerProgress();
const animatedStyle = useAnimatedStyle(() => {
const scale = interpolate(drawerProgress.value, [0, 1], [1, 0.8], {
extrapolateRight: Extrapolate.CLAMP,
});
const borderRadius = interpolate(drawerProgress.value, [0, 1], [0, 10], {
extrapolateRight: Extrapolate.CLAMP,
});
return {
transform: [{ scale }],
borderRadius,
};
});