custom drawer animation with react navigation using useDrawerProgress()

user_17870321 0
Viewed 802

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

react-native javascript
1 Answers

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,
  };
});
user_193327150
Related