Expo Template

The expo template (scaffolded via create-app) is a production-ready Expo Router app, styled end-to-end with @multinaire/expo-ui.

Structure

/
├── .npmrc                   Pre-configured for GitHub Packages auth
├── app.config.ts           Dynamic Expo config (name, icons, plugins)
├── src/
│   ├── app/                Expo Router file-based routes
│   │   ├── _layout.tsx     Root layout — MultinaireUI + ThemeProvider
│   │   └── index.tsx       Home screen
│   └── assets/
│       ├── theme.json      Colors, typography, and variables
│       ├── images/         App icon, adaptive icon, favicon
│       └── app.icon/       iOS Icon Composer asset
├── AGENTS.md                Guidance for coding agents (Claude Code, etc.)
└── .claude/                 Claude Code plugin config

Routes live under src/app rather than app/ — app.config.ts and tsconfig.json are both configured for this via expo-router/plugin and a @/* path alias to the project root.

Pre-installed modules

Module	Purpose
@multinaire/expo-ui	Component library, theme system, hooks
expo-router	File-based navigation
iconsax-react-nativejs	Icon set (993 icons) backing the Icon component
react-native-ui-datepicker	Powers DateTimePicker
i18next, react-i18next	Localization
@react-native-async-storage/async-storage	Persists theme/language preference
expo-font, expo-image, expo-splash-screen, expo-status-bar, expo-system-ui, expo-navigation-bar, expo-web-browser, expo-constants, expo-linking, expo-localization, expo-dev-client	Expo modules wired into app.config.ts
react-native-gesture-handler, react-native-reanimated, react-native-worklets, react-native-screens, react-native-safe-area-context, react-native-svg, react-native-web	Peer deps required by @multinaire/expo-ui

Nothing above needs to be installed manually — it ships in the template's package.json.

GitHub Packages authentication

@multinaire/expo-ui is published to GitHub Packages, not npm, so the template ships a project-level .npmrc already pointing @multinaire at the right registry. You only need to export a GitHub PAT as PERSONAL_ACCESS_TOKEN before running npm install — see GitHub Packages authentication.

Root layout

src/app/_layout.tsx wraps the app in MultinaireUI (loading theme.json) and maps the theme onto React Navigation with useMapNativeTheme and useScreenOptions:

import theme from "@/src/assets/theme.json";
import MultinaireUI, {
  useMapNativeTheme,
  useScreenOptions,
} from "@multinaire/expo-ui";
import { Stack, ThemeProvider } from "expo-router";

export default function RootLayout() {
  return (
    <MultinaireUI theme={theme}>
      <RootNavigator />
    </MultinaireUI>
  );
}

function RootNavigator() {
  const theme = useMapNativeTheme();
  const { screenOptions } = useScreenOptions("stack");

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

Don't add a second MultinaireUI or ThemeProvider in nested layouts — the root already provides both.

App identity

Expo's default scaffolding tools only rename the HelloWorld placeholder tokens inside app.json and native ios/android project files — this template has neither, so nothing renames app.config.ts automatically. Instead, name/slug/scheme and android.package/ios.bundleIdentifier are read from two constants declared at the top of app.config.ts:

const SLUG = "expo-template";
const ID = "com.multinaire.template";

Update both when starting a new project — ID must be a reverse-DNS identifier you actually own before submitting to the Play Store or App Store, not com.multinaire.*.

Theming

src/assets/theme.json is the single source of truth for colors, typography, and spacing, and is validated against @multinaire/expo-ui's theme.schema.json. Edit it directly rather than hard-coding values in components — see Theme Setup.

Scripts

Script	Description
npm run start	Start the Metro dev server
npm run android	Build and run on Android
npm run ios	Build and run on iOS
npm run web	Start the web build
npm run lint	expo lint --fix
npm run format	prettier --write .

AGENTS.md

The template ships an AGENTS.md (referenced from CLAUDE.md) describing the project structure, pre-installed modules, and conventions for coding agents working in the scaffolded app — keep it in sync if you restructure the project.

Next steps

• Configuration — provider setup details.
• Localization — the template's i18next/react-i18next setup.
• Components Overview — browse available components.