react-native-responsive-percent

DEPRECATED

Use 'react-native-responsive-percent' instead.

It helps you to make responsive view by adjusting size of the elements. You can use this package for all devices.

Elements

• responsiveNumber: Returns a number based on the size of the 'iPhone X or XS'. Maybe you will use this more than below functions.

import { StyleSheet } from "react-native";
import { responsiveNumber } from "react-native-responsive-percent";

export default StyleSheet.create({
  title: {
    fontSize: responsiveNumber(15), // On iphoneX : 15, iphoneXS Max: 16.5
    width: responsiveNumber(120), // On iphoneX : 120, iphoneXS Max: 132
    height: responsiveNumber(270) // On iphoneX : 270, iphoneXS Max: 297
  }
});

• responsiveLetterSpacing: returns letter spacing, the method of the Photoshop. Parameter type is all numbers, but Numberable strings (ex: '102') can be them.

import { StyleSheet } from "react-native";
import { responsiveLetterSpacing } from "react-native-responsive-percent";

console.log(responsiveLetterSpacing(-1.2, 15));
// console.log(responsiveLetterSpacing("-1.2", "15")); // Same above

• f: Returns a number(font size) based on the size of the 'iPhone X or XS'. You can import this with 'dmFont, responsiveFontSize'.

import { StyleSheet } from "react-native";
import { responsiveFontSize, f, dmFont } from "react-native-responsive-percent";

export default StyleSheet.create({
  title: {
    fontSize: responsiveFontSize(15) // On iphoneX : 15, iphoneXS Max: 16.5
    // fontSize: dmFont(15) // Same above
    // fontSize: f(15) // Same above
  }
});

• wp: Returns a number calculated with the percent of the device width. You can import this with 'widthByPercent'.

import { StyleSheet } from "react-native";
import { wp, widthByPercent } from "react-native-responsive-percent";

export default StyleSheet.create({
  image: {
    width: widthByPercent(15) // On iphoneX : 56, iphoneXS Max: 62
    // width: widthByPercent('15%')   // Same above
    // width: wp('15')   // Same above
    // width: wp(15)   // Same above
  }
});

• wr: Returns a number calculated with the ratio of the device width. You can import this with 'widthByRatio'.

import { StyleSheet } from "react-native";
import { wr, widthByRatio } from "react-native-responsive-percent";

export default StyleSheet.create({
  image: {
    width: widthByRatio(0.15) // On iphoneX : 56, iphoneXS Max: 62
    // width: widthByRatio('0.15')   // Same above
    // width: wr(15)   // Same above
  }
});

• hp: Returns a number calculated with the ratio of the device height. You can import this with 'heightByPercent'.

import { StyleSheet } from "react-native";
import { hp, heightByPercent } from "react-native-responsive-percent";

export default StyleSheet.create({
  image: {
    height: heightByPercent(15) // On iphoneX : 121, iphoneXS Max: 134
    // height: heightByPercent('15%')   // Same above
    // height: hp('15')   // Same above
    // width: hp(15)   // Same above
  }
});

• hr: Returns a number calculated with the ratio of the device height. You can import this with 'heightByRatio'.

import { StyleSheet } from "react-native";
import { hr, heightByRatio } from "react-native-responsive-percent";

export default StyleSheet.create({
  image: {
    height: heightByRatio(0.15) // On iphoneX : 121, iphoneXS Max: 134
    // height: heightByRatio('0.15')   // Same above
    // width: hr(15)   // Same above
  }
});

• deviceHeight: Returns the screen pixel height of the device

import { StyleSheet } from "react-native";
import { deviceHeight } from "react-native-responsive-percent";

export default StyleSheet.create({
  image: {
    height: deviceHeight // returns the device height
  }
});

• deviceWidth: Returns the screen pixel height of the device.

import { StyleSheet } from "react-native";
import { deviceWidth } from "react-native-responsive-percent";

export default StyleSheet.create({
  image: {
    width: deviceWidth // returns the device width
  }
});

• screenRatio: Returns the screen ratio.

import { StyleSheet } from "react-native";
import { screenRatio } from "react-native-responsive-percent";

console.log(screenRatio()); //iPhone X : 2.16

Example

import { StyleSheet } from "react-native";
import RNRP from "react-native-responsive-percent";

export default StyleSheet.create({
  title: {
    fontSize: RNRP.f(15)
  }
});