fix: don't disable programmatic open/close of drawer with drawerLockMode

fixes #56
react-navigation · Feb 6, 2020 · 6b02d87 · 6b02d87
1 parent f9f39d9
commit 6b02d87
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 31 deletions.
diff --git a/src/views/Drawer.tsx b/src/views/Drawer.tsx
@@ -77,7 +77,7 @@ type Props = {
   onOpen: () => void;
   onClose: () => void;
   onGestureRef?: (ref: PanGestureHandler | null) => void;
-  locked: boolean;
+  gestureEnabled: boolean;
   drawerPosition: 'left' | 'right';
   drawerType: 'front' | 'back' | 'slide';
   keyboardDismissMode: 'none' | 'on-drag';
@@ -94,9 +94,9 @@ type Props = {
   gestureHandlerProps?: React.ComponentProps<typeof PanGestureHandler>;
 };
 
-export default class DrawerView extends React.PureComponent<Props> {
+export default class Drawer extends React.PureComponent<Props> {
   static defaultProps = {
-    locked: false,
+    gestureEnabled: true,
     drawerPostion: I18nManager.isRTL ? 'left' : 'right',
     drawerType: 'front',
     swipeEdgeWidth: 32,
@@ -111,16 +111,11 @@ export default class DrawerView extends React.PureComponent<Props> {
       open,
       drawerPosition,
       drawerType,
-      locked,
       swipeDistanceThreshold,
       swipeVelocityThreshold,
       hideStatusBar,
     } = this.props;
 
-    if (prevProps.locked !== locked) {
-      this.isLocked.setValue(locked ? TRUE : FALSE);
-    }
-
     if (
       // If we're not in the middle of a transition, sync the drawer's open state
       typeof this.pendingOpenValue !== 'boolean' ||
@@ -167,7 +162,6 @@ export default class DrawerView extends React.PureComponent<Props> {
   private isDrawerTypeFront = new Value<Binary>(
     this.props.drawerType === 'front' ? TRUE : FALSE
   );
-  private isLocked = new Value(this.props.locked ? TRUE : FALSE);
 
   private isOpen = new Value<Binary>(this.props.open ? TRUE : FALSE);
   private nextIsOpen = new Value<Binary | -1>(UNSET);
@@ -444,10 +438,7 @@ export default class DrawerView extends React.PureComponent<Props> {
     {
       nativeEvent: {
         oldState: (s: Animated.Value<number>) =>
-          cond(
-            and(eq(s, State.ACTIVE), eq(this.isLocked, FALSE)),
-            set(this.manuallyTriggerSpring, TRUE)
-          ),
+          cond(eq(s, State.ACTIVE), set(this.manuallyTriggerSpring, TRUE)),
       },
     },
   ]);
@@ -462,7 +453,9 @@ export default class DrawerView extends React.PureComponent<Props> {
     // Until layout is available, drawer is hidden with opacity: 0 by default
     // Show it in the next frame when layout is available
     // If we don't delay it until the next frame, there's a visible flicker
-    requestAnimationFrame(() => this.drawerOpacity.setValue(1));
+    requestAnimationFrame(() =>
+      requestAnimationFrame(() => this.drawerOpacity.setValue(1))
+    );
   };
 
   private toggleDrawer = (open: boolean) => {
@@ -487,7 +480,7 @@ export default class DrawerView extends React.PureComponent<Props> {
   render() {
     const {
       open,
-      locked,
+      gestureEnabled,
       drawerPosition,
       drawerType,
       swipeEdgeWidth,
@@ -529,7 +522,7 @@ export default class DrawerView extends React.PureComponent<Props> {
           onGestureEvent={this.handleGestureEvent}
           onHandlerStateChange={this.handleGestureStateChange}
           hitSlop={hitSlop}
-          enabled={!locked}
+          enabled={gestureEnabled}
           {...gestureHandlerProps}
         >
           <Animated.View
@@ -548,6 +541,7 @@ export default class DrawerView extends React.PureComponent<Props> {
             >
               {renderSceneContent({ progress: this.progress })}
               <TapGestureHandler
+                enabled={gestureEnabled}
                 onHandlerStateChange={this.handleTapStateChange}
               >
                 <Animated.View

diff --git a/src/views/DrawerView.tsx b/src/views/DrawerView.tsx
@@ -85,9 +85,27 @@ export default class DrawerView extends React.PureComponent<Props, State> {
   };
 
   componentDidMount() {
+    // If drawerLockMode was set to `locked-open`, we should open the drawer on mount
+    if (this.getLockMode(this.props) === 'locked-open') {
+      this.handleDrawerOpen();
+    }
+
     Dimensions.addEventListener('change', this.updateWidth);
   }
 
+  componentDidUpdate(prevProps: Props) {
+    const prevLockMode = this.getLockMode(prevProps);
+    const nextLockMode = this.getLockMode(this.props);
+
+    if (prevLockMode !== nextLockMode) {
+      if (nextLockMode === 'locked-open') {
+        this.handleDrawerOpen();
+      } else {
+        this.handleDrawerClose();
+      }
+    }
+  }
+
   componentWillUnmount() {
     Dimensions.removeEventListener('change', this.updateWidth);
   }
@@ -96,6 +114,13 @@ export default class DrawerView extends React.PureComponent<Props, State> {
 
   private drawerGestureRef = React.createRef<PanGestureHandler>();
 
+  private getLockMode = ({ navigation, descriptors }: Props) => {
+    const activeKey = navigation.state.routes[navigation.state.index].key;
+    const { drawerLockMode } = descriptors[activeKey].options;
+
+    return drawerLockMode;
+  };
+
   private handleDrawerOpen = () => {
     const { navigation } = this.props;
 
@@ -223,7 +248,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { navigation } = this.props;
+    const { navigation, navigationConfig } = this.props;
     const {
       drawerType,
       sceneContainerStyle,
@@ -232,27 +257,19 @@ export default class DrawerView extends React.PureComponent<Props, State> {
       hideStatusBar,
       statusBarAnimation,
       gestureHandlerProps,
-    } = this.props.navigationConfig;
-    const activeKey = navigation.state.routes[navigation.state.index].key;
-    const { drawerLockMode } = this.props.descriptors[activeKey].options;
+    } = navigationConfig;
 
+    const drawerLockMode = this.getLockMode(this.props);
     const drawerBackgroundColor = this.getDrawerBackgroundColor();
     const overlayColor = this.getOverlayColor();
 
-    const isOpen =
-      drawerLockMode === 'locked-closed'
-        ? false
-        : drawerLockMode === 'locked-open'
-        ? true
-        : this.props.navigation.state.isDrawerOpen;
-
     return (
       <DrawerGestureContext.Provider value={this.drawerGestureRef}>
         <Drawer
-          open={isOpen}
-          locked={
-            drawerLockMode === 'locked-open' ||
-            drawerLockMode === 'locked-closed'
+          open={navigation.state.isDrawerOpen}
+          gestureEnabled={
+            drawerLockMode !== 'locked-open' &&
+            drawerLockMode !== 'locked-closed'
           }
           onOpen={this.handleDrawerOpen}
           onClose={this.handleDrawerClose}