Metrics
Touch target, screen margin and hairline.
Draft
The values shown here are conceptual and may change.
Metrics are layout constants that apply across the whole app rather than to one element.
touchTarget 44
screenMargin 16
hairline 1px
export const metrics = {
touchTarget: 44,
screenMargin: 16,
hairline: StyleSheet.hairlineWidth,
} satisfies Metrics;| Key | Default | Use |
|---|---|---|
touchTarget | 44pt | Minimum touch area of anything pressable |
screenMargin | 16pt | Horizontal padding between content and the screen edges |
hairline | 1 physical pixel | Separators and thin borders |
Usage
Tappable reads touchTarget and adds hitSlop when an element is smaller, so a 24pt icon button still gets a 44pt touch area.
<ScrollView
contentContainerStyle={{ paddingHorizontal: tokens.metrics.screenMargin }}
/>