Responsive Design: Make React-Native Apps Fit For All Devices

Make a React - Native APP for all devices

React Native, is an awesome mobile framework in 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 developer 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 come out with a simple, easily reproducible, and performance-wise solution:

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

Create a new class and name it NormalizeSize.js

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

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

That’s all, now you can run this on different screen sizes!!!!!