native-variants
Version:
A library for handling variants in React Native components with theme support.
113 lines • 3.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.wq = wq;
exports.hq = hq;
exports.getScreenDimensions = getScreenDimensions;
exports.responsiveFontSize = responsiveFontSize;
const react_native_1 = require("react-native");
/**
* Current screen dimensions.
* These values are captured at module load time.
* For responsive updates, consider using useWindowDimensions hook instead.
*/
const screenWidth = react_native_1.Dimensions.get("window").width;
const screenHeight = react_native_1.Dimensions.get("window").height;
/**
* Width Query - Calculates a width value based on screen percentage.
* Returns a pixel-rounded value proportional to screen width.
*
* @param widthPercent - Percentage of screen width (0-100) as number or string
* @returns Pixel value rounded to nearest pixel ratio
*
* @example
* ```ts
* // Get 50% of screen width
* const halfWidth = wq(50);
*
* // Using string percentage
* const quarterWidth = wq("25");
*
* // In styles
* const styles = {
* container: {
* width: wq(80), // 80% of screen width
* marginHorizontal: wq(10), // 10% margin on each side
* }
* };
* ```
*/
function wq(widthPercent) {
const elemWidth = typeof widthPercent === "number" ? widthPercent : parseFloat(widthPercent);
return react_native_1.PixelRatio.roundToNearestPixel((screenWidth * elemWidth) / 100);
}
/**
* Height Query - Calculates a height value based on screen percentage.
* Returns a pixel-rounded value proportional to screen height.
*
* @param heightPercent - Percentage of screen height (0-100) as number or string
* @returns Pixel value rounded to nearest pixel ratio
*
* @example
* ```ts
* // Get 50% of screen height
* const halfHeight = hq(50);
*
* // Using string percentage
* const quarterHeight = hq("25");
*
* // In styles
* const styles = {
* hero: {
* height: hq(40), // 40% of screen height
* minHeight: hq(30), // Minimum 30% of screen height
* }
* };
* ```
*/
function hq(heightPercent) {
const elemHeight = typeof heightPercent === "number"
? heightPercent
: parseFloat(heightPercent);
return react_native_1.PixelRatio.roundToNearestPixel((screenHeight * elemHeight) / 100);
}
/**
* Gets the current screen dimensions.
* Useful for calculations that need both width and height.
*
* @returns Object containing screen width and height in pixels
*
* @example
* ```ts
* const { width, height } = getScreenDimensions();
* const isLandscape = width > height;
* ```
*/
function getScreenDimensions() {
return {
width: screenWidth,
height: screenHeight,
};
}
/**
* Calculates a responsive font size based on screen width.
* Ensures text scales appropriately across different device sizes.
*
* @param baseFontSize - The base font size in pixels
* @param scaleFactor - Optional scale factor (default: 0.5, meaning 50% responsive)
* @returns Scaled font size rounded to nearest pixel
*
* @example
* ```ts
* // Responsive font that scales with screen size
* const titleSize = responsiveFontSize(24);
*
* // Less responsive (only 30% scaling)
* const subtitleSize = responsiveFontSize(18, 0.3);
* ```
*/
function responsiveFontSize(baseFontSize, scaleFactor = 0.5) {
const scale = screenWidth / 375; // Base scale on iPhone 8/SE width
const newSize = baseFontSize + (baseFontSize * (scale - 1) * scaleFactor);
return react_native_1.PixelRatio.roundToNearestPixel(newSize);
}
//# sourceMappingURL=media-query.js.map