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 } 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,
   => Wrap the value you don't want to scaled in ""
 */
const styles = ScaledSheet.create({
  container: {
    flex: 1, // still 1
  },
  button: {
    width: 50, // will become ~55
    height: "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|

Copyright and License

MIT License

Copyright (c) 2018 maphongba008