Implementing a responsive design system to React Native
Design is an important part of a product. Good design can play with user’s psychology and compel them to like and use the product hence the conversion of potential leads. But a bad design or unpleasant UI can have a negative effect too. Bad design can also be caused by errors in development because the developer has to serve the same app on hundreds of device of different screen sizes, resolution and pixel density.
Coming from Native Android Development, I proposed the React Native UI library at my workplace, because of the demanding and intuitive product. Fast forward today, I learned the skill and implemented some sample projects. While practising I noticed React Native gives you the power to control each pixel of the screen, hence letting you create layouts which are complex yet beautiful. React Native further empowers code-reusability by letting you create reusable-components. A component you designed once can be used across the whole app. It helps you break the app into smaller logical and functional units.
Problem
After a little time in development, I get to know that UI not being very responsive across devices of different size and different platforms. Sometimes views cut-off or overlapping. Fixing an issue would cause another one!
Cause of problem
After careful research and analysing the problem, I came to know that the dimensions we give to each view in react native is translated to platform-specific units e.g dp(density pixels) for Android and point for iOS.
Do you see the problem here? Our designer gives the dimensions in pixels whose units are treated according to the platform it is being run on. Suppose the designer is using 360x760 artboard then the dimension of each view I give in StyleSheet is suitable only for the exact sized device and pixel density which the designer has worked on.
Approaching the solution
Best solution is to use percentages.
We can get the current device width and height and calculate the dimension of view dynamically. To get this functionality there was already a open-source solution available react-native-responsive-screen
It allows us to use percentage for dimension keeping pixel density, screen size, and orientation in its knowledge. Example,
import {
widthPercentageToDP as wp2dp,
heightPercentageToDP as hp2dp,
} from 'react-native-responsive-screen';<View style={{width: wp2dp(‘20%’)}} />
<View style={{height: hp2dp(‘50%’)}} />
Yet again, I got into one more hassle, I was able to give percentages to views but now I had the task of calculating each dimension’s percentage. So I wrote a small helper function around the library to tackle the time-consuming process.
Now I could simply use the exact dimension given to me in the design wireframes.
For example, if the artboard size of the design is 360*640, change the values in helper functions and use them as follows-
import {wp, hp} from '../dimen';<View
style={{width: wp(360), height: hp(640)}}
/> // This view will take 100% of the screen
What do you think?
What do you think about this solution? Let me know your ideas in the comments section below. Also, feel free reach out to me on LinkedIn and Twitter
