react-native-size-scaling
Version:
Provide solutions to make your app flexible for different screen sizes, based on your device's pixel ratio.
69 lines (68 loc) • 2.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.width = exports.scale = exports.isTablet = exports.isIOS = exports.isAndroid = exports.height = exports.StyleSheet = void 0;
var _reactNative = require("react-native");
const {
width: W,
height: H
} = _reactNative.Dimensions.get('screen');
const pixelDensity = _reactNative.PixelRatio.get();
const metricsNumber = () => {
const density = pixelDensity * 160;
const x = Math.pow(W * pixelDensity / density, 2);
const y = Math.pow(H * pixelDensity / density, 2);
const screenInches = Math.sqrt(x + y) + 1.6;
return screenInches;
};
const objectMap = (object, mapFn) => {
return Object.keys(object).reduce((result, key) => {
result[key] = mapFn(object[key]);
return result;
}, {});
};
const objectMap2 = (object, overload) => {
return Object.keys(object).reduce((result, key) => {
if (typeof object[key] === 'number') {
if (key.includes('flex') || key.includes('opacity') || key.includes('elevation')) {
result[key] = object[key];
} else {
result[key] = scale(object[key]);
}
} else {
result[key] = object[key];
}
return {
...overload,
...result
};
}, {});
};
const checkTablet = () => {
const adjustedWidth = width * pixelDensity;
const adjustedHeight = height * pixelDensity;
if (pixelDensity < 2 && (adjustedWidth >= 1000 || adjustedHeight >= 1000)) {
return true;
} else {
return pixelDensity === 2 && (adjustedWidth >= 1920 || adjustedHeight >= 1920);
}
};
const width = exports.width = W;
const height = exports.height = H;
const isTablet = exports.isTablet = checkTablet();
const isAndroid = exports.isAndroid = _reactNative.Platform.OS === 'android';
const isIOS = exports.isIOS = _reactNative.Platform.OS === 'ios';
const scale = number => {
const ratio = (metricsNumber() + pixelDensity) / 10;
const value = number * ratio;
return Math.round(value);
};
exports.scale = scale;
const StyleSheet = exports.StyleSheet = {
create: (styleSheet, overload = {}) => _reactNative.StyleSheet.create(objectMap(styleSheet, value => {
const style = objectMap2(value, overload);
return style;
}))
};
//# sourceMappingURL=mathMetric.js.map