Install the native package
Run the install command from an existing Expo or React Native application. React and React Native remain peer dependencies supplied by your app; react-native-svg is installed alongside Lumen.
React Native Installation
Check requirements, install the package, and configure your first native screen. Learn how with Lumen for React Native.
Get started
Install and configure
Install Lumen with its required react-native-svg peer, then mount one LumenProvider near the application root. Add the optional datetime picker only when importing from the /datetime subpath.
Before you begin
What you need
- Node.js 22.12 or newer for consumer applications
- Node.js 22.19 or newer and pnpm for the Lumen repository playground
- React 19.2 and React Native 0.86.2 or newer
- Expo Go, Xcode, or Android Studio for a native runtime
Add the theme provider
Mount one LumenProvider near the application root. Use scheme="system" to follow the device appearance automatically.
Run a native target
Start Expo or your native bundler, then open the app on web, an emulator, a simulator, or a physical device.
pnpm add @santi020k/lumen-react-native react-native-svgnpm install @santi020k/lumen-react-native react-native-svg# Required until Lumen 2 removes the deprecated root date exports
pnpm add @react-native-community/datetimepickerimport {
LumenButton,
LumenProvider,
LumenSurface,
LumenText
} from '@santi020k/lumen-react-native'
export function App() {
return (
<LumenProvider scheme="system">
<LumenSurface>
<LumenText variant="title">Welcome</LumenText>
<LumenButton onPress={() => {}}>Continue</LumenButton>
</LumenSurface>
</LumenProvider>
)
}# Expo
npx expo start
# React Native Community CLI
npx react-native start