Other exports

Let's take a quick look through some of the useful other exports in @tamagui/core.

Constants

Constants are re-exported from @tamagui/constants :

• isWeb - process.env.TAMAGUI_TARGET === 'web'. Should be true both for SSR and Client side web targets.
• isWindowDefined - typeof window === 'undefined'
• isServer - isWeb && !isWindowDefined.
• isClient - isWeb && isWindowDefined.
• useIsomorphicLayoutEffect - isServer ? useEffect : useLayoutEffect. Helper for SSR rendering without warnings.
• isChrome - client-side Chrome
• isWebTouchable - web-only touch-device (client side only)
• isTouchable - True for any touch device (client side only).

Helpers

type getVariable = (value: Variable) => string

If given a Variable - which comes from a parsed theme or token returned from createTamagui, useTheme or getTokens (read more on the useTheme docs).

Calling getVariable(useTheme().color) returns var(--color) on the web, and #fff on other platforms.

type isTamaguiComponent (component: any; name?: string) => boolean

If no name given, true if a Tamagui component, if name given ensures it's the specific named Tamagui component.

type isTamaguiElement (child: any; name?: string) => boolean

If no name given, true if a Tamagui ReactElement, if name given ensures it's the specific named Tamagui component element.

Returned by any styled components, is necessary to use if you are going to use the following pattern (which would break pseudo styles and variants):

import { Stack, styled } from '@tamagui/core'

const MyComponent = (props) => {
  return <Stack {...props} />
}

const MyStyledComponent = styled(MyComponent, {
  // ...
})

You must wrap MyComponent with Stack.styleable instead:

import { Stack, styled } from '@tamagui/core'

const MyComponent = Stack.styleable((props, ref) => {
  return <Stack ref={ref} {...props} />
})

const MyStyledComponent = styled(MyComponent, {
  // ...
})

Note that ref gets forwarded automatically and theme will automatically now happen above this MyComponent. You also must always return only Stack from this component (or null), as Tamagui will manage forwarding variants and other custom Tamagui style props forward through.

;() => TokensParsed

Returns the parsed Tamagui config object of all your tokens, can be used at runtime to get values from tokens.

;(props: Object) => Object

Take props, returns new object with all shorthand props expanded.

themeable<Comp extends ReactComponentLike>(component: Comp): Comp

A higher order component  that accepts theme and themeInverse, rendering them onto Theme before rendering your component.

Hooks

A shim of the upcoming React hook .

useGet<A>(currentValue: A): () => A

Create a getter function that's always up to date with the given currentValue

SSR-friendly, only true on if native touchable or web touchable device (client side, not server side).

SSR-friendly, returns true if SSR has completed on the client, false before hydration done. On server it's always false.

Returns the string name of the current theme.

Pass in props that include media styles and shorthands, get back a flat object of styles with the current media styles merged and shorthands expanded. This is an advanced pattern that should be used sparingly, as it will trigger updates on every media query used. Helpful for more complex components that need to pass down props they are given to children (a common example being the size prop, if it's controlling children that also accept size).

// if props is:
//   { size: '$2', $sm: { size: '$4' } }
// and $sm is active, activeProps will be:
//   { size: '$4' }

// if shorthands like m => margin, then m always expands to margin
function MyButton(props) {
  const activeProps = useProps(props)
}

You can pass a second option to disable the shorthands expansion

function MyButton(props) {
  const activeProps = useProps(props, { disableExpandShorthands: true })
}