feat: Right-to-Left layout support

hoaphantn7604 · Mar 5, 2023 · 51ae80b · 51ae80b
1 parent 7f97b25
commit 51ae80b
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 15 deletions.
diff --git a/example/src/dropdown/DropdownWithConfirm.tsx b/example/src/dropdown/DropdownWithConfirm.tsx
@@ -91,7 +91,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   textItem: {
-    flex: 1,
     fontSize: 16,
   },
   placeholderStyle: {

diff --git a/src/components/Dropdown/styles.ts b/src/components/Dropdown/styles.ts
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { I18nManager, StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
   mainWrap: {
@@ -28,24 +28,26 @@ export const styles = StyleSheet.create({
     justifyContent: 'flex-end',
   },
   dropdown: {
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     height: 35,
   },
   title: {
     marginVertical: 5,
     fontSize: 16,
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   item: {
     padding: 17,
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
   textItem: {
     flex: 1,
     fontSize: 16,
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   icon: {
     width: 20,

diff --git a/src/components/MultiSelect/styles.ts b/src/components/MultiSelect/styles.ts
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { I18nManager, StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
   mainWrap: {
@@ -28,33 +28,35 @@ export const styles = StyleSheet.create({
     justifyContent: 'flex-end',
   },
   dropdown: {
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     height: 35,
   },
   dropdownInside: {
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
     minHeight: 35,
   },
   title: {
     marginVertical: 5,
     fontSize: 16,
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   wrapItem: {
     marginBottom: 0.5,
   },
   item: {
     padding: 17,
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
   textItem: {
     flex: 1,
     fontSize: 16,
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   icon: {
     width: 20,
@@ -69,7 +71,7 @@ export const styles = StyleSheet.create({
     height: 45,
   },
   rowSelectedItem: {
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     flexWrap: 'wrap',
   },
   selectedItem: {
@@ -81,15 +83,17 @@ export const styles = StyleSheet.create({
     paddingHorizontal: 8,
     marginVertical: 6,
     marginRight: 8,
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
   },
   selectedTextItem: {
     marginLeft: 5,
     color: 'gray',
     fontSize: 16,
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   selectedTextLeftItem: {
     fontSize: 12,
     color: 'gray',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
 });
diff --git a/src/components/SelectCountry/styles.ts b/src/components/SelectCountry/styles.ts
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { I18nManager, StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
   dropdown: {
@@ -10,7 +10,7 @@ export const styles = StyleSheet.create({
     width: 60,
   },
   item: {
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     padding: 6,
     alignItems: 'center',
   },
@@ -23,5 +23,6 @@ export const styles = StyleSheet.create({
   selectedTextStyle: {
     flex: 1,
     fontSize: 12,
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
 });
diff --git a/src/components/TextInput/styles.ts b/src/components/TextInput/styles.ts
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { I18nManager, StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
   container: {
@@ -8,20 +8,21 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   textInput: {
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     alignItems: 'center',
     flex: 1,
   },
   input: {
     fontSize: 16,
     flex: 1,
+    textAlign: I18nManager.isRTL ? 'right' : 'left',
   },
   label: {
     marginBottom: 4,
     fontSize: 16,
   },
   row: {
-    flexDirection: 'row',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
   },
   icon: {
     width: 20,