Tamagui Props
All the base props
Tamagui supports a superset of the React Native props. Start with:
From there, we add style props directly onto the same object.
Finally, there are a few non-style props Tamagui adds:
Props
animation
string
Apply an animation as defined in your createTamagui configuration.
animateOnly
string[]
A list of properties to animate. Note that flat transforms can only be controlled via `transform`.
theme
string
Apply a theme or sub-theme to this component and the components below it.
themeInverse
boolean
Invert light or dark theme for the sub-tree.
themeShallow
boolean
Used in combination with the theme prop, it prevents the theme from passing to children.
forceStyle
'hover' | 'press' | 'focus' | 'focusVisible'
Forces the pseudo style state to be on.
hitSlop
number | Insets['top'| 'bottom'| 'left'| 'right']
Adds some area outside the typical bounds of the component for touch actions to register. Tamagui uses Pressable internally so it supports number | Insets rather than just Insets.
group
boolean | string
Marks this component as a group for use in styling children based on parents named group.
componentName
string
Equivalent to "name" property on styled() for automatically applying a theme.
className
string
Web Only: An escape hatch to set className. This works fully with the compiler, which will concat your defined className with its generated ones.
disableClassName
boolean
Web Only: Disables className output of styles, instead using only inline styles.
tag
string
Web Only: Renders the final element as the given tag. Note: React Native Web doesn't support tag and as such if using any animation driver except CSS the tag prop will stop working. We'd recommend using "role" for most cases.
space
boolean | string | TamaguiConfig['space']
Use gap instead - Spacing is built into Tamagui and can accept a number or Token.space value. This will filter out any nullish child elements and insert a spacer components between the remaining elements.
spaceDirection
'horizontal' | 'vertical' | 'both'
Default:
bothBy default the space inserted is a square, but if you set it to horizontal it will be 0px tall, vertical will be 0px wide.
debug
boolean | 'verbose' | 'break'
When set Tamagui will output a variety of helpful information on how it parsed and applied styling. Verbose will output more information, and break will hit a debugger at the start of render in development mode.
untilMeasured
'hide' | 'show'
Works only alongside group, when children of the group are using container based sizing on native you can hide them until parent is measured.
disableOptimization
boolean
Disable all compiler optimization.
tabIndex
string | number
Used for controlling the order of focus with keyboard or assistive device enavigation.
role
Role
Indicates to accessibility services to treat UI component like a specific role.
asChild
boolean | 'except-style' | 'except-style-web' | 'web'
When true, Tamagui expects a single child element. Instead of rendering its own element, it will pass all props to that child, merging together any event handling props. When "except-style", the same behavior except Tamagui won't pass styles down from the parent, only non-style props.
passThrough
boolean
Advanced use only. React will "re-parent" components when it's internal tree structure changes. When making UI that adapts to another look, for better performance and avoiding losing user state (like focus, or uncontrolled text input), you can use passThrough rather than conditionally rendering a wrapping component.