19

I am getting an error saying "textAlignVertical" is not a valid style property when attempting to use the 'textAlignVertical' style on a Text element. I've checked the documentation and it says I should be able to use this style property: https://facebook.github.io/react-native/docs/text.html

has anyone else had this issue?

2
  • 1
    Try to give alignItems: 'center' to a parent of a child you want to vertically center Commented Jan 24, 2016 at 8:53
  • thanks for your help @Cherniv
    – Eric
    Commented Jan 24, 2016 at 17:29

6 Answers 6

34

The textAlignVertical style is an Android-only property. If you are developing on iOS, try using the flexbox alignment property alignItems: center instead.

It also appears that the textAlignVertical property was moved from TextInput properties to the Text element styles only three days ago, and is going to be released in React Native 0.19.

I am not sure how the React Native documentation is generated, but based on my reading of this commit diff, the documentation appears to be ahead of the latest released version.

2
  • 3
    Not sure I understand the solution, alignItems: center ( + flex: 1) doesn't seem to work (testing on iOS). Maybe outdated?
    – User
    Commented Dec 27, 2018 at 17:39
  • I am using version 0.50.3 but textAlignVertical not working.
    – technerd
    Commented May 13, 2019 at 6:00
5

Sometimes you might find that alignItems won't work well -- I saw that an icon that I was using disappeared entirely. I instead just added an alignSelf: 'center' to the styling on the text itself (rather than the parent like you need to do with alignItems) and it seemed to fix it.

3

For textAlignVertical to work properly, add lineHeight prop instead of height for ios

height: phoneWidth * 0.09, // for android
lineHeight: phoneWidth * 0.09, // for ios
0
0

The line height solution worked for me. I am writing this post to explicitly show how to set the line height by platform:

yourComponent: {
    width: 44, height: 44,
    ...Platform.select({
        ios: {
            lineHeight: 44
        },
        android: {}
    }),
    textAlign: 'center', textAlignVertical: 'center',
}

It's important that your and height and line height are the same and that you do it by platform.

It's important to note that I also have this component nested in a view with alignItems set to center.

I just wanted to explicitly write this code out as I had to piece it together from a few posts and this should make it easier if someone is looking for a quick copy/paste solution.

0

textAlignVertical: 'top' (Work for Android)

alignSelf: 'flex-start' (work for iOS)

So give them both properties if you are building your app for both Android and iOS.

Like:

style={{textAlignVertical: 'top', alignSelf: 'flex-start'}}
0

textAlignVertical only works for android use multiline for ios

<TextInput 
    height={32}
    textAlignVertical='top' // for android
    multiline // for ios
 />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.