How to Align Text Input Correctly in React Native

How to align text input correctly in react native?

I had the same issue, but the above notes didn't solve it. There's an android-only style property textAlignVertical that fixes this issue on multiline inputs.

i.e. textAlignVertical: 'top'

How to centralize text in textinput

You should use the inputText props to align text to center as below

textAlign={'center'}

And it will look like

<TextInput style={styles.input} textAlign={'center'} placeholder="Your Account" />

React Native: Why doesn't <TextInput/> center with flexbox?

Add textAlign: 'center' to your TextInput component.

style={{fontWeight: 'bold', height: 18, color: 'red', textAlign: 'center'}}

The actual element is center aligned, but textAlign controls the alignment of the inner text and placeholder.

The result of adding the change to your code

TextInput's content is not center vertical

I finally found the reason,this is because TextInput has default padding, My solution is add paddingTop: 0,paddingBottom: 0,to the TextInput style.

React-native: textAlign: 'right' not styling correctly

Work-around -

<View style={{flex: 1, flexDirection: 'row'}}>
  <View style={{flex: 1}}>
    <Text>4 Views 0 Comments</Text>
  </View>
  <View style={{flex: 1}}>
    <Text style={{textAlign: 'right'}}>Solve This</Text>
  </View>
</View>

---

Related Topics