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.

;() => 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

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

Returns the string name of the current theme.

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.