GitHub
wwwwwwwwwwwwwwwwwww

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:

Event Props

All Tamagui View-based components have Pressable-like functionality built in. You don't need to wrap in Pressable or TouchableOpacity - add event handlers directly:

<View
  onPress={() => console.log('pressed')}
  onHoverIn={() => console.log('hovered')}
  pressStyle={{ opacity: 0.8 }}
  hoverStyle={{ backgroundColor: '$backgroundHover' }}
/>

Props

  • onPress

    (e: GestureResponderEvent) => void

    Called when a press is released. Works on both web and native.

  • onPressIn

    (e: GestureResponderEvent) => void

    Called immediately when a press starts.

  • onPressOut

    (e: GestureResponderEvent) => void

    Called when a press is released or cancelled.

  • onLongPress

    (e: GestureResponderEvent) => void

    Called when a press is held for longer than delayLongPress (default 500ms).

  • onHoverIn

    (e: MouseEvent) => void

    Web Only: Called when the mouse enters the element. Maps to onMouseEnter.

  • onHoverOut

    (e: MouseEvent) => void

    Web Only: Called when the mouse leaves the element. Maps to onMouseLeave.

  • onFocus

    (e: FocusEvent) => void

    Called when the element receives focus.

  • onBlur

    (e: FocusEvent) => void

    Called when the element loses focus.

  • delayPressIn

    number

    Duration in ms to wait before calling onPressIn.

  • delayPressOut

    number

    Duration in ms to wait before calling onPressOut after press is released.

  • delayLongPress

    number

    Duration in ms to wait before calling onLongPress. Default is 500ms.

  • minPressDuration

    number

    Minimum duration in ms that a press must be held before onPressOut is called.

  • cancelable

    boolean

    When true, allows the press to be cancelled by scrolling or other gestures.

  • disabled

    boolean

    Disables all press and hover interactions on the element.

  • focusable

    boolean

    Whether the element can receive focus. On web, controls tabIndex.

  • hitSlop

    number | Insets

    Extends the pressable area beyond the element bounds. Accepts a number (applies to all sides) or an object with top, bottom, left, right.

    • Use these events alongside style states like pressStyle, hoverStyle, and focusStyle to create interactive components. See the Style API for styling on interaction states.

    Other Props

    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.

  • 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']

    deprecated

    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: 

    both
    deprecated

    By 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.

    • Previous

    View & Text

    Next

    Styles

    Edit this page on GitHub.