fix: fix drawer in RTL and when on right. fixes #10335

react-navigation · Mar 25, 2022 · a3fad5b · a3fad5b
1 parent 7013026
commit a3fad5b
Showing 1 changed file with 16 additions and 4 deletions.
diff --git a/packages/drawer/src/views/modern/Drawer.tsx b/packages/drawer/src/views/modern/Drawer.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  I18nManager,
   InteractionManager,
   Keyboard,
   Platform,
@@ -260,6 +261,8 @@ export default function Drawer({
   });
 
   const drawerAnimatedStyle = useAnimatedStyle(() => {
+    const distanceFromEdge = dimensions.width - drawerWidth;
+
     return {
       transform:
         drawerType === 'permanent'
@@ -268,7 +271,16 @@ export default function Drawer({
             []
           : [
               {
-                translateX: drawerType === 'back' ? 0 : translateX.value,
+                translateX:
+                  // The drawer stays in place when `drawerType` is `back`
+                  (drawerType === 'back' ? 0 : translateX.value) +
+                  (drawerPosition === 'left'
+                    ? I18nManager.isRTL
+                      ? -distanceFromEdge
+                      : 0
+                    : I18nManager.isRTL
+                    ? 0
+                    : distanceFromEdge),
               },
             ],
     };
@@ -284,11 +296,11 @@ export default function Drawer({
           : [
               {
                 translateX:
+                  // The screen content stays in place when `drawerType` is `front`
                   drawerType === 'front'
                     ? 0
-                    : drawerPosition === 'left'
-                    ? drawerWidth + translateX.value
-                    : translateX.value - drawerWidth,
+                    : translateX.value +
+                      drawerWidth * (drawerPosition === 'left' ? 1 : -1),
               },
             ],
     };