CODEWITHSUNDEEP
layoutreact-native
Divya Jalan
Divya Jalan

Reputation: 79

React Native Constant Layout on Multiple Devices

I have a minimal app with basic views, texts, images and buttons in react native. The problem I am facing, is in managing layout for multiple devices. Any suggestions on how can I maintain a same (proportionate) view & font size for multiple devices (multiple screen resolutions and screen sizes).

View: For example, if I want a list view of items, where each row has one image on the left, some text in between and 2 buttons on the right (one below the other i.e. flex-direction: 'column'), how can I have this look good on a 5" device as well as a 10" device?

Also, consider the buttons have some borderRadius, if we are scaling the buttons, the borderRadius value will also need to be increased. How do I achieve this?

Fonts: I have tried using PixelRatio.getFontScale() but this scales the font depending on only the resolution (from what I understood). Using this, makes a font of size 12 look bigger on a 5" device with higher resolution and smaller on a 10" device with lower resolution. So how can I manage font sizes for the react native app?

Upvotes: 1

Views: 3363

Answers (2)

MJ Studio
MJ Studio

Reputation: 4631

How about this library? react-native-scaled-layout

You can use scaled dimensions for your layout margin, height, padding ...

(36).scaled() /* or */ (36).d() 

(36).widthScaled() /* or */ (36).w()

(36).heightScaled() /* or */ (36).h()

(24).fontScaled() /* or */ (24).f()

style={{
    width: (100).w(),
    height: (210).h() + safeAreaBottom,
    borderRadius: (16).d(),
    justifyContent: 'center',
    paddingBottom: safeAreaBottom + (24).h(),
}}

Upvotes: 0

JamesWatling
JamesWatling

Reputation: 1185

In addition to the PixelRatio.getFontScale() you can also use the Dimensions API to get the height and width of the window, and scale your components relative to that. I have built an app that runs on both iOS and android and use this to scale width's + heights.

Checkout the link Dimensions @ Facebook - React Native

ie.

Dimensions.get('window').width; Dimensions.get('window').height;

Will return you the size of the window

Upvotes: 0

Related Questions