How to achieve the same look and feel across multiple devices in React Native

#reactnative

I used react-native-size-matters.

Problem I'm trying to solve:

Working with % is not always easy if you are styling nested components.
Since devices have different width and height, once your app is styled for a particular device, the app might not have the same look on the other devices.

This is how 370 x 370 square looks on several devices.

const componentStyles = StyleSheet.create({
  regularBox: {
    width: 300,
    height: 300,
    backgroundColor: 'cyan',
  },
});

As you can see the ratio is different across the devices.

How can we solve this?

I used react-native-size-matters.

rohan@~/prj/rn>> npm i --save react-native-size-matters

rohan@~/prj/rn>> cd ios

rohan@~/prj/rn/ios>> pod install


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

const size = {
  vs40: verticalScale(40), // calculates againt vh
  s300: scale(300),        // calculates agains vw
};

const componentStyles = StyleSheet.create({
  regularBox: {
    width: 300,
    height: 300,
    backgroundColor: 'cyan',
  },
  sizedBox: {
    width: size.s300,
    height: size.s300,
    backgroundColor: 'cyan',
  },
});