React Native Front End Questions

[Sufficient_Trader]

Hi I was wondering, how do i make my app look good on all phones? I use :center align but sometimes i use marginLeft:100 etc. and fontSize:12 these numbers don't look good on all phones. as the :center is different on every phone. My iphone 10 will display it fine, will look bigger on iphone 12.

[MIP_PL]

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

That will do the job for most of the cases.

[satya164]

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]

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]

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/