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.
alignItems: 'center'
to a parent of a child you want to vertically center