Best way to create responsive mobile application in react native

We all want our app to be responsive, we want to give style according to all devices. We don’t have resources for hiring a specific team for managing device sizes. For all these things their is a library called React Native Size Matters. We are gonna learn how to achieve this goal.

React Native Size Matter Installation

yarn add react-native-size-matters

Now if you want to give style to your views or components then you just need to wrap that in these functions.

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';

const App = props =>
    <View style={{
        width: scale(50),
        height: verticalScale(70),
        padding: moderateScale(10)
    }}/>;

As you can see in the above example we use three things scale, verticleScale and moderateScale. The default size of the device which we are considering is 5”. So according to that we are giving these values.

Properties of react native size matter

1. Scale – we give size through scale and it provides size according to device width.
2. verticleScale – it provide size according to device height.
3. moderateScale – If we don’t want size in linear manner we can customize it with this feature. and we can change the resize factore. example is below.
4. moderateVerticleScale – It provide moderate size according to device height.

If normal scale will increase your size by +2X, moderateScale will only increase it by +X, for example:
* scale(10) = 20
* moderateScale(10) = 15
* moderateScale(10, 0.1) = 11

we can play with this according to our requirements.

This library also provide these functions with short forms so you can code efficiently .

import { s, vs, ms, mvs } from 'react-native-size-matters';

If you want to use these simple annotation in style sheet you can simply use that as.

import { ScaledSheet } from 'react-native-size-matters';

const styles = ScaledSheet.create({
    container: {
        width: '200@s', // = scale(200)
        height: '400@vs', // = verticalScale(400)
        padding: '4@msr', // = Math.round(moderateScale(4))
        margin: 5
    },
    row: {
        padding: '[email protected]', // = moderateScale(20, 0.2)
        width: '60@ms', // = moderateScale(60)
        height: '[email protected]' // = moderateVerticalScale(60, 0.4)
    }
});

This library can easily take burden of creating responsive apps. If you ever face problem in implementing this just comment. I am here to help.