Understanding Flexbox in React Native | by Navdeep Singh Bedi


The struggle is real

Mastering these simple Flexbox recipes will make you a React Native UI master in no time

Navdeep Singh Bedi

Getting Started

Lets start with a simple example. A container component with three components.

Which renders as so:

Initial View

Now we add flex:1 to the container:

This makes container fill its parent, i.e. whole screen.

flex : 1

Now we add:

Each view’s is set to colum by default but setting it to ‘row’ will change the orientation of the items in the container.

flexDirection set to ‘row’

Now we can control the orientation of the content using .
Now lets add and :

justifyContent: ‘flex-end’

Similarly for:

Views will render like:

alignItems:’flex-end’
  • determines the primary axis as ‘row’ or ‘column’.
  • determines distribution of children along primary axis.
  • determines the alignment of children along the secondary axis.

To set items to center :

Items to center

supports , , , , and .

For :

space-around

and :

supports: , , , and .

If we need an item to override it’s defined as defined by the container we could use style the items individually.

overrides and supports these options , , , , and .

If we tell an item to align itself to

It would end up like this:

telling the item to align at flex start

controls how much the item will grow relative to the rest of the flexible items inside the same container.

Would render as:

flexGrow

controls the item size with percent. For eg:

flexBasis

These are the basic use of flex for React View components. I will update as I learn more. Thanks for reading and feel free to leave questions in the comments!



Source link

Leave a Comment

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

Scroll to Top