react-native-responsiveness-tool
Version:
A utility package for scaling UI elements in React Native based on device dimensions and screen density.
44 lines (43 loc) • 2.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.setReferenceDimensions = exports.imageHeightFromWidth = exports.scaleHeightPercent = exports.scaleWidthPercent = exports.adaptiveScale = exports.moderateScale = exports.sh = exports.sw = exports.DEVICE_SCALE = exports.DEVICE_HEIGHT = exports.DEVICE_WIDTH = exports.SCALE_FACTOR = exports.REFERENCE_HEIGHT = exports.REFERENCE_WIDTH = void 0;
const react_native_1 = require("react-native");
// Screen dimensions
const { width: DEVICE_WIDTH, height: DEVICE_HEIGHT } = react_native_1.Dimensions.get("window");
exports.DEVICE_WIDTH = DEVICE_WIDTH;
exports.DEVICE_HEIGHT = DEVICE_HEIGHT;
const DEVICE_SCALE = Math.sqrt(DEVICE_WIDTH * DEVICE_HEIGHT) / 100;
exports.DEVICE_SCALE = DEVICE_SCALE;
// Reference dimensions
let REFERENCE_WIDTH = 360;
exports.REFERENCE_WIDTH = REFERENCE_WIDTH;
let REFERENCE_HEIGHT = 800;
exports.REFERENCE_HEIGHT = REFERENCE_HEIGHT;
const SCALE_FACTOR = 0.5;
exports.SCALE_FACTOR = SCALE_FACTOR;
// Function to set new reference dimensions
const setReferenceDimensions = (width, height) => {
exports.REFERENCE_WIDTH = REFERENCE_WIDTH = width;
exports.REFERENCE_HEIGHT = REFERENCE_HEIGHT = height;
};
exports.setReferenceDimensions = setReferenceDimensions;
// Percentage-based scalers
const scaleWidthPercent = (widthPercent) => react_native_1.PixelRatio.roundToNearestPixel((DEVICE_WIDTH * parseFloat(widthPercent)) / 100);
exports.scaleWidthPercent = scaleWidthPercent;
const scaleHeightPercent = (heightPercent) => react_native_1.PixelRatio.roundToNearestPixel((DEVICE_HEIGHT * parseFloat(heightPercent)) / 100);
exports.scaleHeightPercent = scaleHeightPercent;
// Image scaler by ratio
const imageHeightFromWidth = (width, height) => {
const ratio = height / width;
return width * ratio;
};
exports.imageHeightFromWidth = imageHeightFromWidth;
// Scalers
const sw = (size) => react_native_1.PixelRatio.roundToNearestPixel(size * (DEVICE_WIDTH / REFERENCE_WIDTH));
exports.sw = sw;
const sh = (size) => react_native_1.PixelRatio.roundToNearestPixel(size * (DEVICE_HEIGHT / REFERENCE_HEIGHT));
exports.sh = sh;
const moderateScale = (size) => react_native_1.PixelRatio.roundToNearestPixel(size + (sh(size) - size));
exports.moderateScale = moderateScale;
const adaptiveScale = (size, factor = SCALE_FACTOR) => react_native_1.PixelRatio.roundToNearestPixel(size + (sw(size) - size) * factor);
exports.adaptiveScale = adaptiveScale;