CODEWITHSUNDEEP
iosiphonelayoutreact-native
JohnEisenheim
JohnEisenheim

Reputation: 87

Multiple screens positioning in React-Native


I'm approaching to react-native (yeah, it's awesome) from a few weeks. Reading this great post on Medium
https://medium.com/@elieslama/responsive-design-in-react-native-876ea9cd72a8#.qmwrb3ruq
I think I've understand how to resize components like views and text properties (font size). But, and here is the problem, how can I set view properties like marginTop to be scaled to various screen sizes?
For example:
{ ... firstView:{ marginTop : 10 } ... } marginTop is not the same on iPhone 5 and iPhone 6. Can anyone provide a simple example on how to do this?
Thank you so much!

Upvotes: 2

Views: 516

Answers (1)

agenthunt
agenthunt

Reputation: 8678

By default all units in react native use density independent pixels. You can use PixelRatio to get the device pixel density. For margins you probably dont want to scale it with different pixel density. So , you can use it as 

{
...
   firstView:{
     marginTop : PixelRatio.getPixelSizeForLayoutSize(10)
   }
...
}

Upvotes: 1

Related Questions