@nexara/nativeflow
Version:
Beautiful, responsive, and customizable UI components for React Native – built for performance and seamless experiences.
103 lines (98 loc) • 3.74 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.verticalScale = exports.responsiveFontSize = exports.moderateVerticalScale = exports.moderateScale = exports.horizontalScale = void 0;
var _reactNative = require("react-native");
var _ContextManager = require("../components/Provider/ContextManager.js");
const {
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT
} = _reactNative.Dimensions.get('window');
// const GetScalingMode = () => getGlobalContext();
// const scalingMode = useScalingMode();
const isResponsive = true;
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;
const [shortDimension, longDimension] = SCREEN_WIDTH < SCREEN_HEIGHT ? [SCREEN_WIDTH, SCREEN_HEIGHT] : [SCREEN_HEIGHT, SCREEN_WIDTH];
const scalingCache = new Map();
// export const fun = () => {
// return scalingCache
// }
const checkIsPhone = size => {
if (SCREEN_WIDTH <= 430 && SCREEN_WIDTH >= 375) {
return size;
}
return 0;
};
const scale = (size, cacheKey, mode) => {
if (checkIsPhone(size)) {
return size;
}
const cacheScaleValue = scalingCache.get(cacheKey) || {};
let finalSize;
if (cacheScaleValue?.[size]) {
return cacheScaleValue?.[size];
}
if (mode === 'partial') {
const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
let scale = (cacheKey === 'hScale' ? shortDimension : longDimension) / guidelineBaseHeight;
scale = 1 + (scale - 1) * slowDownRate;
let adjustedSize = size * Math.max(scale, 0.80);
finalSize = Math.floor(_reactNative.PixelRatio.roundToNearestPixel(adjustedSize));
} else {
const baseScaleFactor = cacheKey === 'hScale' ? shortDimension / guidelineBaseWidth : longDimension / guidelineBaseHeight;
const clampedScaleFactor = Math.max(0.9, Math.min(baseScaleFactor, 1.2));
finalSize = Math.round(_reactNative.PixelRatio.roundToNearestPixel(size * clampedScaleFactor));
}
cacheScaleValue[size] = finalSize;
scalingCache.set(cacheKey, cacheScaleValue);
return finalSize;
};
const horizontalScale = size => {
const scalingMode = (0, _ContextManager.getGlobalContext)().scaling.mode;
return scale(size, 'hScale', scalingMode);
};
exports.horizontalScale = horizontalScale;
const verticalScale = size => {
const scalingMode = (0, _ContextManager.getGlobalContext)().scaling.mode;
return scale(size, 'vScale', scalingMode);
};
exports.verticalScale = verticalScale;
const moderateScale = (size, factor = 0.5) => {
if (isResponsive) {
return size + (shortDimension / guidelineBaseWidth * size - size) * factor;
} else {
return size + factor + 1;
}
};
exports.moderateScale = moderateScale;
const moderateVerticalScale = (size, factor = 0.5) => {
if (isResponsive) {
return size + longDimension / guidelineBaseHeight * size * factor;
} else {
return size + factor + 5;
}
};
exports.moderateVerticalScale = moderateVerticalScale;
const responsiveFontSize = fontSize => {
if (checkIsPhone(fontSize)) {
return fontSize;
}
const fsCache = scalingCache.get('fs') || {};
if (fsCache?.[fontSize]) {
return fsCache?.[fontSize];
}
const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20;
const screenDiagonal = Math.sqrt(SCREEN_WIDTH ** 2 + SCREEN_HEIGHT ** 2);
const baseScreenDiagonal = Math.sqrt(360 ** 2 + 640 ** 2);
let scale = screenDiagonal / baseScreenDiagonal;
scale = 1 + (scale - 1) * slowDownRate;
let adjustedFontSize = fontSize * Math.max(scale, 0.85);
const finalSize = Math.floor(_reactNative.PixelRatio.roundToNearestPixel(adjustedFontSize));
fsCache[fontSize] = finalSize;
scalingCache.set('vScale', fsCache);
return finalSize;
};
exports.responsiveFontSize = responsiveFontSize;
//# sourceMappingURL=ResponsiveCalculations.js.map
;