Responsive Design in React Native

Élie Slama
Jan 28, 2016 · 1 min read

Or how to fix a big problem with a few lines of code.

React Native, is an awesome mobile framework.
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.
Also, the react component paradigm is a very practical way of organizing your code, and the more you reduce the size of the components, the less you’ll struggle debugging them.

Of course it has its caveats but, as a front-end web developer (and SASS lover ❤ ), the most problematic for me was the lack of dynamic styling for responsive design.

In short:

  1. You cannot set relative sizes (percentages or em).
  2. Breakpoints are simply absent.

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

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

  1. First, here’s our Component

2. Now, here’s our Stylesheet

From this point, you’ll just have to set your global styles & sizes in your stylesheet, and use it for each of your component.

In minutes, you’ve just went to a statically styled app to a fully responsive one!

Good Luck on your React Native adventures 😉

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store