CODEWITHSUNDEEP
androidioscssreact-native
Milan Gajera
Milan Gajera

Reputation: 970

How can i give support Multiple Device Support in react native?

Explanation:

I have created an application in which it's looking well in an android phone(480x320, such type of devices) and iPhone 7 plus and below. When I run my application into the tablet Nexus 7(nougat). It reduces the font size, Images and even height(which specify in the CSS) of my views.

In Android, we have different types of the drawable folder to easily manage multiple device support based on the values folder also.

Problem: How can I manage my application which will run on all the devices including phone and table in Android and iPhone and iPad in iOS?

Upvotes: 1

Views: 1285

Answers (1)

EnriqueDev
EnriqueDev

Reputation: 1247

Well you asked THE question. Looking through the react native elements library I found a function they call normalizeText, you can find it here:

https://github.com/react-native-training/react-native-elements/blob/master/src/helpers/normalizeText.js

Basically they take the pixel-ratio api, which docs you can find here: https://facebook.github.io/react-native/docs/pixelratio.html

and depending on the screen size they multiply the values of with/height/font using that functions with values from 0.5 to 2. I found it a good solution to get a good visuals on every platform.

For the UI I would recommend you to use flex as much as you can, because it gets your app independent of width and height.

If you need some clarification feel free to comment.

Upvotes: 1

Related Questions