Tamagui Props

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:

• Accessibility 
• Interactions 
• Localization 

Tamagui adds a few extra props, read those below.

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.

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

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

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

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

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

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