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

by Arun Kumar

on December 18, 2017

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!!!!!

 

  • Share this Article

GET IN TOUCH WITH iLEAF

  • We can initiate development process at the hour of your convenience
  • Discussion on the projects can be held for a stipulated duration
  • We will sign NDA and the talks will be secured
  • We’ll show you around our cherished designs
  • Briefing on technology
  • Guaranteed source code delivery
  • Option to re-start a closed venture

See how we can unwrap your app idea and proceed towards success