Rn-scaled-sheet NPM

rn-scaled-sheet

React Native multi screen size support. Scale your dimensions depends on screen size. Inspired by react-native-size-matters

Installation

npm install --save rn-scaled-sheet
or
yarn add rn-scaled-sheet

Usage

import React from "react";
import { Dimensions } from "react-native";
import { ScaledSheet, original } from "rn-scaled-sheet";

ScaledSheet.initialize({
  deviceWidth: Dimensions.get("window").width,
  // baseWidth?: number; // width in design
  // maxScale?: number;
  // minScale?: number;
});

/**
 * Eg: base screen size is 375 x 667
   Assume app running on 411 x 896 phone,
   use original function if you don't want to scale
 */
const styles = ScaledSheet.create({
  container: {
    flex: 1, // still 1
  },
  button: {
    width: 50, // will become ~55
    height: original(50), // still 50
    opacity: 0.5, // still 0.5
  },
});

Properties will be scaled

Properties
width
height
fontSize
letterSpacing
lineHeight
borderBottomLeftRadius
borderBottomRightRadius
borderTopLeftRadius
borderTopRightRadius
borderRadius
borderBottomWidth
borderTopWidth
borderRightWidth
borderLeftWidth
borderWidth
shadowRadius
borderWidth
translateX
translateY
marginLeft
marginRight
marginHorizontal
marginVertical
margin
paddingLeft
paddingRight
paddingHorizontal
paddingVertical
padding
top
left
bottom
right