diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js index 6e01487d388f65..1ca7127416e2c3 100644 --- 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 ? ( 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 index 3081519dbb08d6..6255ddfce859ca 100644 --- 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; +}