Tamagui Props

All the properties supported on base Tamagui components.

Tamagui uses a superset of the style properties that are supported in React Native and React Native Web, and flattens them onto the direct properties of Stack and Text (see why below).

For the full list of style and non-style props, see:

You may also want to reference the react-native-web docs  for more on props related to:

Tamagui adds a few extra props, read those below.

Style prop ordering

Tamagui props are sensitive to their order. This is actually a huge feature, that without would leave you with impossible styling challenges. Let's first explain how it works, and then why it's necessary.

How it works

You define a new styled component:

const CalHeader = styled(Text, {
variants: {
isHero: {
true: {
fontSize: 36,
backgroundColor: 'blue',
color: 'white',
},
},
},
})

And then use it in a view you're building:

export const MyCalendar = (props: { isHero?: boolean; headerFontSize?: number }) => {
return (
<>
{/* ... some other components... */}
<CalHeader isHero={props.isHero} fontSize={props.headerFontSize}>
{monthName}
</CalHeader>
</>
)
}

Why it's important

Notice two things: isHero sets a variety of properties, but you want to allow overriding one of those properties, fontSize.

If Tamagui didn't respect the order of the props on the JSX element of CalHeader, you wouldn't know if the isHero font size wins, or if the headerFontSize wins.

CSS does a "last defined style wins", which is a huge pain because it means you have to carefully manage the order your CSS is actually loaded into the document. Tamagui could do something similar, with a "inline props always win, defined props go in order of definition", but this would be dramatically less flexible.

Especially when it comes to spreading props downwards. Because Tamagui supports prop order, you have complete control over which styles you want to always win, vs which can be overriden by a user:

export const MyCalendarHeader = (props: CalHeaderProps) => {
return (
<CalHeader isHero {...props} fontSize={36}>
{monthName}
</CalHeader>
)
}

This component defaults to isHero styles, but if a user passes in isHero as false, it will disable all those styles. But because fontSize is always after the spread, it will always be set to 36.

Tamagui props

Outside of flat style properties, Tamagui adds the following props:

Props

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

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

  • tag

    string

    Web Only: Renders the final element as the given tag.

  • space

    boolean | string | TamaguiConfig['space']

    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

    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.

  • separator

    React.ReactNode

    Insert a custom separator between every child. If space is provided, the separator will appear with a space on either side.

  • fullscreen

    boolean

    Sets position absolute, and top, left, right, and bottom all to 0.

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

  • asChild

    boolean

    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.

  • Text props

    For Text and all parents of Text components, you add the following props (beyond react-native-web):

    Props

  • selectable

    boolean

    Sets cursor to text, and userSelect to text.

  • Flat transform properties

    For styling, Tamagui adds flattened transform properties, pseudo states and media queries:

    Props

  • x

    string | number

    Maps to transform: [{ translateX }]

  • y

    string | number

    Maps to transform: [{ translateY }]

  • scale

    string | number

    Maps to transform: [{ scale }]

  • perspective

    string | number

    Maps to transform: [{ perspective }]

  • scaleX

    string | number

    Maps to transform: [{ scaleX }]

  • scaleY

    string | number

    Maps to transform: [{ scaleY }]

  • skewX

    string | number

    Maps to transform: [{ skewX }]

  • skewY

    string | number

    Maps to transform: [{ skewY }]

  • matrix

    string | number

    Maps to transform: [{ matrix }]

  • rotate

    string | number

    Maps to transform: [{ rotate }]

  • rotateY

    string | number

    Maps to transform: [{ rotateY }]

  • rotateX

    string | number

    Maps to transform: [{ rotateX }]

  • rotateZ

    string | number

    Maps to transform: [{ rotateZ }]

  • Pseudo style props

    Support for hoverStyle, pressStyle, and focusStyle is helpful as it turns what typically is complex stateful code into pure CSS on web, and a more performant StyleSheet.create (compared to inline styles) for native. They can be used with media queries as well.

    <Text color="red" hoverStyle={{ color: 'blue' }} />

    Props

  • hoverStyle

    TamaguiStyleProps

    Web only: Applies the given style on hover

  • pressStyle

    TamaguiStyleProps

    Applies the given style on press

  • focusStyle

    TamaguiStyleProps

    Applies the given style on focus

  • Media query style props

    Based on whatever media queries you define in createTamagui, you can now use any of them to apply styling on native and web using the $ prefix.

    If you defined your media query like:

    createTamagui({
    media: {
    sm: { maxWidth: 800 },
    },
    })

    Then you can use it like:

    <Text color="red" $sm={{ color: 'blue' }} />

    Hover Events

    Tamagui adds events above the typical react-native/react-native-web View/Text props. These are:

    Props

  • onHoverIn

    (e: HoverEvent) => void

    Web only: maps to onMouseEnter

  • onHoverOut

    (e: HoverEvent) => void

    Web only: maps to onMouseLeave