View & Text

View and Text with the full Tamagui style API

Tamagui’s View and Text match the React Native primitives and accept the full set of Tamagui style props.

They are the default building blocks. View is a flex column on every platform, so a layout looks the same on web and native. On web they render a div and a span. For semantic tags, set render, or see the HTML elements, which are in early development.

Usage

You can use them directly:

import { View, Text } from 'tamagui' // or '@tamagui/core'

export default () => (
  <View margin={10}>
    <Text color="color">Hello</Text>
  </View>
)

Inline styles and shorthands compile away, so prefer them for one-off styles:

import { View, Text } from 'tamagui' // or '@tamagui/core'

export default () => (
  <View mx="4" scale={1.2}>
    <Text color="color">Hello</Text>
  </View>
)

With styled()

You can also use them with styled to create your own lower level views that are meant to be re-usable:

import { type SizeTokens, View, styled } from 'tamagui' // or '@tamagui/core'

export const Circle = styled(View, {
  borderRadius: 100_000_000,

  variants: {
    pin: {
      top: {
        position: 'absolute',
        top: 0,
      },
    },

    centered: {
      true: {
        alignItems: 'center',
        justifyContent: 'center',
      },
    },

    size: styled.dynamic<SizeTokens | number>((size, { tokens }) => ({
      width: tokens.size[size] ?? size,
      height: tokens.size[size] ?? size,
    })),
  } as const,
})

Both inline styles and styled() are compiler-optimized, so pick per use case.

Props

Tamagui supports a superset of the React Native props. Start with:

View, or
Text

From there, we add style props directly onto the same object.

Finally, there are a few non-style props Tamagui adds:

Event props

All Tamagui View-based components have Pressable-like functionality built in. You don’t need to wrap in Pressable or TouchableOpacity - add event handlers directly:

<html.div
  onPress={() => console.log('pressed')}
  onPointerEnter={() => console.log('hovered')}
  opacity="press:0.8"
  backgroundColor="hover:background-hover"
/>

Props

onPress

(e: GestureResponderEvent) => void

Called when a press is released. Works on both web and native.

onPressIn

(e: GestureResponderEvent) => void

Called immediately when a press starts.

onPressOut

(e: GestureResponderEvent) => void

Called when a press is released or cancelled.

onLongPress

(e: GestureResponderEvent) => void

Called when a press is held for longer than delayLongPress (default 500ms).

onFocus

(e: FocusEvent) => void

Called when the element receives focus.

onBlur

(e: FocusEvent) => void

Called when the element loses focus.

delayPressIn

number

Duration in ms to wait before calling onPressIn.

delayPressOut

number

Duration in ms to wait before calling onPressOut after press is released.

delayLongPress

number

Duration in ms to wait before calling onLongPress. Default is 500ms.

minPressDuration

number

Minimum duration in ms that a press must be held before onPressOut is called.

cancelable

boolean

When true, allows the press to be cancelled by scrolling or other gestures.

disabled

boolean

Disables all press and hover interactions on the element.

hitSlop

number | Insets

Extends the pressable area beyond the element bounds. Accepts a number (applies to all sides) or an object with top, bottom, left, right.

Use these events alongside press:, hover:, and focus: clauses to create interactive components. See the Style API for interaction styling.

Other props

Props

render

string | JSX.Element | ((props, state) => JSX.Element)

Control which element or component is rendered. Accepts an HTML tag name (e.g., "button", "a"), a JSX element, or a render function receiving props and component state. String render props are compiler-optimized. See styled() render documentation for details.

transition

string | object

A CSS transition string ("200ms ease-out"), a preset name from your createTamagui configuration ("bouncy"), or an object for per-property control ({ preset: 'bouncy', opacity: '100ms' }). See the Animations documentation.

theme

string

Apply a theme or sub-theme, such as theme="inverse", to this component and the components below it.

themeShallow

boolean

Used in combination with the theme prop, it prevents the theme from passing to children.

forceStyle

'hover' | 'press' | 'focus' | 'focusVisible' | 'focusWithin'

Forces the pseudo style state to be on.

group

boolean | string

Marks this component as a group for use in styling children based on parents named group.

className

string

Adds a className. In Tailwind mode, supported utility classes compile to Tamagui styles on web and native. Unknown classes pass through on web.

disableClassName

boolean

Web Only: Disables className output of styles, instead using only inline styles.

debug

boolean | 'verbose' | 'break'

When set Tamagui will output a variety of helpful information on how it parsed and applied styling. Verbose will output more information, and break will hit a debugger at the start of render in development mode.

untilMeasured

'hide' | 'show'

Works only alongside group, when children of the group are using container based sizing on native you can hide them until parent is measured.

disableOptimization

boolean

Disable all compiler optimization.

tabIndex

string | number

Used for controlling keyboard and assistive device focus. This replaces the old focusable prop.

role

Role

Indicates to accessibility services to treat UI component like a specific role.

asChild

boolean | 'except-style' | 'except-style-web' | 'web'

When true, Tamagui expects a single child element. Instead of rendering its own element, it will pass all props to that child, merging together any event handling props. When "except-style", the same behavior except Tamagui won't pass styles down from the parent, only non-style props.

passThrough

boolean

Advanced use only. React will "re-parent" components when it's internal tree structure changes. When making UI that adapts to another look, for better performance and avoiding losing user state (like focus, or uncontrolled text input), you can use passThrough rather than conditionally rendering a wrapping component.

Event handlers

Tamagui supports all React Native events on all platforms. On web, all standard DOM event handlers work too:

Cross-platform events

onPress, onLongPress, onPressIn, onPressOut - Touch/press events that work on both native and web

Pointer Events - Modern events that unify mouse, touch, and pen input. On native, these are mapped to touch events with a normalized event shape including clientX/Y, pointerId, and pointerType:

onPointerDown, onPointerUp, onPointerMove
onPointerEnter, onPointerLeave, onPointerCancel

On native, e.target.setPointerCapture(pointerId) and releasePointerCapture(pointerId) are supported for drag scenarios where you need to receive move events outside the element bounds.

Web-only events

The following events are available on web and automatically ignored on native:

Mouse events

onClick, onDoubleClick, onContextMenu
onMouseEnter, onMouseLeave, onMouseMove, onMouseOver, onMouseOut
onMouseDown, onMouseUp
onWheel

Keyboard events

onKeyDown, onKeyUp, onKeyPress

Drag and drop

onDrag, onDragStart, onDragEnd
onDragEnter, onDragLeave, onDragOver
onDrop

Input events

onChange, onInput, onBeforeInput

Scroll events

onScroll

Clipboard events

onCopy, onCut, onPaste

Focus events

onFocus, onBlur

All event handlers receive the standard React synthetic event as their argument.

createStyledContext()

HTML elements

Edit this page on GitHub.