React Native same view on every device

Question

I hope that you all are doing good. I wanted to ask for an easy way to create an exactly 1inch by 1inch view in React Native. The view should be the same irrespective of the device's ratio, size etc.

I want the view to be of 1inch.

I have tried different approaches but none worked since units in react native are not fixed. I also tried working with pixelratio and multiplying it by 160 to get an inch view, but none worked. So I want a solution that will work on every mobile device.

Thanks.

Answer 1

While there is no perfect method to make the UI responsive for all of device sizes, there are couple of guidelines for styling in react native I can provide from my experience to achieve this.

• Use flexbox layout at almost all the time. (Refer react native docs
• Use relative values for certain properties (Ex: top: 20%)
• If you are really in need of defining fixed values resort to a library like react-native-size-matters.

Perhaps this styling guideline article which I wrote will help you (Read the last bit)