Use Flexbox with React native

Tram Ho

Hello everyone, today I will go with you to learn about React Native and Flexbox. Just like other platforms. When we make the app, there are support tools to design the interface. And the characteristic of React Native is FlexBox. We can use the FlexBox algorithm to build the interface so that the layout will fit different screen types. Similar to iOS’s Auto Layout: v. In React Native’s document, it describes that Flexbox is similar to CSS when you code Web. There are only a few minor differences. For example, the default values ​​are somewhat different, with FlexDirection having the default value of column instead of row, or the Flex parameter will only support single numbers, etc.

Flex

The flex attribute will define how that view fills the parent view. Take a look at the code below

The example above drew 3 views, including powderblue, red, blue views. And has been passed the flex parameters with corresponding values ​​of 1, 2, 3. 1+ 2 + 3 = 6, which means that the powderblue color view = 1/6 the parent view, the red view = 2 / 6 parent views, and blue view = 3/6 parent views. When running the code up, we will easily see:

Flex Direction

Flex direction controls the direction in which the child views will be rendered. It consists of 4 values ​​as follows

  • column (default value): The views will be aligned in order from top to bottom
  • column-reverse: The child views will be aligned in order from bottom to top (opposite of column).
  • row: The child views will be aligned in order from left to right

Layout Direction

Layout Direction can be called origin coordinates (left, right). All child views or text will be layout from left to right depending on which value is set: LTR (default): Text and child views will be layout from left to right RTL: Text and child views will be layout from right to left

Justify Content

Justify Content will align the child views based on the main axis (vertical axis) of the parent view.

  • flex-start (default value): child views will be layout from the parent view’s original coordinates
  • flex-end: child views will be layout towards the end of the parent view’s parent coordinates
  • center: the child views will be arranged in the middle of the parent view
  • space-between, space-around, space-evenly: Align evenly spaced spaces between views To make it more intuitive, take a look at the following cases:

AlignItem

This property is similar to JustifyContent, but instead of the vertical axis, it aligns based on the horizontal axis

  • stretch (default value): the width of the child view will be pulled equal to the parent view.
  • flex-start: aligns at the beginning of the horizontal axis
  • flex-end: aligns at the end of the horizontal axis
  • center: align at the middle of the horizontal axis
  • baseline: according to the content of each item Note: for stretch, we need to remove the width property of the view to be effective

Align Self

The Align Self property is similar to the Align Items, but will be set in the child view, affecting itself on the reference view as the parent view. Align Self will take precedence over Align Items

Flex Wrap

When the total length or width of the items in the view is greater than the parent view, they can be cut into a new row or column. By default, child views will overflow.

Align Content

This property is only effective when we have used wrap. It will align the line spacing that has been cut by wrap. Its values ​​are similar to justify content. Only the difference will be applied. Let’s observe

Flex Basis, Grow, and Shrink

Flex Grow

The flex grow defines how much the item will be expanded to fill the void in the parent view. For example, there are 3 views as follows, the total width is smaller than the parent view

When the flex grow set of the first view is 1, its width adds more space to spread out the parent view

Keeping that value of the first view, we set flex grow of the second view to 2

The result is as follows: the width of the second view has been added to the excess space by two times the first view

Flex Shrink

This property is the opposite of Flex grow, if the total number of items is greater than the parent view, this attribute will define the percentage to be subtracted.

Width and Height

Regarding the height and width of the item, we can calculate in the following 3 ways:

  • auto (default value): React Native will automatically calculate to match the container
  • pixels: we will give them a certain value
  • percentage: Based on the ratio between view and container

Absolute & Relative Layout

This is a posittion attribute, which will define the location where the view will appear in the parent view

  • relative (default value): based on 4 values ​​top, bottom, left, right. When changing these values, the other views related to this view remain in the same position
  • absolute: when the view set to posittion is absolute, it is set to be independent of the other views in the parent view. The top 4, bottom, left and right values ​​are only related to the parent view, not the other peer views. Can imagine the value of the z-axis (height) will be different when they set this attribute

The above is the basics of Flexbox in React Native’s design, hope to help you. Thanks for reading my article.

Share the news now

Source : Viblo