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:

View , or
Text

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

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

Prop	Type	Default
`theme`	`string`
Apply a [theme or sub-theme](/docs/intro/themes) to this component and the components below it.
`className`	`string`
Web Only: Only affects web apps, giving an escape hatch to set the className directly. This works fully with the compiler, which will concat your defined className with its generated class names.
`tag`	`string`
Web Only: Renders the final DOM property using 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 component between the remaining elements.
`spaceDirection`	`'row' \| 'column' \| 'both'`	`both`
By default the space inserted is a square, but if you set it to row it will be 0px tall, column will be 0px wide.
`fullscreen`	`boolean`
Sets position absolute, and top, left, right, and bottom all to 0.
`debug`	`boolean \| 'verbose' \| 'break'`
When set to true 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 set to true Tamagui will output a variety of helpful information on how it parsed and applied styling.

Text props

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

Prop	Type	Default
`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:

Prop	Type	Default
`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 }]

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' }} />

Prop	Type	Default
`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:

Prop	Type	Default
`onHoverIn`	`(e: HoverEvent) => void`
Web only: maps to onMouseEnter
`onHoverOut`	`(e: HoverEvent) => void`
Web only: maps to onMouseLeave

Themes

Benchmarks

Edit this page on GitHub.

Getting Started

Core

Tamagui

Separate Components

Extras

Guides

Community

Tamagui Props

Text props

Flat transform properties

Pseudo style props

Media query style props

Hover Events