---
title: 'Other exports'
description: Helpful functions and constants
---

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

## Constants

[Constants are re-exported from @tamagui/constants](https://github.com/tamagui/tamagui/blob/main/code/core/constants/src/constants.ts):

- `isWeb` - True if targeting the web. Will be true both for SSR and client.
- `isBrowser` - `typeof document !== 'undefined'`
- `isServer` - `isWeb && !isBrowser`.
- `isClient` - `isWeb && isBrowser`.
- `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

### getConfig

The exported `getConfig` will return your fully parsed Tamagui config. This is
safer than importing it directly as it avoids circular imports. In general you
want to use `useTheme` to access themes, and
`getTokens`/`getToken`/`getTokenValue` for tokens, but for other parts of the
config this can be useful.

### insertFont

```tsx
type insertFont = (name: string, fontIn: GenericFont) => ParsedFont
```

Will add a new font after initial createTamagui call. Where `GenericFont` is the
same as a font passed to createTamagui, and `ParsedFont` is the font with the
subkeys prefixed with `$` and turned into variable objects.

### updateFont

The same as insertFont, but will update an existing font.

### isTamaguiComponent

```tsx
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.

### isTamaguiElement

```tsx
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.

### getTokens

```tsx
;() => TokensParsed
```

Returns the parsed Tamagui config object of all your tokens, can be used at
runtime to get values from tokens. If you are looking to get a single token
value, prefer `getToken` or `getTokenValue`.

### getToken

```tsx
;(name: Token, group?: keyof Tokens) => any
```

Given the specific name of a token or a name + group, will return the value as
either a variable on the web, or raw value on native. So if you define a size
token with key `small` and value of `14`:

```tsx
getToken('$size.small') // returns on web var(--size-small), native 14
getToken('$small', 'size') // returns on web var(--size-small), native 14
```

### getTokenValue

```tsx
;(name: Token, group?: keyof Tokens) => any
```

Similar to getToken, but always returns the raw value rather than the variable
name. If you define a size token with key `small` and value of `14`:

```tsx
getTokenValue('$size.small') // returns 14
getTokenValue('$small', 'size') // returns 14
```

### themeable

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

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

### getVariable

```tsx
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](/docs/core/use-theme)).

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

### setOnLayoutStrategy

This is a low-level utility to control `onLayout` performance. By default,
Tamagui `onLayout` on the web uses the `"async"` strategy (see below), which
gives a good balance of accuracy and performance. For extremely accurate to
native `onLayout`, you can use `"sync"`, but it can cause performance issues in
typical usage.

Call `setOnLayoutStrategy` with a single string argument:

- `"off"` will pause all `onLayout` callbacks from running.
- `"sync"` will run every frame and update every frame if necessary.
- `"async"` will use an async getBoundingClientRect strategy that avoids
  repaints/reflows, and also waits 2 frames of debouncing before triggering the
  callback.

The `async` strategy generally has great performance on web, and it will also
ensure to call `onLayout` sync on mount the first time, so you avoid jitters.

---

## Hooks

### useProps

Pass in props that include media styles and shorthands, get back a flat object
of props 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 in the props object. 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).

```tsx
// 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 an option to disable the shorthands expansion, and another option
to resolve any token strings into their respective theme or token value:

```tsx
function MyButton(props) {
  const activeProps = useProps(props)
}
```

useProps takes a second argument, which is the same as useStyle, documented in
the next section.

### useStyle

Pass in props that include media styles and shorthands, get back a flat style
object with the current media styles merged, shorthands expanded, and all
theme/token values resolved (into CSS variables on the web or values on native
by default). This will remove any non-style values and will by default expand
all variants and resolve all values.

```tsx
// if props is:
//   { color: '$background', $sm: { color: '$color' } }
// and $sm is active, activeProps will be on web:
//   { color: 'var(--color)' }
// and on native will resolve to the actual theme or token value:
//   { color: '#fff' }
// this resolve behavior can be controlled, see the docs just below.

// if shorthands like m => margin, then m expands to margin

function MyButton(props) {
  const style = useStyle(props)
}
```

It can take a couple options to control how it resolves values and handles
shorthands:

```tsx
function MyButton(props) {
  const style = useStyle(props, {
    // option to disable the shorthand expansion
    disableExpandShorthands: true,
    // option to change how values are resolved
    // 'auto' (default) resolves to optimized value on all platforms (CSS variable on web, DynamicColor on iOS, not optimized on android)
    // 'value' resolves to the raw theme/token string on all platforms (the same as useTheme()[name].val)
    resolveValues: 'value',
    // pass a Tamagui component to resolve any custom variants:
    forComponent: CustomComponent,
  })
}
```

### usePropsAndStyle

Similar to the above two hooks, this returns your fully resolved/merged/media
query flattened styles, but instead of returning _just_ props or _just_ style,
it returns both of them split out, as well as returning the result of useTheme()
and useMedia() that it uses internally:

```tsx
function MyButton(props) {
  const [props, style, theme, media] = usePropsAndStyle(props, opts)
  // see useStyle to for documentation on opts
  // we return theme, media as they are used internally already in the hook
}
```

### useWebRef

For platform-specific files (`.tsx` and `.native.tsx`), this hook creates a
properly typed ref for web that also composes with a forwarded ref. When you
need to access `HTMLElement`-specific properties like `selectionStart` on
inputs, this avoids needing `any` casts.

```tsx
import { useWebRef } from 'tamagui' // or '@tamagui/element'

// In your .tsx (web) file:
function MyInput(props, forwardedRef) {
  const { ref, composedRef } = useWebRef<HTMLInputElement>(forwardedRef)

  // ref.current is typed as HTMLInputElement
  // Access web-specific properties safely:
  const start = ref.current?.selectionStart

  // composedRef forwards to both ref and forwardedRef
  return <StyledInput ref={composedRef} />
}
```

### useNativeRef

For platform-specific files (`.native.tsx`), this hook creates a properly typed
ref for React Native that also composes with a forwarded ref. Pairs with
`useWebRef` for cross-platform component development.

```tsx
import { useNativeRef } from 'tamagui' // or '@tamagui/element'

// In your .native.tsx file:
function MyComponent(props, forwardedRef) {
  const { ref, composedRef } = useNativeRef(forwardedRef)

  // ref.current is typed as View
  return <StyledView ref={composedRef} />
}
```

For input components, use `useNativeInputRef` which types to `TextInput`:

```tsx
import { useNativeInputRef } from 'tamagui' // or '@tamagui/element'

function MyInput(props, forwardedRef) {
  const { ref, composedRef } = useNativeInputRef(forwardedRef)
  // ref.current is typed as TextInput
  return <StyledInput ref={composedRef} />
}
```

### getWebElement

A runtime utility that narrows a `TamaguiElement` to an `HTMLElement`. Throws if
the element is not an HTMLElement. Useful for platform-specific code where you
know you're on web.

```tsx
import { getWebElement } from 'tamagui' // or '@tamagui/element'

// Narrows to HTMLElement
const el = getWebElement(ref.current)

// Or narrow to a specific element type
const input = getWebElement<HTMLInputElement>(ref.current)
input.selectionStart // typed correctly
```

### useThemeName

Returns the string name of the current theme.

### useIsTouchDevice

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

### useDidFinishSSR

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

### ClientOnly

A component that opts its children out of SSR. When wrapped in `ClientOnly`,
Tamagui avoids double-renders in various places which results in faster
client-side rendering.

```tsx
import { ClientOnly } from 'tamagui' // or '@tamagui/core'

// Children will render only on the client, skipping SSR entirely
<ClientOnly>
  <MyClientOnlyComponent />
</ClientOnly>

// Can be conditionally enabled
<ClientOnly enabled={shouldSkipSSR}>
  <MyComponent />
</ClientOnly>
```

---

## Type Helpers

### GetProps

Fetches the type of props for a Tamagui component:

```tsx
import { View, GetProps, styled } from '@tamagui/core'

const X = styled(View, {})

type XProps = GetProps<typeof X>
```

### GetRef

Fetches the type of a ref for a Tamagui component, or any React component:

```tsx
import { View, GetRef, styled } from '@tamagui/core'

const X = styled(View, {})

const MyComponent = () => {
  const ref = useRef<GetRef<typeof X>>()
  return <X ref={ref} />
}
```