Using flexbox algorithm with React Native

by Ronak Patel Co Founder | CEO @ Aglowid IT Solutions

React Native will provide you with the service of cross platforms because you can use it for android as well as IOS too.

For developing native iOS apps, Xcode is used, while the most popular for developing Android apps is Android Studio.

Flexbox solves design issues that are particularly challenging on mobile, and it does so strikingly well without requiring hacky CSS or Javascript tricks. But there’s a learning curve.

flexbox with React Native

For styling it uses similar to CSS, is called Flexbox Layout.

Flexbox is designed to provide a consistent layout on different screen sizes.

A component can specify the layout of its children using the flexbox algorithm.

• Here is some cool Benefit of flexbox:

ü It's difficult to see which conduct is more ideal when spreading out tiles, yet you may run over a circumstance in which nowrap serves you better.

• flexWrap takes two qualities: nowrap and wrap.

The default esteem is nowrap, implying that things stream off the screen on the off chance that they don't fit. The things are cut, and the client can't see them. To work around this issue, we utilize the wrap esteem.

Let's see some alignment properties to control the Flexbox layout:

• flexDirection:

ü First, make a component and take four boxes to arrange in that component. Let’s Imagine that component is a parent and four boxes are children.

ü The first thing we have to decide that direction of arranging children in parent which is main axis direction. This is controlled by flexbox property called flexDirection.

• flexDirection: 'row' | 'column'

ü Now that we’ve chosen the main axis, we can determine the spacing of the items along that axis with justifyContent. We have two choices:

1. We can align the items with flex-start, flex-end, or center.

2. We can space the items out evenly across the axis (with space-between the elements or space-around the elements)

ü Doodle yourself a top navigation bar with a home button flanked by two directional icons on either side of the screen a left chevron (<) and a right chevron (>). How would you write down the Flex properties to reflect that setup?

ü Again, choose your main axis (flexDirection: ‘row’). Then set the spacing along that axis: justifyContent: ‘space-between’ to put equal spaces betweenthe three items (but not around all of them).

• justifyContent:

ü Now that we’ve chosen the main axis, we can determine the spacing of the items along that axis with justifyContent.

ü • alignItems: 'flex-start', 'centre', 'flex-end', 'stretch'

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

1. flex-start: It will align children at start/top of the parent.

2. flex-end: It will align children at end/bottom of the parent.

3. center: It will align children at the center of the parent.

4. Stretch: It will stretch the children across the opposite of the main axis until it reaches the ends of the parent. It will apply only when the opposite of the main axis don't have fixed dimensions.

• flexWrap: 'wrap' | 'nowrap'

ü It will work as flex-wrap in CSS. For example, if we have so many numbers of boxes and we did not mention flexWrap: 'wrap' property to them, then all the boxes render in the parent but we only see the number of boxes fit on the screen, not all the boxes.

ü Because scrolling requires a ScrollView, and items just go on forever if you don’t specify that they should flexWrap: ‘wrap’ or give them flex fluidity. The buttons would technically be there, but you would only see the number of buttons that fit on your screen. The same is true when your flexDirection is a row items would keep on going horizontally. You can explicitly disable this behaviour by setting flexWrap: ‘nowrap’.

ü Default value for flexWrap is 'nowrap'.

• alignSelf: 'flex-start', 'centre', 'flex-end', 'stretch'

ü Whenever we want to style a specific child element within a container or parent, we can use alignSelf property. This property has all values of alignItems.

These are the advantages of using flexbox algorithm with React Native if you want to know more about React Native Development then reach us at Aglowid IT Solutions.