Custom Drawer animation won't work after updating drawer navigation 6

Question

i need some help about my custom drawer . it used to work perfectly with slide animation but after updating to drawer v6. the package react-native-reanimated has been updated too. he stops work. can you help me guys. thanks

  const CustomDrawer = ({navigation}) => {
  const [progress, setProgress] = React.useState(new Animated.Value(0));

  const scale = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });
  const borderRadius = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [0, 26],
  });
  const animatedStyle = {borderRadius, transform: [{scale}]};
  return (
    <View style={{flex: 1, backgroundColor: COLORS.primary}}>
      <Drawer.Navigator
        screenOptions={{
          headerShown: false,
          sceneContainerStyle: {backgroundColor: 'transparent'},
          drawerType: 'slide',
          drawerStyle: {
            flex: 1,
            width: '65%',
            paddingRight: 20,
            backgroundColor: 'transparent',
          },
        }}
        drawerContent={props => {
          // setTimeout(() => {
          setProgress(props.progress);
          // }, 0);
          return <CustomContentDrawer navigation={props.navigation} />;
        }}>
        <Drawer.Screen name="MainLayout">
          {props => (
            <MainLayout
              {...props}
              drawerAnimationStyle={animatedStyle}
              navigation={navigation}
            />
          )}
        </Drawer.Screen>
      </Drawer.Navigator>
    </View>
  );
};
const MainLayout = ({drawerAnimationStyle, navigation}) => {
  return (
    <Animated.View
      style={{flex: 1, backgroundColor: 'white', ...drawerAnimationStyle}}>
      <Text>MainLayout</Text>
    </Animated.View>
  );
};

Hey bro, did you find a way to solve this in react-navigation 6. — abokor hassan, Mar 16 '22 at 09:04

score 1 · Answer 1 · edited Dec 27 '21 at 13:53

With the latest update progress prop of drawerContent seems to return undefined. So the animation is not working.

Instead of using useState , we can use useDrawerProgress() hook in the Main component instead of Drawer component. All the animation logic needs to be implemented in Main Component.

//Main Component

const MainLayout = (props) => {
  const progress = useDrawerProgress();

  const scale = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });

  const borderRadius = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [0, 26],
  });

  const animatedStyle = {
    borderRadius,
    transform: [{ scale }],
  };
  return (
    <Animated.View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "white",
        ...animatedStyle,
      }}
    >
      <Text>MainLayout</Text>
    </Animated.View>
  );
};

export default MainLayout;

PS: remove any animation logic and props passed in drawer component. We don't need them anymore.

useDrawerProgress only seems to work if used within a drawerContent component. when used inside a Drawer.Screen, the value does not update. Strangely enough, useDrawerStatus does toggle between "open" and "closed". I'm using @react-navigation/drawer 6.3.1 with react-native-reanimated 2.3.1 . — Nelson Fleig, Feb 27 '22 at 13:59

score 0 · Answer 2 · answered Jun 13 '22 at 19:48

0

useDrawerProgress - working try this code:

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

But write this code inside screens not in the DrawerContent, for me its working!!

answered Jun 13 '22 at 19:48

Anatoliy Nazarenko

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 13 '22 at 22:05

Custom Drawer animation won't work after updating drawer navigation 6

2 Answers2