Style props

On the node that draws it

A root takes the view keys; a text slot takes the text keys; an image slot takes the image keys. The prop goes on the part it paints, so you never reach a nested element through a configuration object.

<Button variant="primary" paddingHorizontal={20} borderRadius={12}>
  <Button.Icon as={SaveIcon} />
  <Button.Label fontSize={15} letterSpacing={0.4}>
    Save
  </Button.Label>
</Button>

Order against style

A component resolves its own styles first, then its tint, then your style props, then your style. So a style prop overrides the variant's value and style overrides everything — style is where transforms, shadows and computed values belong.

// borderRadius wins over the recipe, and style wins over borderRadius
<Card borderRadius={20} style={{ transform: [{ rotate: '2deg' }] }} />

Values are kept, not transformed: a key written as undefined still counts as written, and undefined in a style is already a no-op.

Reach for the theme when you want the scale

Style props take raw values on purpose — a number here is never a hidden step. When you do want the theme's rhythm, ask it for the number.

const theme = useXAUITheme()

<Card padding={theme.spacing(4)} borderRadius={theme.radius.lg} />

The theme guide lists the scales.

What is not a style prop

• The Left and Right keys. React Native mirrors a layout under RTL through Start and End only, so those are the ones exposed: paddingStart, not paddingLeft.
• pointerEvents — a style key and a View prop both. It stays the prop it always was.
• Names the component owns. variant, size and color on a root are the component's vocabulary — size is the control's scale, color its tint. On a text slot, color is the text colour it has always been.

The whole set

Read out of the source at build time, so a React Native upgrade that adds a key shows up here on its own.