Expo Interface

A UI kit for Expo where every component is the platform's own control.

Write a screen once. It renders as SwiftUI on iOS, Jetpack Compose (Material 3) on Android, real DOM elements on web, and WinUI 3 on Windows. One accent color themes all four, and screens follow the system's light or dark scheme with no per-platform styling.

import {Button, FieldGroup, Screen, Switch} from 'expo-interface';

export default function Settings() {
  return (
    <Screen native>
      <FieldGroup>
        <FieldGroup.Section title="Sync">
          <Switch label="Notifications" value={on} onValueChange={setOn}/>
          <Button label="Continue" onPress={save}/>
        </FieldGroup.Section>
      </FieldGroup>
    </Screen>
  );
}

Platform	That screen is	Through
iOS	A SwiftUI Form with a Toggle and a Button	@expo/ui/swift-ui
Android	A Material 3 grouped list with a Switch and a Button	@expo/ui/jetpack-compose
Web	<button>, <input> and the rest, with CSS beside each component	react-native-web for layout
Windows	A Settings-style card with a ToggleSwitch and a Button	The kit's own WinUI library, on expo-windows

See every component live in the Storybook.

Quick start

Requires Expo SDK 57 and Expo Router.

1. Install

npx expo install expo-interface @expo/ui @expo/material-symbols

The peer dependencies are standard Expo modules that most Expo Router apps already have. If any are missing:

npx expo install expo-router expo-symbols expo-asset expo-image expo-constants expo-status-bar expo-system-ui expo-web-browser react-native-safe-area-context

2. Wrap the app

Use AccentProvider and the kit's Stack in the root layout. seed is any hex color, and the default is #007AFF.

// app/_layout.tsx
import {ThemeProvider} from 'expo-router';
import {AccentProvider, Stack, useNavTheme} from 'expo-interface';

function Navigation() {
  return (
    <ThemeProvider value={useNavTheme()}>
      <Stack screenOptions={{headerShown: false}}/>
    </ThemeProvider>
  );
}

export default function Layout() {
  return (
    <AccentProvider seed="#8959EA">
      <Navigation/>
    </AccentProvider>
  );
}

3. Web only: emit the palette

// app/+html.tsx
import {ScrollViewStyleReset} from 'expo-router/html';
import {getThemeBootScript, getThemeCSS} from 'expo-interface';

export default function Root({children}: React.PropsWithChildren) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <style dangerouslySetInnerHTML={{__html: getThemeCSS()}}/>
        <script dangerouslySetInnerHTML={{__html: getThemeBootScript()}}/>
        <ScrollViewStyleReset/>
      </head>
      <body>{children}</body>
    </html>
  );
}

4. Android only: register XML assets

Jetpack Compose draws icons from XML vector drawables, which @expo/material-symbols provides.

// metro.config.js
const {getDefaultConfig} = require('expo/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push('xml');

module.exports = config;

5. Build screens

Use the screen at the top of this page, then run the app on two platforms and compare. Getting started continues from here with tabs, icons and troubleshooting.

Windows

Add the platform with expo-windows. The kit needs no setup of its own there. See Windows.

Components

Everything is exported from expo-interface. Value controls are controlled: pair value with onValueChange. Each link says what the component does, its props, what each platform renders, and where the platforms differ.

Group	Components
Layout	Screen, ScreenScrollView, ScreenHeader, NativeHost, Surface, Material, Card, Toolbar, FindBar, KeyboardBar, FieldGroup, ListItem, , , , ,

Features

Feature	What it does	Guide
One accent	AccentProvider takes one hex seed, or one per scheme, and can make it legible on each background. It becomes the SwiftUI tint, a full Material 3 palette, CSS variables, and WinUI's accent brushes.	Theming
Light and dark	Every component follows the system. setColorScheme forces one, and on web the choice survives a reload without a flash.	Theming
Color tokens	theme.label, theme.background and the rest resolve to values the OS keeps current, with no re-render. useColor and usePalette give plain strings.	Theming
Icons	One token names the icon in SF Symbols, Material Symbols and Segoe Fluent Icons, and Icon draws it on every platform. fill: true asks for the solid form; expo-interface-symbols writes the drawables and the web font the names need.	Icons
Native hosts	Screen native hosts a whole screen. A kit control outside one mounts a host of its own, and NativeHost groups several beside a canvas or an editor into one.	Native hosts
Navigation	Stack, Tabs and TabStack over Expo Router: the native stack and tab bar, a floating bar on web, a NavigationView on Windows.	Navigation
Web platform primitives

Documentation

Page	What is in it
Getting started	The quick start in full, tabs, icons, troubleshooting.
Components	Every component, one line each, linked to its entry.
Theming	Accent, scheme, tokens, reading colors, high contrast, constants.
Icons	Tokens, filled icons, drawables, the web font, Windows glyphs.
Native hosts	Where native controls live on iOS and Android.
Platform services	Haptics and the other platform calls made once for every app.
Web and Windows	What each platform does its own way.
Where platforms differ	The differences that change what a screen can do, in one table.
Accessibility	What the kit sets on each platform.
Contributing

Versions

Expo SDK 57, React Native 0.86.3 and @expo/ui 57.0.25. On Windows the kit runs on expo-windows. React Native 0.86 has no react-native-windows release yet, so the Windows side is built and tested on the 0.84 line. expo-windows' versions page says what that means for an app today.

Contributing

The example app, dropfiles, uses every component and imports the package from ../src.

bun install        # bun 1.4 or later
bun run web        # or ios, android
bun run lint
bun run typecheck
bun run test       # vitest, every platform project, 100% coverage

Contributing has the rest: how a component is built, the Storybooks, the tests, the harness and the Windows build.

License

MIT