Skip to main content

Quick Start

The fastest way to start a new project with OnlyNative UI.

Create a new project​

npx onlynative create

The CLI walks you through a few prompts:

? Project name: my-app
? Display name (shown on home screen): My App
? Package manager: npm
? Install dependencies? Yes

That's it. Start the dev server:

cd my-app
npx expo start

What's in the template​

The generated project is a ready-to-run Expo app with OnlyNative UI wired up:

my-app/
├── app/
│   ├── _layout.tsx       # Root layout with ThemeProvider
│   └── index.tsx         # Home screen with example components
├── assets/               # Placeholder app icons and splash screen
├── app.json              # Expo config with your project name
├── babel.config.js
├── package.json
├── tsconfig.json
└── .gitignore

Root layout​

ThemeProvider is already configured in the root layout:

// app/_layout.tsx
import { Stack } from 'expo-router'
import { StatusBar } from 'expo-status-bar'
import { ThemeProvider } from '@onlynative/core'

export default function RootLayout() {
  return (
    <ThemeProvider>
      <Stack screenOptions={{ headerShown: false }} />
      <StatusBar style="auto" />
    </ThemeProvider>
  )
}

Home screen​

The home screen demonstrates Buttons and Cards out of the box. Edit app/index.tsx to start building your app.

Options​

You can also pass the project name directly:

npx onlynative create my-app

Skip all prompts with -y (uses defaults: npm, auto display name, auto install):

npx onlynative create my-app -y

Next steps​

  • Theming — customize colors, typography, and shape tokens
  • CLI — add more components with npx onlynative add
  • Components — browse all available components