Center Text

[holyxiaoxin]

I'm trying to center my Text perfectly centered inside the button. I've tried textAlign: 'center', and I can't seem to add padding on top. Seems like the text is being positioned to top of the container.

Usually lineHeight fixes this issue but in this case, not. :/

[lrettig]

Seconded, I'm having the same problem. The text appears to be horizontally centered by default, but if I make my button taller with a height tag, the text stays at the top. I tried adding style to the text using a <Text> tag inside the button but this just caused the text to disappear completely.

[heymanhn]

This component isn't realistically usable until this issue is resolved.

[somoso]

I've solved this problem by using a textAlignVertical: "center" CSS style in the style part.

e.g.

render() {
   return(
        <Button style={style.btnStyle} onPress={()=> console.log("Button pressed")}>
           Hello World
        </Button>
  )
}

var style=StyleSheet.create({
  btnStyle: {
       justifyContent: "center",
       alignSelf: "stretch",
       textAlignVertical: "center"
   }
}

[yahayaohinoyi]

@holyxiaoxin and @lrettig I solved this problem by using justifyContent:'center' and alignItems:'center' in the buttonstyle and not the textstyle

[holyxiaoxin]

Issue was raised quite some time back and it might have been fixed. Closing this.