Installation

XAUI targets React 18 or 19, React Native 0.70+ and Reanimated 4. Run the New Architecture, and on an Expo-managed project let Expo pick the native versions.

Expo (recommended)

pnpm add @xaui/native@beta libphonenumber-js
pnpm exec expo install react-native-reanimated react-native-worklets \
  react-native-gesture-handler react-native-svg react-native-safe-area-context

Rebuild the dev client after adding native modules with pnpm exec expo prebuild. Recent Expo SDKs already configure the Worklets plugin.

React Native Community CLI

pnpm add @xaui/native@beta libphonenumber-js \
  react-native-reanimated react-native-worklets react-native-gesture-handler \
  react-native-svg react-native-safe-area-context
cd ios && pod install && cd ..

Add react-native-worklets/plugin last in the Babel plugin list, then clear the Metro cache.

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-worklets/plugin'], // always last
}

Optional peers

Package	Used by
react-native-gesture-handler	Slider, calendars, BottomSheet, TimePicker
react-native-svg	icons, progress and charts
react-native-safe-area-context	chrome and full-screen surfaces
libphonenumber-js	PhoneNumberField

Agent skill

If you code with an agent, install the skill: it carries the import shape, the slot notation, what variant is against color, and a link to every component's markdown, so the agent reads the real API instead of guessing at one.

npx skills add https://ui.xtartapp.com/skills/xaui/SKILL.md

The skills CLI detects the agents on the machine and writes the skill into each one's skills directory — see Agent skills for the manual install and the other agents.

App root

The gesture root wraps the XAUI provider. The provider mounts the portal host that dialogs, menus, selects and sheets render into.

import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { XAUIProvider } from '@xaui/native/theme'

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <XAUIProvider>
        <YourApp />
      </XAUIProvider>
    </GestureHandlerRootView>
  )
}