Native Integrations

Tamagui components work great out of the box, but several offer optional native integrations for improved performance and platform-native UX. All native integrations are opt-in - components work without them, just with slightly different behavior.

@tamagui/native Package

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
npm
bun
pnpm
yarn add @tamagui/native
Copy

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.

yarn
npm
bun
pnpm
yarn add react-native-teleport
Copy

// App.tsx - before any Tamagui imports
import '@tamagui/native/setup-portal'
Copy

See Portal docs for full details.

Sheet Gestures

Native gesture coordination - makes sheets feel smoother and not get confused with scrollable content during drags. Without this, scroll and pan gestures can occasionally conflict on iOS.

yarn
npm
bun
pnpm
yarn add react-native-gesture-handler
Copy

// App.tsx - before any Tamagui imports
import '@tamagui/native/setup-gesture-handler'
import { GestureHandlerRootView } from 'react-native-gesture-handler'

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>{/* Your app */}</GestureHandlerRootView>
  )
}
Copy

See Sheet docs for full details.

Menu & ContextMenu

Native menus - renders platform-native context menus instead of custom overlays. Uses iOS’s native menu API for haptics, blur effects, and system integration.

yarn
npm
bun
pnpm
yarn add zeego @react-native-menu/menu react-native-ios-context-menu react-native-ios-utilities
Copy

Then use the native prop:

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

See Menu docs and ContextMenu docs for full details.

Toast

Native toasts - uses platform-native toast implementations:

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

yarn
npm
bun
pnpm
yarn add burnt
Copy

Then use the native prop on ToastProvider:

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

See Toast docs for full details.

LinearGradient

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

yarn
npm
bun
pnpm
yarn add expo-linear-gradient
Copy

// App.tsx - before any Tamagui imports
import '@tamagui/native/setup-expo-linear-gradient'
Copy

See LinearGradient docs for full details.