mobile

Ship the same app to iPhone and Android, with every kitr package switched to its native version.

PlatformsClientBuilt onCapacitor

What it is

@kitr/mobile adds a Capacitor platform. kitr dev runs your app on a simulator or device with live reload, kitr build syncs it into the Xcode and Android Studio projects, and the provider gives platform and storage their native drivers.

The client code also runs in a plain browser. For an installable web app with no store listing, the web platform's PWA option is enough.

Install

kitr add mobile phone --appId com.acme.orders --appName "Acme Orders"

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Adds @kitr/mobile with Capacitor, a phone platform and platforms/phone/capacitor.config.ts. Adds router, platform and storage first if missing. Needs Xcode or Android Studio. Every change.

Quick start

Build once to create the native projects, then show where the app runs:

kitr build phone

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

// app/pages/index.tsx
import { usePlatform } from '@kitr/platform/react'

export default function OrdersHome() {
  const platform = usePlatform()
  return (
    <main>
      <h1>Acme orders</h1>
      <p>
        Running on {platform.os}
        {platform.native ? ' in the native app' : ' in the browser'}.
      </p>
    </main>
  )
}

Start it on a simulator:

kitr dev phone --target ios
# phone: dev server on http://192.168.1.20:3100, the ios app loads it live

The simulator shows "Running on ios in the native app". The same page in a browser says "in the browser". Next in the guide: Run the app on a phone.

Built on

kitr adds the platform contract, the generated Capacitor config, deep link files, the native drivers and the nativeOnly helper.

Problems it solves

Further reading