Responsive Design in React Native
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:
- You cannot set relative sizes (percentages or em).
- 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:
- 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 😉
