Using the Flexible Box pattern

This is one of the greatest patterns that I have learned about when it comes to styling. Flexible Box (Flexbox) literally make your boxes flexible.

Let's see a small example. The goal is to flex your box to fill the whole width of the screen:

// src/ Chapter_3/ Example_8/ App.js
export default () => (
    <View style={{ flex: 1 }}>
        <View
            style={{ backgroundColor: 'powderblue', height: 50 }}
        />
    </View>
);

Here is the result of the preceding code:

Box stretches to the whole screen width because we used flex: 1 styles

It's not too fancy, but you don't need to use Dimensions. It is obviously just a start.

You know already that Views are relative to each other by default, so if you want to make some stripes, it's as easy as stacking three div on top of each other:

// src/ Chapter_3...