-1

I have Drawer navigator inside my app. I've successfully changed the default (right to left) animation between screens to fadeIn/fadeOut.

But I can't find a way to change the default animation for react-navigation Drawer that slides from right to left. I need it to fadeIn/fadeOut instead.

I'm using custom drawer component and navigation.openDrawer() to open and navigation.closeDrawer() to close the drawer.

root993
  • 3
  • 1
  • 3
  • Welcome to Stack Overflow! This question is broad and general -- could you please make it more specific by adding details, including any code you have written? – jkdev Sep 26 '19 at 17:26

1 Answers1

1

You can set the drawer animation to something different, but not to a fade Animation.

drawerType - Type of the drawer. It determines how the drawer looks and animates.

- front: Traditional drawer which covers the screen with a overlay behind it.
- back: The drawer is revealed behind the screen on swipe.
- slide: Both the screen and the drawer slide on swipe to reveal the drawer.

Alternatively you can animate the content inside the drawer:

const CustomDrawerContentComponent = props => {
  const translateX = props.drawerOpenProgress.interpolate({
    inputRange: [0, 1],
    outputRange: [-100, 0],
  });

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

https://reactnavigation.org/docs/en/drawer-navigator.html

moritzwick
  • 613
  • 1
  • 10
  • 16