Developing with Tamagui

Details and helpful dev tools.

Helpful exports

Some useful hooks and constants exist in @tamagui/core.

Constants

For adapting things specifically to web, native, or platform:

  • isWeb - true if rendering on web SSR or client side, false if native
  • isSSR - true if web + SSR
  • isClient - true if web + not SSR
  • isChrome - true if client + Chrome
  • isWebTouchable - true if web + touch device
  • isTouchable - true if isWebTouchable or native
  • isWebIOS - true if web + iOS

Helpers

  • isTamaguiElement(child: any; name?: string) => boolean - match Tamagui React elements.
  • extractable<A extends TamaguiComponent>(): A - hints for compiler to extract a HoC component .
  • getExpandedShorthands(props: Object): Object - Returns a new object with all shorthand props expanded.

Classes generated

Tamagui generates a few helpful classes. For components created with styled() for which a name is set, like so:

const MyButton = styled(YStack, {
name: 'MyButton',
backgroundColor: 'red',
})

Tamagui will add the classname is_MyButton. This is a useful escape hatch for attaching CSS to any extra component. All Tamagui components have their name set.

For component that extends a Text-based component, a further classname is set of the format font_[fontFamily]. So if you do:

<Paragraph fontFamily="$body" />

The classname font_body will be output to DOM.

Dev tools

Tamagui has two ways of giving you a lot more insight into what's happening.

Debug pragma

Adding // debug to the top of any file will output a verbose stream of everything Tamagui is doing at compile-time. Use // debug-verbose to get much more information including more granular timings.

Use it to see what's being extracted, why, and every step along the optimization pipeline.

Debug prop

Adding debug to any Tamagui component will output a lot of information on what's going on at runtime. Use it like so:

import { Button } from 'tamagui'
export default () => <Button debug>Hello world</Button>

And you'll see props, styles, and a variety of variables relevant to processing them.

You can do <Button debug="break" /> to have it break at the beginning of rendering, or <Button debug="verbose" /> to have it output more detailed debug information.

Global Tamagui

In development mode, there's a global Tamagui with a lot of helpful internals, including your entire parsed config from tamagui.config.ts.

Beyond your config, you have:

  • allSelectors: All the selectors inserted by Tamagui (before runtime).

Inspecting Components

Any styled() component will have a staticConfig property attached to it:

const Circle = styled(Stack, {
borderRadius: 1000,
})
console.log(Circle.staticConfig) // lots of helpful information
  • componentName is taken from the name key
  • variants contains the merged variants including parents.
  • defaultProps is the extracted props left to use as defaults on the component.