React Native multi-line vertically centered text on IOS trouble

Question

I'm using a multi line TextInput in my react-native application and been stuck on this for a while. I can not get the text to be vertically aligned on IOS devices.

using textAlign='center' puts the text on IOS vertically centered... but it becomes an unwrapped never ending line.

adding multiline={true} negates the vertically aligned text in IOS and puts it at the top of the input.

<TextInput
    style={{ 
        width: wp('80%'), 
        height: hp('25%'), 
        borderWidth: 1, 
        borderRadius: 10,   
        fontSize: RF(3), 
    }}
    textAlign={'center'}
    multiline={true}
    onChangeText={entry => this.setState({entry})}
    value={this.state.entry}
/>

I would like the behavior to be like android in that it shows the placeholder text vertically and horizontally centered and when user inputs more text it starts creating multi lines if needed but always vertically and horizontally centered.

Please see image with android version on left and IOS on right.

Android on left, IOS on right

score 0 · Answer 1 · answered Jan 23 '19 at 22:32

0

try adding textAlignVertical={"center"} to textInput's props

answered Jan 23 '19 at 22:32

Aayush Anand

254
2
10

6

`textAlignVertical` only works on Android. The question is how to do it on iOS. – Petr Bela Jun 08 '20 at 00:54

score 0 · Answer 2 · edited Jul 25 '21 at 19:36

0

Add the attribute paddingTop to your TextInput in your XML file.

edited Jul 25 '21 at 19:36

Ole Pannier

3,208
9
22
33

answered Jul 25 '21 at 09:03

Alan Schwarz

15
8

score 0 · Answer 3 · answered Jul 25 '21 at 11:23

Have you tried wrapping the TextInput in a View?

<View style={{ alignItems: 'center', justifyContent: 'center' }}>
    <TextInput
        style={{ 
            width: wp('80%'), 
            height: hp('25%'), 
            borderWidth: 1, 
            borderRadius: 10,   
            fontSize: RF(3), 
        }}
        textAlign={'center'}
        multiline={true}
        onChangeText={entry => this.setState({entry})}
        value={this.state.entry}
    />
</View>

score 0 · Answer 4 · answered Jun 21 '23 at 08:22

textAlignVertical is android only docs

if the image above is the desired behaviour, align verticaly on center using multiline=true this is how I managed that:

wrap text input with view and set a min and max height in this view
in the same view set flex and justify-center
remove the paddings inside the textinput
set multiline true to the textinput

<View className="flex-1 min-h-[44px] max-h-[130px] px-6 justify-center">
  <TextInput
    multiline={true}
    className="px-0 py-0"
  />
</View>

React Native multi-line vertically centered text on IOS trouble

4 Answers4