From e7305e28c3c2dfbf9c389dba91a499870798e3ff Mon Sep 17 00:00:00 2001
From: Sadaqat Ali <sali.bscs17seecs@seecs.edu.pk>
Date: Wed, 5 Jan 2022 19:41:41 +0500
Subject: [PATCH 1/3] fixed alignment issues in side menu

---
 src/components/sideMenu/view/sideMenuStyles.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/sideMenu/view/sideMenuStyles.js b/src/components/sideMenu/view/sideMenuStyles.js
index a9b832daf..5f63e06c0 100644
--- a/src/components/sideMenu/view/sideMenuStyles.js
+++ b/src/components/sideMenu/view/sideMenuStyles.js
@@ -36,6 +36,7 @@ export default EStyleSheet.create({
   userInfoWrapper: {
     alignSelf: 'center',
     marginLeft: 15,
+    marginRight: 8,
     width: 120,
   },
   username: {
@@ -63,10 +64,10 @@ export default EStyleSheet.create({
   listItemText: {
     color: '$primaryDarkGray',
     marginLeft: 12,
-    alignSelf: 'center',
     fontWeight: '500',
     fontSize: 14,
     flex: 1,
+    textAlign: 'left',
   },
   buttonText: {
     fontSize: 18,

From 8ab12e379e450befa3da63e6733a8d717159d60f Mon Sep 17 00:00:00 2001
From: Sadaqat Ali <sali.bscs17seecs@seecs.edu.pk>
Date: Wed, 5 Jan 2022 20:34:18 +0500
Subject: [PATCH 2/3] reversed user info and avatar in RTL layout

---
 src/components/sideMenu/view/sideMenuStyles.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/sideMenu/view/sideMenuStyles.js b/src/components/sideMenu/view/sideMenuStyles.js
index 5f63e06c0..eb5498bf0 100644
--- a/src/components/sideMenu/view/sideMenuStyles.js
+++ b/src/components/sideMenu/view/sideMenuStyles.js
@@ -1,4 +1,5 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
+import { NativeModules } from 'react-native';
 import scalePx from '../../../utils/scalePx';
 
 export default EStyleSheet.create({
@@ -18,14 +19,16 @@ export default EStyleSheet.create({
   headerContentWrapper: {
     alignItems: 'center',
     height: 70,
-    flexDirection: 'row',
+    flexDirection: NativeModules.I18nManager.isRTL ? 'row-reverse' : 'row',
     alignSelf: 'center',
+    flex: 1,
   },
   contentView: {
     flex: 4,
   },
   userAvatar: {
-    marginLeft: 32,
+    marginLeft: NativeModules.I18nManager.isRTL ? 15 : 32,
+    marginRight: NativeModules.I18nManager.isRTL ? 15 : 0,
   },
   otherUserAvatar: {
     borderWidth: 0.1,
@@ -36,7 +39,6 @@ export default EStyleSheet.create({
   userInfoWrapper: {
     alignSelf: 'center',
     marginLeft: 15,
-    marginRight: 8,
     width: 120,
   },
   username: {

From 8265573987b973eba096268f9f48d221d272753e Mon Sep 17 00:00:00 2001
From: noumantahir <nouman.hawkdev@gmail.com>
Date: Thu, 6 Jan 2022 11:53:33 +0500
Subject: [PATCH 3/3] Introduced short method for checking RTL

---
 src/components/sideMenu/view/sideMenuStyles.js | 8 ++++----
 src/utils/I18nUtils.ts                         | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/sideMenu/view/sideMenuStyles.js b/src/components/sideMenu/view/sideMenuStyles.js
index eb5498bf0..fd7931f91 100644
--- a/src/components/sideMenu/view/sideMenuStyles.js
+++ b/src/components/sideMenu/view/sideMenuStyles.js
@@ -1,5 +1,5 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
-import { NativeModules } from 'react-native';
+import { isRTL } from '../../../utils/I18nUtils';
 import scalePx from '../../../utils/scalePx';
 
 export default EStyleSheet.create({
@@ -19,7 +19,7 @@ export default EStyleSheet.create({
   headerContentWrapper: {
     alignItems: 'center',
     height: 70,
-    flexDirection: NativeModules.I18nManager.isRTL ? 'row-reverse' : 'row',
+    flexDirection: isRTL() ? 'row-reverse' : 'row',
     alignSelf: 'center',
     flex: 1,
   },
@@ -27,8 +27,8 @@ export default EStyleSheet.create({
     flex: 4,
   },
   userAvatar: {
-    marginLeft: NativeModules.I18nManager.isRTL ? 15 : 32,
-    marginRight: NativeModules.I18nManager.isRTL ? 15 : 0,
+    marginLeft: isRTL() ? 15 : 32,
+    marginRight: isRTL() ? 15 : 0,
   },
   otherUserAvatar: {
     borderWidth: 0.1,
diff --git a/src/utils/I18nUtils.ts b/src/utils/I18nUtils.ts
index 09181d4d3..2a6b5b8b9 100644
--- a/src/utils/I18nUtils.ts
+++ b/src/utils/I18nUtils.ts
@@ -2,6 +2,8 @@ import { Alert, NativeModules } from 'react-native';
 import RNRestart from 'react-native-restart';
 import rtlDetect from 'rtl-detect';
 
+export const isRTL = () => NativeModules.I18nManager.isRTL;
+
 export const languageRestart = (prevLang, lang, intl) => {
   if (prevLang != lang) {
     // if selected lang is RTL, switch the layout