Skip to main content

Function: useSizing()

useSizing(): object

Defined in: hooks/useSizing.ts:52

Hook to access and manage sizing configuration with support for calculations and multipliers.

Returns​

object

Object containing sizing utilities

sizing​

sizing: SizingMap = sizingConfig.sizing

getSize()​

getSize: (size) => DimensionValue

Parameters​

size​

string

Returns​

DimensionValue

Examples​

const MyComponent = () => {
  const { getSize } = useSizing();

  return (
    <View style={{
      width: getSize('sm'),
      height: getSize('2*'), // 2 times base size
      padding: getSize('calc(100% - 20px)')
    }}>
      <Text>Sized content</Text>
    </View>
  );
};
const MyComponent = () => {
  const { sizing, getSize } = useSizing();

  return (
    <View style={{
      margin: getSize('md'),
      borderRadius: getSize('lg'),
      minHeight: getSize('3*') // 3 times base size
    }}>
      <Text>Multiple sizes</Text>
    </View>
  );
};