native-variants/dist/lib/media-query.d.ts

A library for handling variants in React Native components with theme support.

/**
 * 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
 *   }
 * };
 * ```
 */
export declare function wq(widthPercent: number | string): number;
/**
 * 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
 *   }
 * };
 * ```
 */
export declare function hq(heightPercent: number | string): number;
/**
 * 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;
 * ```
 */
export declare function getScreenDimensions(): {
    width: number;
    height: number;
};
/**
 * 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);
 * ```
 */
export declare function responsiveFontSize(baseFontSize: number, scaleFactor?: number): number;