alignItems: center prevents flex row text wrapping in React Native

Question

For some reason, setting alignItems: center in the style on the container view causes text inside a flex row to stop wrapping, and to not respect the container view's padding.

Working example and code here: https://rnplay.org/apps/FsDXuQ

I tried following the advice to set flexDirection to column, use flex: 1 or flexWrap but the only thing that works is removing the alignItems: center from the container view.

I don't understand what's going on here. What if I want:

1. Row elements, which don't take up the full width of the screen,
2. Centered,
3. With long text inside them,
4. Which wraps?

Thanks.

Answer 1

Use flex property. Ex.<Text style={{ flex: 1}}>