Skip to content

Instantly share code, notes, and snippets.

@jeserodz
Created April 24, 2020 13:12
Show Gist options
  • Save jeserodz/1908317d77a6116e0d4e8f7673e0ac26 to your computer and use it in GitHub Desktop.
Save jeserodz/1908317d77a6116e0d4e8f7673e0ac26 to your computer and use it in GitHub Desktop.
React Native - Scaling Utils
// Reference: https://github.com/nirsky/react-native-size-matters
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
const [shortDimension, longDimension] = width < height ? [width, height] : [height, width];
//Default guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;
export const scale = size => shortDimension / guidelineBaseWidth * size;
export const verticalScale = size => longDimension / guidelineBaseHeight * size;
export const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;
export const s = scale;
export const vs = verticalScale;
export const ms = moderateScale;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment