Utility Functions

warning

These functions should not be used directly within SmartStyles.create() definitions to avoid double conversion of values. They are best utilized in contexts where precise, scaled measurements are necessary outside of static styling, such as in dynamic visual components or animations.

widthPixel / wp

widthPixel(value, round) / wp(value, round)

These utility functions calculate and return a size value proportional to the current screen width. Both widthPixel and wp perform the same operation and can be used interchangeably. They are particularly useful for dynamic calculations outside of stylesheets, such as animations or layout calculations, ensuring correct scaling across different devices.

• Parameters:

  Argument	Type	Required	Default Value	Description
  value	number	✅	(none)	The size value to be scaled according to the screen width
  round	boolean	❌	false	Whether to round the resulting value to the nearest whole number.

• Returns: A numeric value scaled proportionally to the screen width, optionally rounded.

Example:

import {wp} from 'react-native-smart-styles';

const screenWidthPortion = wp(50, true); // Returns the width equivalent to 50 units on the current screen, rounded to the nearest whole number.

---

heightPixel / hp

heightPixel(value, round) / hp(value, round)

Similar to widthPixel, these functions calculate and return a size value proportional to the current screen height. Use heightPixel or hp to adjust dimensions based on the screen's height for precise layout and animation work.

• Parameters:

  Argument	Type	Required	Default Value	Description
  value	number	✅	(none)	The size value to be scaled according to the screen height
  round	boolean	❌	false	Whether to round the resulting value to the nearest whole number.

• Returns: A numeric value scaled proportionally to the screen height, optionally rounded.

Example:

import {hp} from 'react-native-smart-styles';

const screenHeightPortion = hp(20, true); // Returns the height equivalent to 20 units on the current screen, rounded to the nearest whole number.