Installation
Add the runtime, configure Unistyles and Reanimated, and copy your first component.
Five minutes on an existing Expo project. New projects can start from
npx create-expo-app@latest with the default template.
-
Run init.
Terminal window npx @eoria/cli initIt writes
eoria.jsonandsrc/unistyles.ts, addsimport '@/unistyles'as the first line of your root layout, writes a Babel config with the Unistyles and Worklets plugins, adds the@/*alias, and installs@eoria/coreand the peers withexpo install. Each file it would overwrite is skipped and reported. The CLI page lists exactly what it touches. -
Check the theme import.
src/unistyles.tsregisters the themes and has to run before any component renders.initimports it at the top ofapp/_layout.tsx,App.tsxorindex.js, whichever it finds. If your entry file lives somewhere else, add the import yourself and keep it first.src/unistyles.ts import { configureUnistyles, defaultThemes, type EoriaTheme } from '@eoria/core'declare module 'react-native-unistyles' {export interface UnistylesThemes {light: EoriaThemedark: EoriaTheme}}configureUnistyles({ themes: defaultThemes })configureUnistyleswrapsStyleSheet.configureand turns on adaptive themes, so the app follows the OS appearance until you say otherwise. See Theming for presets and manual switching. -
Add your first components.
npx @eoria/cli add button portal toastnpx shadcn@latest add https://eoria.adamtrip.pt/r/button.jsonDependencies resolve transitively. Adding
buttonalso copiestext; addingselectcopiespopper,portalandtext. -
Mount the portal host and toaster.
Overlays render through a portal so they sit above navigation. Put the host last in your root layout.
src/app/_layout.tsx import '@/unistyles'import { Stack } from 'expo-router'import { PortalHost } from '@/components/ui/portal'import { Toaster } from '@/components/ui/toast'export default function RootLayout() {return (<><Stack /><PortalHost /><Toaster /></>)} -
Rebuild the native app.
Terminal window npx expo prebuildnpx expo run:iosExpo Go will not work. If the app throws `Unistyles: One of your stylesheets is trying to
get the theme, but no theme has been selected yet`, the themes file is not imported before the first component renders. Check step 2.
Peer versions
The only hard requirement is the New Architecture. These are the versions the example app and the previews run on:
| Package | Version |
|---|---|
| react-native | 0.86 |
| react-native-unistyles | 3.3 |
| react-native-reanimated | 4.5 |
| react-native-worklets | 0.10 |
| react-native-nitro-modules | 0.37 |
These are what the example app pins. Older Unistyles 3 releases should work; Unistyles 2 will
not, because the recipe engine uses useVariants and the babel plugin’s dependency tracking.
Jest
@eoria/core/jest mocks Unistyles with variant resolution. The official mock strips variants,
which makes every variant test pass for the wrong reason.
module.exports = { preset: 'jest-expo', setupFiles: ['@eoria/core/jest'],}