React Native: How can I control Android 9000 screen sizes?

Question

I just built the most insanely amazing complex app in the last 6 months for iOS and Android using React native.

Everything was perfect and everything works great ...

I developed iPhone 4s, 5, 6, 6+ using a special component that I wrote, which basically works like ...

override: { ip4: { fontSize: 8 }, ip5: { fontSize: 10 } } 

and etc.

It really worked great for iOS.

Today I opened GA and was terrified to realize that I had forgotten the Android style. I looked at our Google analytics and there literally ... 700 screen sizes, which are all different.

I am completely confused by the prospect of designing for all of these, especially considering that they have a density of several pixels.

My question is: WHAT am I actually doing for accounting ...

• fields / intervals (mostly common integers to fill in or something else)
• font size

These are two things that I am very confused about how to handle all the different combinations.

I looked at PixelRatio , but I have no idea how to use it, or even if I'm on the right track.

How do most people deal with this?

Answer 1

You can use both Dimensions and PixelRatio to get screen sizes and pixels. I use this, for example, to set the image size based on the screen size.

For instance:

 import Dimensions from 'Dimensions'; import PixelRatio from 'PixelRatio'; var {height, width} = Dimensions.get('window'); var pixelr = PixelRatio.get(); // Calculate styles, heights, fontsizes based on the numbers above 

Answer 2

You can use Media Queries to manage multiple screen sizes, I used the concept of media queries in my library (cord) at an early stage of development.

I have a textbook search during the search, I think it’s useful,

https://www.npmjs.com/package/react-native-responsive

Answer 3

We have finished using flexbox all over the window. In this way, the content accommodates itself when space is available.

Of course, we lost whole days trying and testing.