react-native-drawer-layout 4.0.0-alpha.9 → 4.0.0-rc.0

package/src/views/Drawer.native.tsx

@@ -43,7 +43,8 @@ const minmax = (value: number, start: number, end: number) => {
 
 export function Drawer({
   layout: customLayout,
-  drawerPosition = I18nManager.getConstants().isRTL ? 'right' : 'left',
+  direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
+  drawerPosition = direction === 'rtl' ? 'right' : 'left',
   drawerStyle,
   drawerType = 'front',
   configureGestureHandler,
@@ -317,7 +318,13 @@ export function Drawer({
                 translateX:
                   // The drawer stays in place when `drawerType` is `back`
                   (drawerType === 'back' ? 0 : translateX.value) +
-                  (drawerPosition === 'left' ? 0 : distanceFromEdge),
+                  (direction === 'rtl'
+                    ? drawerPosition === 'left'
+                      ? -distanceFromEdge
+                      : 0
+                    : drawerPosition === 'left'
+                      ? 0
+                      : distanceFromEdge),
               },
             ],
     };
@@ -363,8 +370,11 @@ export function Drawer({
               styles.main,
               {
                 flexDirection:
-                  drawerType === 'permanent' && !isRight
-                    ? 'row-reverse'
+                  drawerType === 'permanent'
+                    ? (isRight && direction === 'ltr') ||
+                      (!isRight && direction === 'rtl')
+                      ? 'row'
+                      : 'row-reverse'
                     : 'row',
               },
             ]}

package/src/views/Drawer.tsx

@@ -10,7 +10,8 @@ import { Overlay } from './Overlay';
 
 export function Drawer({
   layout: customLayout,
-  drawerPosition = 'left',
+  direction = 'ltr',
+  drawerPosition = direction === 'rtl' ? 'right' : 'left',
   drawerStyle,
   drawerType = 'front',
   onClose,
@@ -56,23 +57,28 @@ 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 drawerAnimatedStyle =
     drawerType !== 'permanent'
       ? {
           transition: 'transform 0.3s',
-          transform: [
-            {
-              // The drawer stays in place at open position when `drawerType` is `back`
-              translateX:
-                open || drawerType === 'back'
-                  ? drawerPosition === 'left'
-                    ? 0
-                    : layout.width - drawerWidth
-                  : drawerPosition === 'left'
-                    ? -drawerWidth
-                    : layout.width,
-            },
-          ],
+          transform: [{ translateX }],
         }
       : null;
 
@@ -101,7 +107,12 @@ export function Drawer({
             styles.main,
             {
               flexDirection:
-                drawerType === 'permanent' && !isRight ? 'row-reverse' : 'row',
+                drawerType === 'permanent'
+                  ? (isRight && direction === 'ltr') ||
+                    (!isRight && direction === 'rtl')
+                    ? 'row'
+                    : 'row-reverse'
+                  : 'row',
             },
           ]}
         >