Skip to content

Commit

Permalink
Set scaling based on smallest dimension (#15)
Browse files Browse the repository at this point in the history
This allows it so that scaling is done based on the smallest dimention
being the width.

This fixes the issue that makes it so that rendering isn't overly large
when rendering on landscape and changing to portrait or overly small on
the inverse orientation change.
  • Loading branch information
Mazhar Morshed authored and nirsky committed Jul 9, 2018
1 parent 10bf38d commit 51cfb6b
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions lib/scalingUtils.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
const [w, h] = width > height ? [height, width] : [width, height];

//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = size => width / guidelineBaseWidth * size;
const verticalScale = size => height / guidelineBaseHeight * size;
const scale = size => w / guidelineBaseWidth * size;
const verticalScale = size => h / guidelineBaseHeight * size;
const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;

export {scale, verticalScale, moderateScale};

0 comments on commit 51cfb6b

Please sign in to comment.