React Native
About Lesson

In this React Native lesson we are going to learn about React Native Flex Layout, so according to React Native documentation a component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes, and you will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

 

 

This is the complete code for this lesson.

 

 

So in here we have created four View container in react native, the first one is our main view container and it has 300 height, we have created three child views and they have different flex layout like one, two and three, so the red view uses flex:1 , the green view uses flex:2 , and the yellow view uses flex:3 . 1+2+3 = 6, which means that the red view will get 1/6 of the space, the green2/6 of the space, and the yellow3/6 of the space.

 

 

This is our App.js and we have added our component in the App.js file.

 

 

 

First run this command to start your metro bundler.

 

 

Now you can run your application.

React Native Flex Layout
React Native Flex Layout

 

 

Also you can add flexDirection in a Flex layout, flexDirection controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.

  • row Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the left of the container.
  • column (default value) Align children from top to bottom. If wrapping is enabled, then the next line will start to the right of the first item on the top of the container.
  • row-reverse Align children from right to left. If wrapping is enabled, then the next line will start under the first item on the right of the container.
  • column-reverse Align children from bottom to top. If wrapping is enabled, then the next line will start to the right of the first item on the bottom of the container.

 

 

By default the flexDirection is column wise, you can make it row wise.

 

Thank you for visiting my website! If you enjoyed the free courses, please consider supporting my works on Patreon.
Exercise Files
No Attachment Found
No Attachment Found