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

    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.