React native + Android + text alignment issue

Question

I have a React Native app that uses.

• react : 16.0.0-alpha.6
• react-native : 0.44.2

And in it I'm using TextInput

The problem is on Android, if the text is more than the TextInput can handle, it's getting right aligned instead of left

I'm expecting it to show something along the lines of :
Lorem ipsum dolor sit amet, consectetur...

This works fine on ios. This issue is only happening on android.

<TextInput style={inputStyle} />

inputStyle: { fontSize: 20, flex: 0.6, textAlign: 'left, borderWidth: 1, },

I made few attempts and the best solution I have so far is to enable multiline on TextInput. But I don't want to have a multiline text input. I want a single line TextInput with left text alignment.

This is how it looks like with multiline

Answer 1

You can use:

inputStyle: { fontSize: 20, flex: 0.6, flexWrap: 'wrap', textAlign: 'left, borderWidth: 1, },

flexWrap takes the property of autoHeight adjustment and increases the height of the component based on the content inside it.

Src: Layout Props

Answer 2

Had this issue myself. One alternative is to use the TextInput's selection property, e.g.

selection={{start: 0, end: 0}}

Just make sure you remove the property on input focus (in case the user wants to edit the text again).