TextInput placeholder RTL support?

[yaronlevi]

Hi (-:
When using TextInput in RTL mode, the header is placed right side (as it should), but the placeholder text is placed left. How can we tell the placeholder text to also be on the right side:

[ferrannp]

@yaronlevi does text-align: right works for you in the meantime?

[yaronlevi]

Unfortunately, setting text-align:right does not work. Is their a rough estimation on when RTL support to TextInput might be available?

[ferrannp]

This should land with #429 and #434. So let's keep discussion there.

[saharjedidi]

Please can you you give me the code of TextInput in RTL mode
thanks @ferrannp
I want to support icon visible password in the textInput

[Trancever]

@saharjedidi What do you mean exactly saying give me the code? It's an open source project so feel free to fork/clone it and use it according to your needs.

[saharjedidi]

@Trancever
this is my code
<TextInput
label=' كلمة المرور'
mode='outlined'
secureTextEntry='true'
underlineColorAndroid={'rgba(0,0,0,0)'}
style={this.getStyle().TextInp} text='white'
direction ='rtl'
value={this.state.text}
editable= 'true'
onChangeText={password => this.setState({ password })}
underlineColor='transparent'
editable= 'true'
theme={{ colors: { placeholder: 'white', text: 'white', primary: 'white',underlineColor:'transparent',background : '#3489'}}}

I want to drag an icon like this and I don't know how ?

thanks a lot for your reply

[rsimbu89]

H @Trancever @saharjedidi
Is there any way to set RTL option for placeholder in android?

Setting textAlign: 'left' || 'right' is working fine with iOS but not with android

[gaurav8809]

The text should be right to left but not flipped

[hosseini-rtr]

Hi, On your App.js file add

import { I18nManager } from 'react-native';
I18nManager.allowRTL(true)
I18nManager.forceRTL(true)

Like:

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { I18nManager } from 'react-native';
import Home from './src/Pages/Home';
import Login from './src/Pages/Login';
import Splash from './src/Pages/Splash';
I18nManager.allowRTL(true)
I18nManager.forceRTL(true)


const SplashScreen = createSwitchNavigator({

  Splash,
  Login,
  Home,
}, {
  navigationOptions: {
    headerVisible: false,
  }
})

export default createAppContainer(SplashScreen)

goodLuck

[gaurav8809]

Hi, On your App.js file add

import { I18nManager } from 'react-native';
I18nManager.allowRTL(true)
I18nManager.forceRTL(true)

Like:

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { I18nManager } from 'react-native';
import Home from './src/Pages/Home';
import Login from './src/Pages/Login';
import Splash from './src/Pages/Splash';
I18nManager.allowRTL(true)
I18nManager.forceRTL(true)


const SplashScreen = createSwitchNavigator({

  Splash,
  Login,
  Home,
}, {
  navigationOptions: {
    headerVisible: false,
  }
})

export default createAppContainer(SplashScreen)

goodLuck

What it will do?

[Saff-Elli-Khan]

Add textAlign attribute directly to the React Native TextInput.

<TextInput textAlign="right" placeholder="RTL Text" />

[IlanAvigdor]

Add textAlign attribute directly to the React Native TextInput.

<TextInput textAlign="right" placeholder="RTL Text" />

This solution will indeed align the placeholder to the right, but will also force the alignment on the text entered by the user, even if the text is in English.