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:

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 }]

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

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