Responsive Design: Make React-Native apps fit for all devices

Blog Author - Arunkumar M G

React Native, is an awesome mobile framework which You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. Either if you’re a web developper or a mobile one, you can build a great looking app in a few hours without too much hassle. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

As it supports all mobile platforms(ios, android and windows), the most complex part is the dynamic styling of your UI.

Regarding the number of mobile screen sizes out there, it’s impossible to set absolute styling for everything, even if Flexbox helps greatly with the layout.

To fill this, I’ve came out with a simple, easily reproducible and performance wise solution:

For making the app dynamic first develop the design for a particular screen size and make use of this screen size as the basic height and width

Create a new class and name it as NormalizeSize.js

After that create new Metrics.js file where you specify all the dimensions.

And in your stylesheet add the button height as normalized one.

Thats all, now you can run this on different screen sizes!!!!!

Get a Free Consultation