Replaced flexbox in React Native

Attention:

• This article is suitable for all of you already know about React Native .
• Posts based on my own limited experience, is there a better way to solve the problem, please give your comments.

In fact, I didn’t use flexbox in React Native .

Then why

Background

Regarding how to use flexbox , in my opinion the official document explains more confusing than this article .

When dev (developers) do not draw UI arbitrarily, usually the team designer will give a specific App design detailed to each pixel (pixels).

Well wait, when doing the App, you cannot set the UI size to be a const value, but must be suitable for many different phone lines, right (responsive)?

The difference between phone models:

• size of the screen.
• Pixel density affects screen sharpness.

I have consulted Native solutions to see how they do on the home page for android-dev here .

Think of it as a flexbox

Steps to do the UI according to the actual flexbox I did (: v):

• accurately scale components in the parent component so that the sum of the proportional coefficients of the child component exactly 1 .
• adjusted to look like UI design.

Seemingly simple, but adjusting the ratio to suit different types of screens takes a lot of time but also must ensure the total ratio is 1 .

Steps to make UI in other ideal flexbox :

• from design take the size of the child component divided by the size of the parent component get 1 ratio.
• take that rate to calculate the flexbox rate (make sure the total rate is 1 ).

In my opinion, it takes quite a lot of time.

Think naturally

Steps if following the nghĩ thuận tự nhiên way of nghĩ thuận tự nhiên instead of flexbox :

• from design take the size of the child component divided by the size of the parent component get 1 ratio.
• part in the source code , multiply the ratio by the size of the parent component . Note that the parent component size is dynamic depending on the screen of each phone.

Evaluation: pretty quick and easy to understand.

Posts on how to do this here

Packages are useful for this

Please experience to understand better.

• react-native-responsive-screen : partially simplifies this way.
• react-native-device-info : get Device Information.
• react-native-orientation : listens to the device changing orientation event.

Summary

• This is just a suggestion when making UI for React Native . In fact, I rarely use flexbox .
• flexbox is just one of many APIs of React Native , do not depend too much on an API or package in this open source ecosystem.

Flow me on github here to color