Flutter-inspired React Native UI components with native animations powered by React Native Reanimated
npm install @xaui/nativeReact Native components and hooks that extend the core @xaui/core theme system. This mobile layer ships animated primitives (buttons, indicators, hooks) ready to use with XUIProvider.
``bash`
pnpm add @xaui/native
- react ^18 || ^19react-native
- >=0.70.0react-native-reanimated
- >=4.0.0react-native-svg
- >=13.0.0
The package also relies on @xaui/core/theme for the shared tokens.
1. Wrap your tree with XUIProvider to expose the tokens and follow the system color scheme:
`tsx
import { XUIProvider } from '@xaui/native/core'
import { theme, darkTheme } from '@xaui/core/theme'
export default function App() {
return (
{/ your screens /}
)
}
`
2. Consume the theme inside your components via useXUITheme or useColorMode:
`tsx
import { Text, View } from 'react-native'
import { useXUITheme, useColorMode } from '@xaui/native/core'
function Banner() {
const theme = useXUITheme()
const mode = useColorMode()
return (
Current mode: {mode}
)
}
`
- Variants: solid, outlined, flat, light, fadedxs
- Sizes: , sm, md, lgnone
- Radii: , sm, md, lg, fullfullWidth
- Supports start/end content, , isDisabled, isLoading with an integrated spinner
- Declarative press animations (scale, opacity, spring)
`tsx`
themeColor="primary"
variant="solid"
elevation={2}
size="lg"
radius="full"
isLoading={saving}
spinnerPlacement="end"
onPress={handleSave}
>
Save changes
useButtonStyles exposes the internal calculations if you need to derive custom layouts (spacing, colors, shadows, spinner size).
- Variants: circular (default size 40) and linear (custom height)primary
- Draws from the theme colors (, secondary, etc.) and optionally renders a track with showTrackdisableAnimation
- is provided for snapshots or silent loading states
`tsx`
themeColor="secondary"
showTrack
borderRadius={4}
/>
- useXUITheme() must be used within XUIProvider; it throws if the provider is missing.useXUIColors()
- is a shortcut for reading just the color tokens.useColorMode()
- returns light or dark based on React Native's useColorScheme().XUIProvider
- accepts theme and darkTheme as DeepPartial so you can override partial token sets without redefining the entire theme.
- Bundles are produced with tsup (ESM + CJS outputs under dist).packages/native/__tests__
- Tests live under and run with vitest`.
MIT