Button text not aligned center vertically in react native

Question

I am facing one issue with aligning text vertically center for button but it remains slightly lower then exact center. I found includeFontPadding from documentation with suggesting some discrepancies with some third party font.

Font looks proper in iOS devices but it is not properly centered with Android.

https://facebook.github.io/react-native/docs/text-style-props#includefontpadding

Set to false to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set textAlignVertical to center. Default is true.

<Button
    style={[style.button]} block >
     <Text>Setup Now</Text>
  </Button>

Style for button:

export default {
  button: {
    elevation: null,
    shadowColor: null,
    shadowOffset: null,
    shadowOpacity: null,
    shadowRadius: null
  }
}

Answer 1

Instead of using a Text component inside a Button Component. Use the prop "title" as defined in the Button Documentation:

https://facebook.github.io/react-native/docs/button.html

So your code will be

<Button
    style={[style.button]} title="Setup Now" block >
  </Button>

Answer 2

If you are using react native default button then react native default button does not support style properties and also Instead of using a Text component inside a Button Component. Use the properties "title" as defined in the official Documentation for that please refer the below link

https://facebook.github.io/react-native/docs/button.html

Also react native provide various options for button for your customisation button and as per your use for that please refer the below link

https://facebook.github.io/react-native/docs/handling-touches

Please try this below solution, may help for your issue.

<TouchableOpacity
      activeOpacity={.5}
      style={styles.buttonStyle}>
      <Text style={styles.textStyle}>Setup Now</Text>
</TouchableOpacity>



buttonStyle: {
    padding: 14,
    backgroundColor: 'red',
    borderRadius: 6,
  },

  textStyle: {
    color: 'white',
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 16,
  },

Answer 3

Give this a try:

<Button style={{display: 'flex', justifyContent: 'center'}}>
   <Text>Setup Now</Text>
</Button>

Answer 4

or you can add style at your text for example <Text style={styles.example}>TEST</Text> and then add into your styles

const styles = StyleSheet.create({ example: { text-align:'center', } })

maybe this can help for your reference

Answer 5

You might try to add some styles to your text. It's actually mentioned directly in that snip you quoted from the docs:

For best results also set textAlignVertical to center.

<Text style={[style.text]}>Setup now</Text>

With these styles:

export default {
  button: {
    ...
  },
  text: {
    flex: 1,   // fill the button
    textAlign: 'center',
    textAlignVertical: 'center',  // this style is Android only
  }
}