Problem with Handling different screen sizes in Android-React native

Question

I'm a bit confused with handling different size of screens for app.

in android there is a unit named dp that seems to handle screen size and resolution variation. i expect when i use this unit instead of pixels, i see same size component(like button, ...) in every screen. e.g a button with size 20dp must look same size in all screens.

in articles i read that React-Native uses dp as its main unit as well. so expected the same thing here, but it's not working as i expected. a button with 20dp aren't looking the same in different screens.

also there are articles in which they show how to handle different screen sizes, although they say RN using dp they use some arithmetic logic to scale their components to each screen size.

e.g const scaleX = Dimension.getWidth() / baseWdith=> simplified code

the flow is that, we make a UI with an specific base screen and make it look how we want it to be, and then we scale components later in new screens.

my question is that isn't dp unit supposed to do the same thing!? why RN didn't handle autoscaling itself? if there is sth named dp to manage screen sizes-ratio then why they doing manual scaling?

Answer 1

In RN we are not using dp as the unit of scaling. We have to do our own logic to manage different screen sizes. I created my own scaling mechanism with percentage scaling. below is the common function for calculating the size for different screens

 import { Dimensions, PixelRatio } from 'react-native';
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
const widthDP = widthPercent => {
    // Convert string input to decimal number
    const elemWidth = parseFloat(widthPercent);
    return PixelRatio.roundToNearestPixel(screenWidth * elemWidth / 100);
};
const heightDP = heightPercent => {
    // Convert string input to decimal number
    const elemHeight = parseFloat(heightPercent);
    return PixelRatio.roundToNearestPixel(screenHeight * elemHeight / 100);
};

You can use these functions as below in any of your screens

  const style = StyleSheet.create({
    container: {
        padding: 2,
        width: widthDP('69.60%'),
        height: heightDP('100%),
    },
    textStyle: {
        textAlign: "center",
        fontSize: widthDP('3.70%'),
        color: '#000000',
    },
})

You can use below sample table for dp to percentage conversion

 HEIGHT:

5:heightDP('0.80%'),
7:heightDP('1.05%'),
8:heightDP('1.2%')
9:heightDP('1.35%'),
10: heightDP('1.5%'),
11:heightDP('1.60%'),
12:heightDP('1.8%'),
14:heightDP('2.12%'),
15:heightDP('2.25%'),
17:heightDP('2.50%'),
18:heightDP('2.65%'),
19:heightDP('2.80%'),
20: heightDP('2.95%') //
22:heightDP('3.25%'),
24:heightDP('3.5%'),,
25:heightDP('3.66%'),
29:heightDP('4.27%'),
30:heightDP('4.4%'),
31:heightDP('4.58%')
33:heightDP('4.25%'),
35:heightDP('5.15%')
36: heightDP('5.30%')//
39:heightDP('5.75%'),
40:heightDP('5.9%'),
42:heightDP('6.2%'),
48:heightDP('7%'),
50:heightDP('7.35%'),
52:heightDP('7.62%')//
55:heightDP('8.10%'),
64:heightDP('9.40%'),
65:heightDP('9.52%'),
66:heightDP('9.66%'),
67:heightDP('9.80%')
71.6:heightDP('10.50%')
72:heightDP('10.55%')//
76:heightDP('11.15%'),
83:heightDP('12.20%')//
90:heightDP('13.19%'),
91:heightDP('13.35%'),
105:heightDP('15.36%')
109:heightDP('16.00%'),
123:heightDP('18%')
136.7:heightDP('20%')
140:heightDP('20.50%')//
174:heightDP('25.5%'),
190:heightDP('27.88%'),
194:heightDP('28.42%'),
209:heightDP('30.59%')
222:heightDP('32.50%')
224:heightDP('32.80%')//
230:heightDP('33.70%'),
246:heightDP('36%'),
265:heightDP('38.8%'),

328heightDP('48%')
334:heightDP('49%')//
341:heightDP('50%')//
344:heightDP('50.40%')
348:heightDP('51%')
355:heightDP('52%')
409:heightDP('60%'),
423:heightDP('62%')
434:heightDP('63.55%'),


WIDTH:


5:widthDP('1.25%'),
7:widthDP('1.80%')v
8:widthDP('1.99%'),
9:widthDP('2.2%'),
10:widthDP('2.5%'),
12:widthDP('3.0%'),
13:widthDP('3.2%'),
14:widthDP('3.5%'),
15:widthDP('3.70%'), 
16:widthDP('3.90%')//
17:widthDP('4.20%'),
18:widthDP('4%'),
18:widthDP('4.4%'),
20:widthDP('4.83%'),
22:widthDP('5.4%'),
24:widthDP('5.8%'),
26:widthDP('6.40%'),
29:widthDP('7.1%'),
30:widthDP('7.30%'),    
39:widthDP('9.50%'),
40:widthDP('9.80%')
44:widthDP('10.70%'),
45:widthDP('11.00%'),
48:widthDP('11.70%')//
60:widthDP('14.50%')
64:widthDP('15.65%'),
68.5:widthDP('16.7%')
70:widthDP('17.2%')

72:widthDP('17.55%')

75:widthDP('18.30%')
76:widthDP('18.65%')
80: widthDP('22%')
273:widthDP('66.40%'),
286:widthDP('69.60%'),
315:widthDP('76.70%'),
335:widthDP('81.5%'),

WidthDP(1)= 4.190476190476191

HeightDP(1)= 6.857142857142857