React – Native – Day 9 – Layouting Views Using Flex

I am using mac for creating react native project. You will learn how to distribute user interface components like view, button etc using Flex.

Flex works similar to iOS autolayout and android constraintLayout. The main purpose of flex based layout is to draw UI supporting different screen sizes.

Three key items are:

  • FlexDirection : ‘row’ or ‘column’
  • alignItems : ‘center’, ‘flex-start’, ‘flex-end’, ‘stretched’
  • justifyContent : ‘center’, ‘flex-start’, ‘flex-end’, ‘space-around’, ‘space-between’

Let’s create our project:

Launch Terminal and type:

react-native init FlexExamples

Open index.js file and paste below code:

Here is the output:

Another Example with

Another Example with

Another Example with

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.