text input's placeholder doesnt support RTL when using password type in React native

Question

when I want to use password type in text input with secureTextEntry props, placeholder doesn't support RTL

<TextInput style={styles.input}
                                   value={this.state.password}
                                   secureTextEntry={true}
                                   placeholder="الزامی"
                                   underlineColorAndroid="transparent"
                                   onChangeText={(text) => this.setState({password: text})}/>

and result

What is the solution to this problem?

Answer 1

Please check this code snippet, its working with RTL and LTR conditions. I have also attach code snippet snack.expo.io

import { I18nManager,Text,TextInput, View, StyleSheet } from 'react-native';

    <View style={{ borderWidth: 1, marginTop: 20, borderColor: '#000' }}>
          <TextInput
            style={{
              color: '#000',
              borderColor: '#000',
              textAlign: I18nManager.isRTL ? 'right' : 'left',
            }}
            value={this.state.password}
            placeholder="الزامی"
            placeholderTextColor="#303030"
            secureTextEntry={true}
            underlineColorAndroid="transparent"
            onChangeText={text => this.setState({ password: text })}
          />
        </View>

You need to add I18nManager to check your UI is in RTL mode or in LTR mode