React Native: Unable to center Text in View component

Question

I am unable to center a Text component in a View component in React Native both on android as well as ios.

As you can see the + sign in not centred in the white circle.

This is my component:


<TouchableOpacity
    style={styles.blueButton}
>
    <View style={styles.addButton}>
        <Text style={styles.plus}>+</Text>
    </View>
</TouchableOpacity>

This is my stylesheet:

blueButton: {
    height: 40,
    width: 40,
    borderRadius: 3,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#3498DB',
},
addButton: {
    width: 15,
    height: 15,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
},
plus: {
    color: '#3498DB',
    fontSize: 20,
},

Can you show your View with blue color as in the screenshot also its design ? — Ajith, Feb 18 '20 at 05:58

Ajith · Answer 1 · 2020-02-18T06:12:19.493

0

Can you try my below code:

Compnent code:

<View style={styles.addButtonBlue}>
  <View style={styles.addButton}>
    <Text style={styles.plus}>+</Text>
  </View>
</View>

Stylesheet Code

addButtonBlue: {
  width: 70,
  height: 70,
  borderRadius: 10,
  justifyContent: 'center',
  alignContent: 'center',
  alignItems: 'center',
  backgroundColor: '#3498db',
},
addButton: {
  width: 30,
  height: 30,
  borderRadius: 30,
  justifyContent: 'center',
  alignContent: 'center',
  alignItems: 'center',
  backgroundColor: '#fff',
},
plus: {
    color: '#3498DB',
},

edited Feb 18 '20 at 06:12

answered Feb 18 '20 at 06:05

Ajith

2,476
2
17
38

Hi, your solution doesn't work with `addButton` having dimensions of 15px. – Vinay Sharma Feb 18 '20 at 06:29
Let me check..Can you show your View with blue color as in the screenshot also its design ? – Ajith Feb 18 '20 at 06:34
Sure, I've added the blue button as well. – Vinay Sharma Feb 18 '20 at 06:35
But it does work for me when I change addButton width and Height to 15, Anyway you update your question, I ll check – Ajith Feb 18 '20 at 06:39
@VinaySharma It is working for me brother.. You still face issue ? – Ajith Feb 18 '20 at 06:59
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208023/discussion-between-vinay-sharma-and-ajith). – Vinay Sharma Feb 18 '20 at 07:05

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

The extra font padding in android might be the culprit here. Try adding includeFontPadding: false to the text style.

more info here - https://facebook.github.io/react-native/docs/text#style

includeFontPadding: bool (Android)

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.

React Native: Unable to center Text in View component

2 Answers2