GitHub

Native

Native integrations for portals, sheets, menus, toasts, and gradients

@tamagui/native connects Tamagui UI components to platform integrations for gestures, portals, sheets, menus, toasts, and gradients.

For native press handling and the style runtime, see core Native.

Setup

The @tamagui/native package provides setup utilities for native integrations. Import the setup modules at your app’s entry point, before any Tamagui imports.

yarn add @tamagui/native

@tamagui/native is a light setup package. When you use one of its optional integrations, make sure the matching native dependency is installed in your app as well, such as react-native-gesture-handler, react-native-teleport, @expo/ui, zeego, or burnt. In a monorepo, install those native packages in the parent app or workspace root rather than a leaf package.

Portal

Native portals preserve React context. The default implementation on native uses a JS-based approach that breaks React context, or requires you to hoist data awkwardly. With native portals, your custom contexts (navigation, app state) work inside Sheet, Dialog, Popover, and other portaled content.

Setup

 
yarn add react-native-teleport
// App.tsx - before any Tamagui imports

import '@tamagui/native/setup-teleport'

See Portal docs for full details.

Gesture Handler

Enable native gesture coordination for Sheet dragging and scrolling:

yarn add react-native-gesture-handler
import { setupGestureHandler } from '@tamagui/native/setup-gesture-handler'

import { GestureHandlerRootView } from 'react-native-gesture-handler'



setupGestureHandler({ pressEvents: false, sheet: true })



export default function App() {

  return (

    <GestureHandlerRootView style={{ flex: 1 }}>{/* your app */}</GestureHandlerRootView>

  )

}

See Sheet for component usage. For native press events and PressBoundary, see core Native.

Menu & ContextMenu

Native menus render platform-native context menus instead of custom overlays. They use the OS menu API for haptics, blur effects, and system integration.

Setup

 
yarn add @expo/ui
// App.tsx - before any Tamagui imports

import '@tamagui/native/setup-expo-ui-menu'

Then use the native prop:

<Menu native>{/* menu content */}</Menu>

The Zeego adapter remains available for apps on compatible React Native versions:

yarn add zeego @react-native-menu/menu react-native-ios-context-menu react-native-ios-utilities sf-symbols-typescript
import '@tamagui/native/setup-zeego'

See Menu docs and ContextMenu docs for full details.

Toast

Native toasts use platform-native toast implementations:

  • iOS: SPIndicator (system-style indicators)
  • Android: ToastAndroid
  • Web: Notification API

Setup

 
yarn add burnt
// App.tsx - before any Tamagui imports

import '@tamagui/native/setup-burnt'

Then use the native prop on ToastProvider:

<Toast.Provider native>{/* your app */}</Toast.Provider>

See Toast docs for full details.

LinearGradient

Native gradients use expo-linear-gradient for high-performance native gradient rendering.

Setup

 
yarn add expo-linear-gradient
// App.tsx - before any Tamagui imports

import '@tamagui/native/setup-expo-linear-gradient'

See LinearGradient docs for full details.

Optimized native runtime (experimental)

The native style runtime is configured at the core level. See core Native for setup.

Previous

Install

Next

Stacking (zIndex)

Edit this page on GitHub.