Intro to React's Size Matters

#react #reactnative #javascript

I am making a small news app that should should be able to display correctly on a mobile device, tablet etc. But having never done this before or any app for different sized devices, I was not sure how to proceed until I found Size Matters for React Native.

This tool allows you to make your scaling a lot easier. Various features include scaling functions and ScaledSheets as well as allowing to change the default guideline sizes in an .env file.

As shown in the README for Size Matters

Scaling Functions:

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

const Component = props =>
    <View style={{
        width: scale(30),
        height: verticalScale(50),
        padding: moderateScale(5)
    }}/>;

scale(size: number)
Returns a linear scaled result of the provided size, based on device's screen width.
verticalScale(size: number)
Returns a linear scaled result of the provided size, based on device's screen height.
moderateScale(size: number, factor?: number)
In cases where not everything should be linear where normal scale will increase the size by +2X, moderateScale will only increase it by +X(any number)

ScaledSheet
ScaleSheet Takes the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions, verticalScale or ModerateScale on size. ModerateScale can also have a optional factor.

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

const styles = ScaledSheet.create({
    container: {
        width: '100@s', // = scale(100)
        height: '200@vs', // = verticalScale(200)
        padding: '2@msr', // = Math.round(moderateScale(2))
        margin: 5
    },
    row: {
        padding: '10@ms0.3', // = moderateScale(10, 0.3)
        height: '50@ms' // = moderateScale(50)
    }
});

So far I used moderateScale for my font sizes with four different sizes, with small and regular having a factor difference of just 2 and a difference of 9 for the two larger ones.

const fontSize = {
    small: moderateScale(12),
    regular: moderateScale(14),
    large: moderateScale(20),
    extralarge: moderateScale(29)
}

I might experiment and add more features from this utility belt such as a ScaledSheet. I highly recommend using Size Matters for apps that will run on different sized devices. And special thanks to nirsky for authoring it.

References