@hero-design/rn 7.1.3-alpha3 → 7.1.3-alpha4

package/es/index.js

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, createElement, useRef, useEffect } from 'react';
-import require$$0$1, { Dimensions, View, Text as Text$1, Platform, TouchableWithoutFeedback, Animated, StyleSheet as StyleSheet$1, TouchableHighlight, TouchableOpacity } from 'react-native';
+import require$$0$1, { PixelRatio, Dimensions, View, Text as Text$1, Platform, TouchableWithoutFeedback, Animated, StyleSheet as StyleSheet$1, TouchableHighlight, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 function ownKeys(object, enumerableOnly) {
@@ -9875,13 +9875,72 @@ var systemPalette = {
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
+var pixelRatio = PixelRatio.get();
+var deviceHeight = Dimensions.get('window').height;
+var deviceWidth = Dimensions.get('window').width;
 var scale = function scale(size) {
-  var _Dimensions$get = Dimensions.get('window'),
-      width = _Dimensions$get.width,
-      height = _Dimensions$get.height;
+  if (pixelRatio >= 2 && pixelRatio < 3) {
+    // iphone 5s and older Androids
+    if (deviceWidth < BASE_WIDTH) {
+      return size * 0.95;
+    } // iphone 5
 
-  var shortDimension = width < height ? width : height;
-  return shortDimension / BASE_WIDTH * size;
+
+    if (deviceHeight < 667) {
+      return size; // iphone 6-6s
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.15;
+    } // older phablets
+
+
+    return size * 1.25;
+  }
+
+  if (pixelRatio >= 3 && pixelRatio < 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size;
+    } // Catch other weird android width sizings
+
+
+    if (deviceHeight < 667) {
+      return size * 1.15; // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.2;
+    } // catch larger devices
+    // ie iphone 6s plus / 7 plus / mi note 等等
+
+
+    return size * 1.27;
+  }
+
+  if (pixelRatio >= 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size; // Catch other smaller android height sizings
+    }
+
+    if (deviceHeight < 667) {
+      return size * 1.2; // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.25;
+    } // catch larger phablet devices
+
+
+    return size * 1.4;
+  }
+
+  return size;
 };
 
 var BASE$1 = 8;

package/lib/index.js

@@ -9884,13 +9884,72 @@ var systemPalette = {
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
+var pixelRatio = require$$0$1.PixelRatio.get();
+var deviceHeight = require$$0$1.Dimensions.get('window').height;
+var deviceWidth = require$$0$1.Dimensions.get('window').width;
 var scale = function scale(size) {
-  var _Dimensions$get = require$$0$1.Dimensions.get('window'),
-      width = _Dimensions$get.width,
-      height = _Dimensions$get.height;
+  if (pixelRatio >= 2 && pixelRatio < 3) {
+    // iphone 5s and older Androids
+    if (deviceWidth < BASE_WIDTH) {
+      return size * 0.95;
+    } // iphone 5
 
-  var shortDimension = width < height ? width : height;
-  return shortDimension / BASE_WIDTH * size;
+
+    if (deviceHeight < 667) {
+      return size; // iphone 6-6s
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.15;
+    } // older phablets
+
+
+    return size * 1.25;
+  }
+
+  if (pixelRatio >= 3 && pixelRatio < 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size;
+    } // Catch other weird android width sizings
+
+
+    if (deviceHeight < 667) {
+      return size * 1.15; // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.2;
+    } // catch larger devices
+    // ie iphone 6s plus / 7 plus / mi note 等等
+
+
+    return size * 1.27;
+  }
+
+  if (pixelRatio >= 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size; // Catch other smaller android height sizings
+    }
+
+    if (deviceHeight < 667) {
+      return size * 1.2; // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.25;
+    } // catch larger phablet devices
+
+
+    return size * 1.4;
+  }
+
+  return size;
 };
 
 var BASE$1 = 8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha3",
+  "version": "7.1.3-alpha4",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/utils/scale.ts

@@ -1,10 +1,73 @@
-import { Dimensions } from 'react-native';
+import { PixelRatio, Dimensions } from 'react-native';
 
 export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
-
+const pixelRatio = PixelRatio.get();
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
 export const scale = (size: number) => {
-  const { width, height } = Dimensions.get('window');
-  const shortDimension = width < height ? width : height;
+  if (pixelRatio >= 2 && pixelRatio < 3) {
+    // iphone 5s and older Androids
+    if (deviceWidth < BASE_WIDTH) {
+      return size * 0.95;
+    }
+
+    // iphone 5
+    if (deviceHeight < 667) {
+      return size;
+      // iphone 6-6s
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.15;
+    }
+    // older phablets
+    return size * 1.25;
+  }
+
+  if (pixelRatio >= 3 && pixelRatio < 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size;
+    }
+
+    // Catch other weird android width sizings
+    if (deviceHeight < 667) {
+      return size * 1.15;
+      // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.2;
+    }
+
+    // catch larger devices
+    // ie iphone 6s plus / 7 plus / mi note 等等
+    return size * 1.27;
+  }
+
+  if (pixelRatio >= 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size;
+      // Catch other smaller android height sizings
+    }
+
+    if (deviceHeight < 667) {
+      return size * 1.2;
+      // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.25;
+    }
+
+    // catch larger phablet devices
+    return size * 1.4;
+  }
 
-  return (shortDimension / BASE_WIDTH) * size;
+  return size;
 };