100% width in React Native Flexbox

Question

I have already read several flexbox tutorial, but I still cannot make this simple task to work.

How can I make the red box to 100% width?

Code:

Answer 1

Editted:

In order to flex only the center text, a different approach can be taken - Unflex the other views.

• Let flexDirection remain at 'column'
• remove the alignItems : 'center' from container
• add alignSelf:'center' to the textviews that you don't want to flex

You can wrap the Text component in a View component and give the View a flex of 1.

The flex will give :

100% width if the flexDirection:'row' in styles.container

100% height if the flexDirection:'column' in styles.container