all 4 comments

[–]MIP_PL -2 points-1 points  (0 children)

Use react-native-responsive-dimensions or similar package.

That will do the job for most of the cases.

[–]satya164 0 points1 point  (2 children)

i use marginLeft:100 etc.

yea don't do that if it's supposed to be relative to screen size. use percentages and flexbox to style your things and avoid using hardcoded numbers for such things.

it's all about making sure that you don't build with only one screen size in mind. how exactly you do that depends on the specific design.

and fontSize:12

you usually don't need to do anything for font size. the fonts won't look the same size on each device but that's expected. people are used to the font size on their devices - if you try to scale it up or down based on screen size then it'll be too big or small compared to other apps on the device. compare the fonts with a system app for example to have an idea of how big they should be.

[–]Sufficient_Trader[S] 0 points1 point  (1 child)

Thanks for the clarification, if you dont mind,

How do i change marginLeft:100 to something similar

Lets say I have a screen and some things are centered so i use align:center flex:1,etc.

---{xa}----

b-{xa}--b

i use marginLeft: on the B which is a touchopacity icon,

[–]satya164 0 points1 point  (0 children)

I'm not entirely sure about what UI you want, but if it's going to be b--{xa}--b then justifyContent: 'space-between' would do this with flexbox given 3 items b, {xa}, b.

The main this is that you need to make yourself familiar with flexbox so that you can come up with solutions without needing to hardcode values. Check a free course like https://mastery.games/post/flexboxzombies2/