Flexbox in React Native

Tram Ho

The main purpose of Flexbox is to provide a fixed layout on different screen sizes. The main properties of Flexbox will be introduced in this article:

  • flexDirection
  • justifyContent
  • alignItems
  • flex
  • flexWrap
  • alignSelf

FlexDirection:

First create a component and use four views to arrange in that component. The flexDrirection property will determine the main axis direction in that component.

flexDirection: 'row' | 'column'

flexDirection has two values ​​’ row ‘ and ‘ column ‘. The default value is ‘column’. If the value is ‘ row ‘ evenly, which means that the main axis direction is of type ‘row’, the views will be arranged horizontally . Conversely, if the value is ‘ column ‘ the views will be arranged vertically of the component.

For example:

The above example I use the flexDirection property whose value is row. So the inner views will be arranged horizontally of the parent component.

After deciding the main axis direction, we will have the property to align the child views in the component. For this, we mainly have two properties to use

justifyContent:

justifyContent: 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'

Let’s assume that the spindle direction is ‘row’, then the justifyContent property aligns the views. By using ‘flex-start’, ‘flex-end’, ‘center’, we can arrange the views in a row and by using ‘space-around’ and ‘space-between’ we have Can create gaps between views.

  • justifyContent: ‘flex-start’ justifyContent: 'flex-start'
  • justifyContent: ‘center’
  • justifyContent: ‘flex-end’
  • justifyContent: ‘space-between’
  • justifyContent: ‘space-around’

alignItems:

alignItems: 'flex-start', 'center', 'flex-end', 'stretch'

Here, the main axis direction is ‘row’ (Horizontal), so the alignItems property will arrange the views with the opposite direction of the main axis (Vertical).

  • flex-start: will align the view on the top subview
  • flex-end: will align the view in the bottom subview
  • center: will align the view in the middle of the subview
  • stretch: It will fill the views with subview. It will only be used when the fill direction has no fixed view of the distance

  • alignItems: ‘flex-start’
  • alignItems: ‘center’
  • alignItems: ‘flex-end’
  • alignItems: ‘stretch’

flex:

Another attribute of flexbox is flex and it is a numeric value. Suppose subview is a view with value flex 1 and in subview if we want to provide 20% space for first view, 20% space for second view and 60% for view. We can do the following

flex: 0,2, flex : 0,2, flex: 0,6.

flexWrap:

It will work as flex-wrap in CSS. For example, if you have lots of views and don’t use the flexWrap: ‘wrap’ property. Then all the views will show in the subview but we will only see the number of views fit on the screen, not all views will be displayed.

The default value of flexWrap is ‘nowrap’.

  • flexWrap: ‘wrap’

  • flexWrap: ‘nowrap’

alignSelf:

Whenever we want to style a specific child element in a view or subview, we can use the alignSelf property. This property has all the values ​​of alignItems.

alignSelf: 'flex-start', 'center', 'flex-end', 'stretch'

  • alignSelf: ‘flex-end’


Above are the properties that will be used in the layout process in React-Native.

Thanks for reading!

Share the news now

Source : Viblo