react-native-drawer-layout 4.1.8 → 4.1.10

package/lib/module/views/Drawer.js

@@ -25,9 +25,8 @@ export function Drawer({
   style
 }) {
   const windowDimensions = useWindowDimensions();
-  const layout = customLayout ?? windowDimensions;
   const drawerWidth = getDrawerWidth({
-    layout,
+    layout: customLayout ?? windowDimensions,
     drawerStyle
   });
   const progress = useFakeSharedValue(open ? 1 : 0);
@@ -52,22 +51,9 @@ export function Drawer({
   }, [onTransitionEndLatest, onTransitionStartLatest]);
   const isOpen = drawerType === 'permanent' ? true : open;
   const isRight = drawerPosition === 'right';
-  let translateX = 0;
-
+  const translateX =
   // The drawer stays in place at open position when `drawerType` is `back`
-  if (open || drawerType === 'back') {
-    if (direction === 'rtl') {
-      translateX = drawerPosition === 'left' ? drawerWidth - layout.width : 0;
-    } else {
-      translateX = drawerPosition === 'left' ? 0 : layout.width - drawerWidth;
-    }
-  } else {
-    if (direction === 'rtl') {
-      translateX = drawerPosition === 'left' ? -layout.width : drawerWidth;
-    } else {
-      translateX = drawerPosition === 'left' ? -drawerWidth : layout.width;
-    }
-  }
+  open || drawerType === 'back' ? drawerPosition === 'left' ? drawerWidth : -drawerWidth : 0;
   const drawerAnimatedStyle = drawerType !== 'permanent' ? {
     transition: 'transform 0.3s',
     transform: [{
@@ -82,43 +68,49 @@ export function Drawer({
       drawerType === 'front' ? 0 : drawerWidth * (drawerPosition === 'left' ? 1 : -1) : 0
     }]
   } : null;
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, style],
-    children: /*#__PURE__*/_jsx(DrawerProgressContext.Provider, {
-      value: progress,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [styles.main, {
-          flexDirection: drawerType === 'permanent' ? isRight && direction === 'ltr' || !isRight && direction === 'rtl' ? 'row' : 'row-reverse' : 'row'
-        }],
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: [styles.content, contentAnimatedStyle],
-          children: [/*#__PURE__*/_jsx(View, {
-            "aria-hidden": isOpen && drawerType !== 'permanent',
-            style: styles.content,
-            children: children
-          }), drawerType !== 'permanent' ? /*#__PURE__*/_jsx(Overlay, {
-            open: open,
-            progress: progress,
-            onPress: () => onClose(),
-            style: overlayStyle,
-            accessibilityLabel: overlayAccessibilityLabel
-          }) : null]
-        }), /*#__PURE__*/_jsx(View, {
-          ref: drawerRef,
-          style: [styles.drawer, {
-            width: drawerWidth,
-            position: drawerType === 'permanent' ? 'relative' : 'absolute',
-            zIndex: drawerType === 'back' ? -1 : 0
-          }, drawerAnimatedStyle, drawerStyle],
-          children: renderDrawerContent()
-        })]
-      })
+  const drawerElement = /*#__PURE__*/_jsx(View, {
+    ref: drawerRef,
+    style: [styles.drawer, {
+      width: drawerWidth,
+      position: drawerType === 'permanent' ? 'relative' : 'absolute',
+      zIndex: drawerType === 'back' ? -1 : 1
+    }, drawerType !== 'permanent' ?
+    // Position drawer off-screen by default in closed state
+    // And add a translation only when drawer is open
+    // So changing position in closed state won't trigger a visible transition
+    drawerPosition === 'right' ? {
+      right: -drawerWidth
+    } : {
+      left: -drawerWidth
+    } : null, drawerAnimatedStyle, drawerStyle],
+    children: renderDrawerContent()
+  }, "drawer");
+  const mainContent = /*#__PURE__*/_jsxs(View, {
+    style: [styles.content, contentAnimatedStyle],
+    children: [/*#__PURE__*/_jsx(View, {
+      "aria-hidden": isOpen && drawerType !== 'permanent',
+      style: styles.content,
+      children: children
+    }), drawerType !== 'permanent' ? /*#__PURE__*/_jsx(Overlay, {
+      open: open,
+      progress: progress,
+      onPress: () => onClose(),
+      style: overlayStyle,
+      accessibilityLabel: overlayAccessibilityLabel
+    }) : null]
+  }, "content");
+  return /*#__PURE__*/_jsx(DrawerProgressContext.Provider, {
+    value: progress,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.container, style],
+      children: [!isRight && drawerElement, mainContent, isRight && drawerElement]
     })
   });
 }
 const styles = StyleSheet.create({
   container: {
-    flex: 1
+    flex: 1,
+    flexDirection: 'row'
   },
   drawer: {
     top: 0,
@@ -128,9 +120,6 @@ const styles = StyleSheet.create({
   },
   content: {
     flex: 1
-  },
-  main: {
-    flex: 1
   }
 });
 //# sourceMappingURL=Drawer.js.map

package/lib/module/views/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","useWindowDimensions","View","useLatestCallback","DrawerProgressContext","getDrawerWidth","useFakeSharedValue","Overlay","jsx","_jsx","jsxs","_jsxs","Drawer","layout","customLayout","direction","drawerPosition","drawerStyle","drawerType","onClose","onTransitionStart","onTransitionEnd","open","overlayStyle","overlayAccessibilityLabel","renderDrawerContent","children","style","windowDimensions","drawerWidth","progress","useEffect","value","drawerRef","useRef","onTransitionStartLatest","onTransitionEndLatest","element","current","addEventListener","removeEventListener","isOpen","isRight","translateX","width","drawerAnimatedStyle","transition","transform","contentAnimatedStyle","styles","container","Provider","main","flexDirection","content","onPress","accessibilityLabel","ref","drawer","position","zIndex","create","flex","top","bottom","maxWidth","backgroundColor"],"sourceRoot":"../../../src","sources":["views/Drawer.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","useWindowDimensions","View","useLatestCallback","DrawerProgressContext","getDrawerWidth","useFakeSharedValue","Overlay","jsx","_jsx","jsxs","_jsxs","Drawer","layout","customLayout","direction","drawerPosition","drawerStyle","drawerType","onClose","onTransitionStart","onTransitionEnd","open","overlayStyle","overlayAccessibilityLabel","renderDrawerContent","children","style","windowDimensions","drawerWidth","progress","useEffect","value","drawerRef","useRef","onTransitionStartLatest","onTransitionEndLatest","element","current","addEventListener","removeEventListener","isOpen","isRight","translateX","drawerAnimatedStyle","transition","transform","contentAnimatedStyle","drawerElement","ref","styles","drawer","width","position","zIndex","right","left","mainContent","content","onPress","accessibilityLabel","Provider","container","create","flex","flexDirection","top","bottom","maxWidth","backgroundColor"],"sourceRoot":"../../../src","sources":["views/Drawer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/views/Overlay.native.js

@@ -31,7 +31,8 @@ export function Overlay({
       onPress: onPress,
       style: styles.pressable,
       role: "button",
-      "aria-label": accessibilityLabel
+      "aria-label": accessibilityLabel,
+      accessible: true
     })
   });
 }

package/lib/module/views/Overlay.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Pressable","StyleSheet","Animated","useAnimatedProps","useAnimatedStyle","jsx","_jsx","PROGRESS_EPSILON","Overlay","progress","onPress","style","accessibilityLabel","rest","animatedStyle","opacity","value","animatedProps","active","View","styles","overlay","children","pressable","role","create","absoluteFillObject","backgroundColor","flex","pointerEvents"],"sourceRoot":"../../../src","sources":["views/Overlay.native.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,UAAU,QAAQ,cAAc;AACpD,OAAOC,QAAQ,IACbC,gBAAgB,EAChBC,gBAAgB,QACX,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIjC,MAAMC,gBAAgB,GAAG,IAAI;AAE7B,OAAO,SAASC,OAAOA,CAAC;EACtBC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,kBAAkB,GAAG,cAAc;EACnC,GAAGC;AACS,CAAC,EAAE;EACf,MAAMC,aAAa,GAAGV,gBAAgB,CAAC,MAAM;IAC3C,OAAO;MACLW,OAAO,EAAEN,QAAQ,CAACO;IACpB,CAAC;EACH,CAAC,EAAE,CAACP,QAAQ,CAAC,CAAC;EAEd,MAAMQ,aAAa,GAAGd,gBAAgB,CAAC,MAAM;IAC3C,MAAMe,MAAM,GAAGT,QAAQ,CAACO,KAAK,GAAGT,gBAAgB;IAEhD,OAAO;MACL,eAAe,EAAEW,MAAM,GAAG,MAAM,GAAG,MAAM;MACzC,aAAa,EAAE,CAACA;IAClB,CAAC;EACH,CAAC,EAAE,CAACT,QAAQ,CAAC,CAAC;EAEd,oBACEH,IAAA,CAACJ,QAAQ,CAACiB,IAAI;IAAA,GACRN,IAAI;IACRF,KAAK,EAAE,CAACS,MAAM,CAACC,OAAO,EAAEP,aAAa,EAAEH,KAAK,CAAE;IAC9CM,aAAa,EAAEA,aAAc;IAAAK,QAAA,eAE7BhB,IAAA,CAACN,SAAS;MACRU,OAAO,EAAEA,OAAQ;MACjBC,KAAK,EAAES,MAAM,CAACG,SAAU;MACxBC,IAAI,EAAC,QAAQ;MACb,cAAYZ;IAAmB,CAChC;EAAC,CACW,CAAC;AAEpB;AAEA,MAAMQ,MAAM,GAAGnB,UAAU,CAACwB,MAAM,CAAC;EAC/BJ,OAAO,EAAE;IACP,GAAGpB,UAAU,CAACyB,kBAAkB;IAChCC,eAAe,EAAE;EACnB,CAAC;EACDJ,SAAS,EAAE;IACTK,IAAI,EAAE,CAAC;IACPC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["Pressable","StyleSheet","Animated","useAnimatedProps","useAnimatedStyle","jsx","_jsx","PROGRESS_EPSILON","Overlay","progress","onPress","style","accessibilityLabel","rest","animatedStyle","opacity","value","animatedProps","active","View","styles","overlay","children","pressable","role","accessible","create","absoluteFillObject","backgroundColor","flex","pointerEvents"],"sourceRoot":"../../../src","sources":["views/Overlay.native.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,UAAU,QAAQ,cAAc;AACpD,OAAOC,QAAQ,IACbC,gBAAgB,EAChBC,gBAAgB,QACX,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIjC,MAAMC,gBAAgB,GAAG,IAAI;AAE7B,OAAO,SAASC,OAAOA,CAAC;EACtBC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,kBAAkB,GAAG,cAAc;EACnC,GAAGC;AACS,CAAC,EAAE;EACf,MAAMC,aAAa,GAAGV,gBAAgB,CAAC,MAAM;IAC3C,OAAO;MACLW,OAAO,EAAEN,QAAQ,CAACO;IACpB,CAAC;EACH,CAAC,EAAE,CAACP,QAAQ,CAAC,CAAC;EAEd,MAAMQ,aAAa,GAAGd,gBAAgB,CAAC,MAAM;IAC3C,MAAMe,MAAM,GAAGT,QAAQ,CAACO,KAAK,GAAGT,gBAAgB;IAEhD,OAAO;MACL,eAAe,EAAEW,MAAM,GAAG,MAAM,GAAG,MAAM;MACzC,aAAa,EAAE,CAACA;IAClB,CAAC;EACH,CAAC,EAAE,CAACT,QAAQ,CAAC,CAAC;EAEd,oBACEH,IAAA,CAACJ,QAAQ,CAACiB,IAAI;IAAA,GACRN,IAAI;IACRF,KAAK,EAAE,CAACS,MAAM,CAACC,OAAO,EAAEP,aAAa,EAAEH,KAAK,CAAE;IAC9CM,aAAa,EAAEA,aAAc;IAAAK,QAAA,eAE7BhB,IAAA,CAACN,SAAS;MACRU,OAAO,EAAEA,OAAQ;MACjBC,KAAK,EAAES,MAAM,CAACG,SAAU;MACxBC,IAAI,EAAC,QAAQ;MACb,cAAYZ,kBAAmB;MAC/Ba,UAAU;IAAA,CACX;EAAC,CACW,CAAC;AAEpB;AAEA,MAAML,MAAM,GAAGnB,UAAU,CAACyB,MAAM,CAAC;EAC/BL,OAAO,EAAE;IACP,GAAGpB,UAAU,CAAC0B,kBAAkB;IAChCC,eAAe,EAAE;EACnB,CAAC;EACDL,SAAS,EAAE;IACTM,IAAI,EAAE,CAAC;IACPC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/views/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/views/Drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,YAAY,EACpB,SAAiB,EACjB,cAAuD,EACvD,WAAW,EACX,UAAoB,EACpB,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,yBAAyB,EACzB,mBAAmB,EACnB,QAAQ,EACR,KAAK,GACN,EAAE,WAAW,2CAoIb"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/views/Drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,YAAY,EACpB,SAAiB,EACjB,cAAuD,EACvD,WAAW,EACX,UAAoB,EACpB,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,yBAAyB,EACzB,mBAAmB,EACnB,QAAQ,EACR,KAAK,GACN,EAAE,WAAW,2CAgIb"}

package/lib/typescript/src/views/Overlay.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.native.d.ts","sourceRoot":"","sources":["../../../../src/views/Overlay.native.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,kBAAmC,EACnC,GAAG,IAAI,EACR,EAAE,YAAY,2CA8Bd"}
+{"version":3,"file":"Overlay.native.d.ts","sourceRoot":"","sources":["../../../../src/views/Overlay.native.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,kBAAmC,EACnC,GAAG,IAAI,EACR,EAAE,YAAY,2CA+Bd"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-drawer-layout",
   "description": "Drawer component for React Native",
-  "version": "4.1.8",
+  "version": "4.1.10",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -75,5 +75,5 @@
       ]
     ]
   },
-  "gitHead": "09d65bcdc908883c8cdd1b93fde19cec4b799ad6"
+  "gitHead": "13e3ced5ee8d5c6fd1ac124ad05d8841da2f8a2a"
 }

package/src/views/Drawer.tsx

@@ -26,8 +26,10 @@ export function Drawer({
 }: DrawerProps) {
   const windowDimensions = useWindowDimensions();
 
-  const layout = customLayout ?? windowDimensions;
-  const drawerWidth = getDrawerWidth({ layout, drawerStyle });
+  const drawerWidth = getDrawerWidth({
+    layout: customLayout ?? windowDimensions,
+    drawerStyle,
+  });
 
   const progress = useFakeSharedValue(open ? 1 : 0);
 
@@ -60,22 +62,13 @@ export function Drawer({
   const isOpen = drawerType === 'permanent' ? true : open;
   const isRight = drawerPosition === 'right';
 
-  let translateX = 0;
-
-  // The drawer stays in place at open position when `drawerType` is `back`
-  if (open || drawerType === 'back') {
-    if (direction === 'rtl') {
-      translateX = drawerPosition === 'left' ? drawerWidth - layout.width : 0;
-    } else {
-      translateX = drawerPosition === 'left' ? 0 : layout.width - drawerWidth;
-    }
-  } else {
-    if (direction === 'rtl') {
-      translateX = drawerPosition === 'left' ? -layout.width : drawerWidth;
-    } else {
-      translateX = drawerPosition === 'left' ? -drawerWidth : layout.width;
-    }
-  }
+  const translateX =
+    // The drawer stays in place at open position when `drawerType` is `back`
+    open || drawerType === 'back'
+      ? drawerPosition === 'left'
+        ? drawerWidth
+        : -drawerWidth
+      : 0;
 
   const drawerAnimatedStyle =
     drawerType !== 'permanent'
@@ -102,64 +95,68 @@ export function Drawer({
         }
       : null;
 
-  return (
-    <View style={[styles.container, style]}>
-      <DrawerProgressContext.Provider value={progress}>
-        <View
-          style={[
-            styles.main,
-            {
-              flexDirection:
-                drawerType === 'permanent'
-                  ? (isRight && direction === 'ltr') ||
-                    (!isRight && direction === 'rtl')
-                    ? 'row'
-                    : 'row-reverse'
-                  : 'row',
-            },
-          ]}
-        >
-          <View style={[styles.content, contentAnimatedStyle]}>
-            <View
-              aria-hidden={isOpen && drawerType !== 'permanent'}
-              style={styles.content}
-            >
-              {children}
-            </View>
-            {drawerType !== 'permanent' ? (
-              <Overlay
-                open={open}
-                progress={progress}
-                onPress={() => onClose()}
-                style={overlayStyle}
-                accessibilityLabel={overlayAccessibilityLabel}
-              />
-            ) : null}
-          </View>
-          <View
-            ref={drawerRef}
-            style={[
-              styles.drawer,
-              {
-                width: drawerWidth,
-                position: drawerType === 'permanent' ? 'relative' : 'absolute',
-                zIndex: drawerType === 'back' ? -1 : 0,
-              },
-              drawerAnimatedStyle,
-              drawerStyle,
-            ]}
-          >
-            {renderDrawerContent()}
-          </View>
-        </View>
-      </DrawerProgressContext.Provider>
+  const drawerElement = (
+    <View
+      key="drawer"
+      ref={drawerRef}
+      style={[
+        styles.drawer,
+        {
+          width: drawerWidth,
+          position: drawerType === 'permanent' ? 'relative' : 'absolute',
+          zIndex: drawerType === 'back' ? -1 : 1,
+        },
+        drawerType !== 'permanent'
+          ? // Position drawer off-screen by default in closed state
+            // And add a translation only when drawer is open
+            // So changing position in closed state won't trigger a visible transition
+            drawerPosition === 'right'
+            ? { right: -drawerWidth }
+            : { left: -drawerWidth }
+          : null,
+        drawerAnimatedStyle,
+        drawerStyle,
+      ]}
+    >
+      {renderDrawerContent()}
+    </View>
+  );
+
+  const mainContent = (
+    <View key="content" style={[styles.content, contentAnimatedStyle]}>
+      <View
+        aria-hidden={isOpen && drawerType !== 'permanent'}
+        style={styles.content}
+      >
+        {children}
+      </View>
+      {drawerType !== 'permanent' ? (
+        <Overlay
+          open={open}
+          progress={progress}
+          onPress={() => onClose()}
+          style={overlayStyle}
+          accessibilityLabel={overlayAccessibilityLabel}
+        />
+      ) : null}
     </View>
   );
+
+  return (
+    <DrawerProgressContext.Provider value={progress}>
+      <View style={[styles.container, style]}>
+        {!isRight && drawerElement}
+        {mainContent}
+        {isRight && drawerElement}
+      </View>
+    </DrawerProgressContext.Provider>
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    flexDirection: 'row',
   },
   drawer: {
     top: 0,
@@ -170,7 +167,4 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
   },
-  main: {
-    flex: 1,
-  },
 });

package/src/views/Overlay.native.tsx

@@ -41,6 +41,7 @@ export function Overlay({
         style={styles.pressable}
         role="button"
         aria-label={accessibilityLabel}
+        accessible
       />
     </Animated.View>
   );