1)
import { Dimensions, StatusBar } from 'react-native';
const { width, height } = Dimensions.get('window');
const guidelineBaseWidth = 375;
const guidelineBaseHeight = 812;
const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;
const moderateScaleVertical = (size, factor = 0.5) => size + (verticalScale(size) - size) * factor;
const textScale = percent => {
const screenHeight = Dimensions.get('window').height;
//calculate absolute ratio for bigger screens 18.5:9 requiring smaller scaling
const ratio = Dimensions.get('window').height / Dimensions.get('window').width;
//Guideline sizes are based on standard ~5″ screen mobile device
const deviceHeight = 375
? screenHeight * (ratio > 1.8 ? 0.126 : 0.15) //Set guideline depending on absolute ratio
: Platform.OS === 'android'
? screenHeight - StatusBar.currentHeight
: screenHeight;
const heightPercent = (percent * deviceHeight) / 100;
return Math.round(heightPercent);
};
export { scale, verticalScale, textScale, moderateScale, moderateScaleVertical,width,height };
2)
import { useEffect, useState } from 'react';
import { Dimensions, PixelRatio, Platform } from 'react-native';
const {
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
} = Dimensions.get('window');
//FONT SCALING - provide the pixel as:
//Usage: nf(16)
const scale = SCREEN_HEIGHT / 667;
const normalizeFont = (size) => Math.round(PixelRatio.roundToNearestPixel(size * scale))
//DYNAMIC DIMENSION AS PER PERCENTAGE:
//Usage: wp(5), hp(20)
const widthPercentageToDP = widthPercent => {
// Convert string input to decimal number
const elemWidth = parseFloat(widthPercent);
return PixelRatio.roundToNearestPixel(SCREEN_WIDTH * elemWidth / 100);
};
const heightPercentageToDP = heightPercent => {
// Convert string input to decimal number
const elemHeight = parseFloat(heightPercent);
return PixelRatio.roundToNearestPixel(SCREEN_HEIGHT * elemHeight / 100);
};
//DYNAMIC DIMENSION AS PER PIXELS:
//Usage: wpx(141), hpx(220)
const widthFromPixel = (widthPx, w = 375) => {
const scale = SCREEN_WIDTH / w;
const newSize = widthPx * scale
return newSize
};
const heightFromPixel = (heightPx, h = 667) => {
const scale = SCREEN_HEIGHT / h;
const newSize = heightPx * scale
return newSize
};
export {
normalizeFont as nf,
widthPercentageToDP as wp,
heightPercentageToDP as hp,
widthFromPixel as wpx,
heightFromPixel as hpx,
};
USAGE:
import { hp, wp, hpx, wpx, nf, Fonts } from '../../constants/constants'
/**
* A React Hook which updates when the orientation changes
* @returns whether the user is in 'PORTRAIT' or 'LANDSCAPE'
*/
const isPortrait = () => {
const dimMode = Dimensions.get('screen');
return dimMode.height >= dimMode.width;
};
export const useOrientation = () => {
// State to hold the connection status
const [orientation, setOrientation] = useState(
isPortrait() ? true : false,
);
const [height, setHeight] = useState(
isPortrait() ? 667 : 375,
);
const [width, setWidth] = useState(
isPortrait() ? 375 : 667,
);
const [fontPixel, setFontPixel] = useState(
Dimensions.get('screen').width < 425 ? 1 : 1.5
);
useEffect(() => {
const callback = () => {
setOrientation(isPortrait() ? true : false)
setHeight(isPortrait() ? 667 : 375)
setWidth(isPortrait() ? 375 : 667)
setFontPixel(Dimensions.get('screen').width < 425 ? 1 : 1.5)
};
Dimensions.addEventListener('change', callback);
return () => {
Dimensions.removeEventListener('change', callback);
};
}, []);
return { orientation, height, width, fontPixel };
}
export const useOrientationHeight = (h) => {
const screenHeight = Dimensions.get('window').height
const screenWidth = Dimensions.get('window').width
if (isPortrait()) {
return (h / 667) * screenHeight
} else {
return (h / 375) * screenWidth
}
}
export const useOrientationWidth = (w) => {
const screenHeight = Dimensions.get('window').height
const screenWidth = Dimensions.get('window').width
if (isPortrait()) {
return (w / 375) * screenWidth
} else {
return (w / 667) * screenHeight
}
}
// USAGE:
// const orientation = useOrientation(); returns-> true or false
// vertical calculation ==> "orientation ? oh(50) : ow(30)"
// horizontal calculation ==> "orientation ? ow(50) : oh(30)"
Top comments (0)