textAlignVertical: center not working

Bug

I am trying to vertically align the text inside a Text component. I tried pretty much everything ( textAlignVertical: 'center', alignItems:'center', alignSelf: 'center',), but it still doesn’t work.

Environment info

React native info output:

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 225.43 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.4.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.2 => 0.61.2
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 0.61.2

Steps To Reproduce

1. create the componet
2. set its style
3. text inside doesn’t get vertically aligned

Describe what you expected to happen:

1. text inside to be vertically aligned

Reproducible sample code

// code. pretty much most basic way of doing it
<Text style={styles.Initials}>HO</Text>

// css
Initials: {
        height: 64,
        width: 64,
        borderRadius: 32,
        color: 'white',
        fontWeight: '600',
        fontSize: 18,
        textAlign: 'center',
        textAlignVertical: 'center',
        alignItems:'center',
        alignSelf: 'center',
        backgroundColor: colors.colorPrimary,
        overflow: 'hidden'
    }

[thundertrick]

I fix it with following style:

{
    height: 30,
    textAlignVertical: 'center',
    ...Platform.select({
        ios: {
            lineHeight: 30 // as same as height
        },
        android: {}
    })
}

Hope it helps

[retyui]

This prop supported on Android only