React Native FlexBox: Why does adding `alignItems` prevent child from having 100% width?

Question

In my React Native app, I have a parent View that container a child View that contains a Text element. By default, the child View's width stretches to fill the parent. But if I add alignItems: 'center', the child moves to the center but also its width shrinks to be only as wide as to fit the text it contains.

Here is a snack. Un-comment alignItems: 'center' to see the difference: https://snack.expo.io/@gkeenley/alignitems-example

Does anyone know why this happens?

Answer 1

The child doesn't have an explicit width, so it's width would normally be just enough to surround the text that it contains, and that's what you're seeing when alignItems is set to 'center'. The reason you saw it taking up the full width before is that the default value for alignItems is 'stretch', which causes child's normal width to not matter and it instead gets stretched to take up all the space.

If you'd like the child to be larger in your centered version, you can either give it an explicit width:

child: {
  height: '100%',
  width: '50%',
  backgroundColor: 'red'
}

...or use padding to put some extra separation around the text.

child: {
  height: '100%',
  padding: 5,
  backgroundColor: 'red'
}