Mobile: Fix BottomSheet TextInput Cell alignment issue for RTL layout. (

#13815) * Fix BottomSheet TextInput Cell alignment issue in RTL layout. * Fix lint issues
WordPress · Feb 12, 2019 · 9f5f1c3 · 9f5f1c3
1 parent 36efc71
commit 9f5f1c3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TouchableOpacity, Text, View, TextInput } from 'react-native';
+import { TouchableOpacity, Text, View, TextInput, I18nManager } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -44,11 +44,14 @@ export default function Cell( props ) {
 	};
 
 	const getValueComponent = () => {
+		const styleRTL = I18nManager.isRTL && styles.cellValueRTL;
+		const style = { ...styles.cellValue, ...valueStyle, ...styleRTL };
+
 		return isValueEditable ? (
 			<TextInput
 				ref={ ( c ) => valueTextInput = c }
 				numberOfLines={ 1 }
-				style={ { ...styles.cellValue, ...valueStyle } }
+				style={ style }
 				value={ value }
 				placeholder={ valuePlaceholder }
 				placeholderTextColor={ '#87a6bc' }

diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.native.scss
@@ -98,3 +98,7 @@
 	text-align: right;
 	flex: 1;
 }
+
+.cellValueRTL {
+	text-align: left;
+}