Utility Functions
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.