From ea8ea20127d979d8c8ddbddf56de1bdfdf0243f9 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Fri, 14 May 2021 09:06:00 +0200
Subject: [PATCH] fix: fix drawer content padding in RTL

---
 .../drawer/src/views/DrawerContentScrollView.tsx  | 15 ++++++++++++---
 packages/elements/src/Header/Header.tsx           |  4 ++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/drawer/src/views/DrawerContentScrollView.tsx b/packages/drawer/src/views/DrawerContentScrollView.tsx
index 8a2da572..a163527e 100644
--- a/packages/drawer/src/views/DrawerContentScrollView.tsx
+++ b/packages/drawer/src/views/DrawerContentScrollView.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { ScrollView, StyleSheet, ScrollViewProps } from 'react-native';
+import {
+  ScrollView,
+  StyleSheet,
+  ScrollViewProps,
+  I18nManager,
+} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import DrawerPositionContext from '../utils/DrawerPositionContext';
 
@@ -16,14 +21,18 @@ export default function DrawerContentScrollView({
   const drawerPosition = React.useContext(DrawerPositionContext);
   const insets = useSafeAreaInsets();
 
+  const isRight = I18nManager.isRTL
+    ? drawerPosition === 'left'
+    : drawerPosition === 'right';
+
   return (
     <ScrollView
       {...rest}
       contentContainerStyle={[
         {
           paddingTop: insets.top + 4,
-          paddingLeft: drawerPosition === 'left' ? insets.left : 0,
-          paddingRight: drawerPosition === 'right' ? insets.right : 0,
+          paddingStart: !isRight ? insets.left : 0,
+          paddingEnd: isRight ? insets.right : 0,
         },
         contentContainerStyle,
       ]}
diff --git a/packages/elements/src/Header/Header.tsx b/packages/elements/src/Header/Header.tsx
index a993be29..edf0bd62 100644
--- a/packages/elements/src/Header/Header.tsx
+++ b/packages/elements/src/Header/Header.tsx
@@ -214,7 +214,7 @@ export default function Header(props: Props) {
             style={[
               styles.left,
               headerTitleAlign === 'center' && styles.expand,
-              { marginLeft: insets.left },
+              { marginStart: insets.left },
               leftContainerStyle,
             ]}
           >
@@ -236,7 +236,7 @@ export default function Header(props: Props) {
             style={[
               styles.right,
               styles.expand,
-              { marginRight: insets.right },
+              { marginEnd: insets.right },
               rightContainerStyle,
             ]}
           >