Hands-On Design Patterns with React Native

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.jsexport 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 ...