There are few things more annoying than realizing the great looking screenshots from Google, don’t translate to your device.
I certainly don’t expect every app to test their UI on the 10,000+ Android devices out there and thankfully, you don’t have to, if you’re building a responsive UI.
Designers have it tougher now than before. There are many things that every designer should know as they not only have to design for stationary devices, but also mobile devices like the tablet and smartphones, and since we are talking about a lot of different screen sizes and resolutions here, it’s a huge task to shoulder.
In the modern world, social media has become a key marketing strategy.
According to recent analytics, about 3.2 billion people use social media worldwide, and 91% of that is accessed via mobile devices.
Companies and influencers are constantly sharing news and article links through their social media platforms. If someone finds your page on Instagram, clicks on your link, and pulls up an app that doesn’t look good and is difficult to use, not only have you lost a potential follower but also a potential customer.
Social media isn’t the only change in the marketing industry. Emails are also being viewed more on mobile than on desktop. In fact, 59% of email opens occur on mobile devices. If you have any links in your emails, then your users are more likely to view them on a mobile device than on a desktop.
That’s where having appealing and responsive mobile designs comes in the picture to save the day.
As more and more people are viewing applications through mobile than desktop, having responsive mobile designs can be a huge advancement to attract and retain customers.
In this blog, we are going to learn how to create intuitive designs for mobile applications with React Native, so let’s dive in-
Steps to develop Responsive Mobile App Layout with React Native-
In React Native, there are some best UI/UX designing practices that will help you design apps that look stunning on any device of any screen size (custom size). So, let’s see what these practices are-
1. The First Rule — Stay Flexible and Fluid
The most important aspect of responsive design is flexibility. Every element of your design be it the images, text blocks, layouts, media, list & sections must be flexible.
Making sure every item that appears on your screen is fluid allows you to resize, reposition and reflow.
2. Flexibility
Flexibility refers to layouts making optimal use of the available space and adjusting when the available space changes.
Adjustments can take many forms: simply growing the size of a single view, repositioning views so that they are in more accessible locations, showing or hiding additional views, or a combination of these.
3. Breakpoints and window size classes
The breakpoint system is a way of categorizing different screen-sizes into classes, by specifying a width at which your UI will change. These breakpoints mark your transition to a new class of screen sizes.
The actual portion of the screen that is allocated to your app is the app’s window. It may occupy the full screen or part of the screen, so use the window size when making high-level decisions about your app’s layout.
How to create files for global use and responsiveness?
Moving ahead, we will learn to create some files for global use and responsiveness according to screen height and width-
matrics.js
First, we created one file named matrices, here we took dimensions from react-native library and create matrices for rotation of device. If someone rotates their device, the app will automatically adjust its layout.
fonts.js
If you want to give dynamic and global fonts, then it should be like this. Global usage of fonts will help you to streamline a designer’s workflow.
It enables changing the font on multiple pages simultaneously, including settings such as font family, size, style, and more according to the styling you want to accomplish.
colors.js
Similarly, you can globalize color also. For example — if a designer uses the same color on various pages and wishes to alter it, Global colors employs the change across all pages using that color key.
Another benefit is that it speeds up your workflow and ensures cross-site consistency with settings you define once, use globally, and change anytime, with no coding required.
You can set predefined global keys for colors (Primary, Secondary, Text Color, and Accent colors), and as your requirement.
images.js
Images also can be globalized like this, It’s a sorted way of organizing and storing things at one place. Also, you can use this in multiple files.
universalStyles.js
If you want to give some universal styles which you will use multiple time. You can create one universal styles file and put your styles in that file. It will help you to reduce repeated code.
theme.js
In the theme file, I put all the colors, fonts, images, matrices, screen height & screen width for reference. So that I can use these over all in the project with only import theme file.
Also, if I will give height, vertically padding & margin to any layout then I will use like this (height: 20 * ratioHeight), Similar for the width.
Usage of Above Global theme
Now, I’m going to use the above themes for dynamic styles in my app for responsive layout. So, here is the code :
styles.js
You can use colors, font styles, font size, font family, ratio height & ratio width like this. It will help you to create responsive design for all devices.
Result-
In the above screenshots, I have used the same code base, and it automatically adjusts layout of cards with responsive themes.
Conclusion
The most interesting thing about responsive design is that it is so evolving. There is no fixed pattern to adhere to, and you can always come up with a new way to make sure your UI adapts to any screen size.
So start experimenting and see what you can come up with. Keep designing, and don’t forget to share your experiences right here.
For more, please check out the GitHub repo for the source code.