create-react-native-airborne 0.0.1

package/template/client/app/index.tsx

@@ -0,0 +1,127 @@
+import { SignedIn, SignedOut, useSession, useUser } from "@clerk/clerk-expo";
+import { Link } from "expo-router";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Screen } from "@/src/components/screen";
+import { SignOutButton } from "@/src/components/sign-out-button";
+
+export default function IndexRoute() {
+  const { user } = useUser();
+  const { session } = useSession();
+
+  return (
+    <Screen className="bg-slate-100 px-5 py-4 dark:bg-zinc-950">
+      <View className="flex-1">
+        <View className="absolute -top-24 -left-16 h-56 w-56 rounded-full bg-cyan-200 dark:bg-cyan-900" />
+        <View className="absolute -bottom-24 -right-16 h-64 w-64 rounded-full bg-sky-200 dark:bg-sky-900" />
+
+        <View className="flex-1 justify-center">
+          <SignedOut>
+            <View
+              style={styles.cardShadow}
+              className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900"
+            >
+              <View className="gap-3">
+                <Text className="text-xs font-semibold uppercase tracking-[2px] text-sky-700 dark:text-sky-300">
+                  React Native Airborne
+                </Text>
+                <Text className="text-4xl font-black leading-tight text-zinc-900 dark:text-zinc-50">
+                  Start fast. Ship clean.
+                </Text>
+                <Text className="text-base leading-6 text-zinc-600 dark:text-zinc-300">
+                  Expo Router, Clerk auth, Convex backend, push notifications, and Uniwind in one
+                  starter.
+                </Text>
+              </View>
+
+              <View className="mt-7 gap-3">
+                <Link href="/(auth)/sign-up" asChild>
+                  <Pressable className="rounded-2xl border border-sky-700 bg-sky-600 px-4 py-3.5">
+                    <Text className="text-center text-base font-semibold text-white">
+                      Create account
+                    </Text>
+                  </Pressable>
+                </Link>
+
+                <Link href="/(auth)/sign-in" asChild>
+                  <Pressable className="rounded-2xl border border-zinc-300 bg-zinc-100 px-4 py-3.5 dark:border-zinc-700 dark:bg-zinc-800">
+                    <Text className="text-center text-base font-semibold text-zinc-900 dark:text-zinc-100">
+                      I already have an account
+                    </Text>
+                  </Pressable>
+                </Link>
+              </View>
+
+              <View className="mt-7 flex-row flex-wrap gap-2">
+                <View className="rounded-full bg-sky-100 px-3 py-1 dark:bg-sky-900">
+                  <Text className="text-xs font-semibold text-sky-700 dark:text-sky-200">
+                    Expo Router
+                  </Text>
+                </View>
+                <View className="rounded-full bg-emerald-100 px-3 py-1 dark:bg-emerald-900">
+                  <Text className="text-xs font-semibold text-emerald-700 dark:text-emerald-200">
+                    Clerk
+                  </Text>
+                </View>
+                <View className="rounded-full bg-indigo-100 px-3 py-1 dark:bg-indigo-900">
+                  <Text className="text-xs font-semibold text-indigo-700 dark:text-indigo-200">
+                    Convex
+                  </Text>
+                </View>
+                <View className="rounded-full bg-amber-100 px-3 py-1 dark:bg-amber-900">
+                  <Text className="text-xs font-semibold text-amber-700 dark:text-amber-200">
+                    Uniwind
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </SignedOut>
+
+          <SignedIn>
+            <View
+              style={styles.cardShadow}
+              className="gap-5 rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900"
+            >
+              <View className="gap-2">
+                <Text className="text-xs font-semibold uppercase tracking-[2px] text-sky-700 dark:text-sky-300">
+                  Welcome
+                </Text>
+                <Text className="text-3xl font-black text-zinc-900 dark:text-zinc-50">
+                  Hello {user?.primaryEmailAddress?.emailAddress}
+                </Text>
+                <Text className="text-zinc-600 dark:text-zinc-300">
+                  Open your dashboard to continue.
+                </Text>
+              </View>
+
+              {session?.currentTask ? (
+                <Text className="rounded-xl bg-amber-100 px-3 py-2 text-sm text-amber-800 dark:bg-amber-900 dark:text-amber-200">
+                  Session task pending: {session.currentTask.key}
+                </Text>
+              ) : null}
+
+              <Link href="/(app)" asChild>
+                <Pressable className="rounded-2xl border border-sky-700 bg-sky-600 px-4 py-3.5">
+                  <Text className="text-center text-base font-semibold text-white">
+                    Open app dashboard
+                  </Text>
+                </Pressable>
+              </Link>
+
+              <SignOutButton />
+            </View>
+          </SignedIn>
+        </View>
+      </View>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  cardShadow: {
+    shadowColor: "#0f172a",
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.16,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+});

package/template/client/app.config.ts

@@ -0,0 +1,30 @@
+import type { ExpoConfig, ConfigContext } from "expo/config";
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: "__APP_NAME__",
+  slug: "__APP_SLUG__",
+  version: "0.1.0",
+  orientation: "portrait",
+  icon: "./assets/images/icon.png",
+  scheme: "airborne",
+  userInterfaceStyle: "automatic",
+  ios: {
+    supportsTablet: true,
+    bundleIdentifier: "__APP_BUNDLE_ID__",
+  },
+  android: {
+    package: "__APP_BUNDLE_ID__",
+    adaptiveIcon: {
+      backgroundColor: "#f4f4f5",
+      foregroundImage: "./assets/images/android-icon-foreground.png",
+      backgroundImage: "./assets/images/android-icon-background.png",
+      monochromeImage: "./assets/images/android-icon-monochrome.png",
+    },
+  },
+  plugins: ["expo-router", "expo-notifications", "expo-secure-store"],
+  experiments: {
+    typedRoutes: true,
+    reactCompiler: true,
+  },
+});

package/template/client/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require("eslint/config");
+const expoConfig = require("eslint-config-expo/flat");
+
+module.exports = defineConfig([
+  ...expoConfig,
+  {
+    ignores: ["dist/*"],
+  },
+]);

package/template/client/global.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "uniwind";

package/template/client/metro.config.js

@@ -0,0 +1,9 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withUniwindConfig } = require("uniwind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withUniwindConfig(config, {
+  cssEntryFile: "./global.css",
+  dtsFile: "./uniwind-types.d.ts",
+});

package/template/client/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "lint": "expo lint",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@clerk/clerk-expo": "^2.19.22",
+    "@expo/vector-icons": "^15.0.3",
+    "convex": "^1.28.2",
+    "expo": "^55.0.0-preview.10",
+    "expo-constants": "~55.0.4",
+    "expo-device": "~55.0.6",
+    "expo-linking": "~55.0.4",
+    "expo-notifications": "~55.0.6",
+    "expo-router": "~55.0.0-preview.7",
+    "expo-secure-store": "~55.0.5",
+    "expo-status-bar": "~55.0.2",
+    "expo-system-ui": "~55.0.5",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-native": "0.83.1",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-mmkv": "^4.1.2",
+    "react-native-reanimated": "~4.2.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.22.0",
+    "react-native-worklets": "0.7.2",
+    "tailwindcss": "^4.1.12",
+    "uniwind": "^1.3.0",
+    "zod": "^3.25.76",
+    "zustand": "^5.0.8"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~55.0.0",
+    "typescript": "~5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "overrides": {
+    "react-native-worklets": "0.8.0-nightly-20260122-45349f895"
+  }
+}

package/template/client/src/components/auth-shell.tsx

@@ -0,0 +1,63 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Screen } from "@/src/components/screen";
+
+type AuthShellProps = PropsWithChildren<{
+  badge: string;
+  title: string;
+  subtitle: string;
+  footer?: ReactNode;
+}>;
+
+export function AuthShell({ badge, title, subtitle, footer, children }: AuthShellProps) {
+  return (
+    <Screen className="bg-slate-100 px-5 py-4 dark:bg-zinc-950">
+      <View className="flex-1">
+        <View className="absolute -top-20 -right-16 h-52 w-52 rounded-full bg-cyan-200 dark:bg-cyan-900" />
+        <View className="absolute -bottom-24 -left-20 h-64 w-64 rounded-full bg-sky-200 dark:bg-sky-900" />
+
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
+          className="flex-1 justify-center"
+        >
+          <ScrollView
+            bounces={false}
+            keyboardShouldPersistTaps="handled"
+            contentContainerClassName="flex-grow justify-center py-10"
+          >
+            <View
+              style={styles.cardShadow}
+              className="rounded-3xl border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900"
+            >
+              <View className="mb-6 gap-3">
+                <Text className="text-xs font-semibold uppercase tracking-[2px] text-sky-700 dark:text-sky-300">
+                  {badge}
+                </Text>
+                <Text className="text-4xl font-black leading-tight text-zinc-900 dark:text-zinc-50">
+                  {title}
+                </Text>
+                <Text className="text-base leading-6 text-zinc-600 dark:text-zinc-300">
+                  {subtitle}
+                </Text>
+              </View>
+
+              <View className="gap-4">{children}</View>
+
+              {footer ? <View className="mt-6">{footer}</View> : null}
+            </View>
+          </ScrollView>
+        </KeyboardAvoidingView>
+      </View>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  cardShadow: {
+    shadowColor: "#0f172a",
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.16,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+});

package/template/client/src/components/form-input.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { Text, TextInput, View } from "react-native";
+
+type FormInputProps = {
+  label: string;
+  value: string;
+  placeholder?: string;
+  hint?: string;
+  keyboardType?: "default" | "email-address" | "number-pad" | "numeric" | "phone-pad";
+  autoComplete?: "off" | "email" | "password" | "one-time-code" | "name" | "username" | "tel";
+  textContentType?:
+    | "none"
+    | "emailAddress"
+    | "password"
+    | "oneTimeCode"
+    | "name"
+    | "username"
+    | "telephoneNumber";
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  secureTextEntry?: boolean;
+  onChangeText: (value: string) => void;
+};
+
+export function FormInput({
+  label,
+  value,
+  placeholder,
+  hint,
+  keyboardType = "default",
+  autoComplete = "off",
+  textContentType = "none",
+  autoCapitalize = "none",
+  secureTextEntry = false,
+  onChangeText,
+}: FormInputProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <View className="gap-2">
+      <Text className="text-sm font-medium text-zinc-800 dark:text-zinc-100">{label}</Text>
+      <TextInput
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        keyboardType={keyboardType}
+        autoComplete={autoComplete}
+        textContentType={textContentType}
+        autoCapitalize={autoCapitalize}
+        secureTextEntry={secureTextEntry}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        className={`rounded-2xl border px-4 py-3.5 text-base text-zinc-900 dark:text-zinc-100 ${
+          isFocused
+            ? "border-sky-500 bg-white dark:border-sky-400 dark:bg-zinc-950"
+            : "border-zinc-300 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900"
+        }`}
+        placeholderTextColor="#71717a"
+      />
+      {hint ? <Text className="text-xs text-zinc-500 dark:text-zinc-400">{hint}</Text> : null}
+    </View>
+  );
+}

package/template/client/src/components/primary-button.tsx

@@ -0,0 +1,37 @@
+import type { PropsWithChildren } from "react";
+import { Pressable, Text } from "react-native";
+
+type PrimaryButtonProps = PropsWithChildren<{
+  onPress: () => void | Promise<void>;
+  disabled?: boolean;
+  tone?: "primary" | "muted";
+}>;
+
+export function PrimaryButton({
+  children,
+  onPress,
+  disabled = false,
+  tone = "primary",
+}: PrimaryButtonProps) {
+  const activeClassName =
+    tone === "primary"
+      ? "border border-sky-700 bg-sky-600 dark:border-sky-500 dark:bg-sky-500"
+      : "border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800";
+
+  const textClassName =
+    tone === "primary" ? "text-white dark:text-zinc-950" : "text-zinc-900 dark:text-zinc-100";
+
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={onPress}
+      className={`rounded-2xl px-4 py-3.5 ${disabled ? "border border-zinc-300 bg-zinc-200 dark:border-zinc-700 dark:bg-zinc-700" : activeClassName}`}
+    >
+      <Text
+        className={`text-center text-base font-semibold ${disabled ? "text-zinc-500 dark:text-zinc-400" : textClassName}`}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+}

package/template/client/src/components/screen.tsx

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { withUniwind } from "uniwind";
+
+const StyledSafeAreaView = withUniwind(SafeAreaView);
+
+type ScreenProps = PropsWithChildren<{
+  className?: string;
+}>;
+
+export function Screen({ children, className = "" }: ScreenProps) {
+  return (
+    <StyledSafeAreaView className={`flex-1 bg-white p-4 dark:bg-zinc-950 ${className}`}>
+      {children}
+    </StyledSafeAreaView>
+  );
+}

package/template/client/src/components/sign-out-button.tsx

@@ -0,0 +1,32 @@
+import { useClerk } from "@clerk/clerk-expo";
+import { useState } from "react";
+import { Text } from "react-native";
+import { PrimaryButton } from "@/src/components/primary-button";
+
+export function SignOutButton() {
+  const { signOut } = useClerk();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSignOut = async () => {
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await signOut();
+    } catch {
+      setError("Unable to sign out. Try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      <PrimaryButton onPress={handleSignOut} disabled={isSubmitting}>
+        {isSubmitting ? "Signing out..." : "Sign out"}
+      </PrimaryButton>
+      {error ? <Text className="text-sm text-red-500">{error}</Text> : null}
+    </>
+  );
+}

package/template/client/src/hooks/use-theme-sync.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { Uniwind } from "uniwind";
+import { usePreferencesStore } from "@/src/store/preferences-store";
+
+export function useThemeSync() {
+  const theme = usePreferencesStore((state) => state.theme);
+
+  useEffect(() => {
+    Uniwind.setTheme(theme);
+  }, [theme]);
+}

package/template/client/src/lib/convex.ts

@@ -0,0 +1,6 @@
+import { ConvexReactClient } from "convex/react";
+import { getClientEnv } from "@/src/lib/env";
+
+const env = getClientEnv();
+
+export const convexClient = new ConvexReactClient(env.convexUrl);

package/template/client/src/lib/env-schema.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+
+export const clientEnvSchema = z.object({
+  clerkPublishableKey: z.string().min(1),
+  convexUrl: z.string().url(),
+  easProjectId: z.string().optional(),
+});
+
+export type ClientEnv = z.infer<typeof clientEnvSchema>;
+
+export function parseClientEnv(raw: unknown): ClientEnv {
+  return clientEnvSchema.parse(raw);
+}

package/template/client/src/lib/env.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { parseClientEnv } from "./env-schema";
+
+describe("parseClientEnv", () => {
+  it("parses valid values", () => {
+    const env = parseClientEnv({
+      clerkPublishableKey: "pk_test_example",
+      convexUrl: "https://example.convex.cloud",
+      easProjectId: "project-id",
+    });
+
+    expect(env.clerkPublishableKey).toBe("pk_test_example");
+    expect(env.convexUrl).toBe("https://example.convex.cloud");
+  });
+
+  it("throws for invalid values", () => {
+    expect(() =>
+      parseClientEnv({
+        clerkPublishableKey: "",
+        convexUrl: "invalid-url",
+      }),
+    ).toThrowError();
+  });
+});

package/template/client/src/lib/env.ts

@@ -0,0 +1,19 @@
+import { parseClientEnv, type ClientEnv } from "@/src/lib/env-schema";
+
+let cachedEnv: ClientEnv | null = null;
+
+export { parseClientEnv, type ClientEnv };
+
+export function getClientEnv() {
+  if (cachedEnv) {
+    return cachedEnv;
+  }
+
+  cachedEnv = parseClientEnv({
+    clerkPublishableKey: process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY,
+    convexUrl: process.env.EXPO_PUBLIC_CONVEX_URL,
+    easProjectId: process.env.EXPO_PUBLIC_EAS_PROJECT_ID,
+  });
+
+  return cachedEnv;
+}

package/template/client/src/lib/notifications.ts

@@ -0,0 +1,47 @@
+import Constants from "expo-constants";
+import * as Device from "expo-device";
+import * as Notifications from "expo-notifications";
+import { Platform } from "react-native";
+import { getClientEnv } from "@/src/lib/env";
+
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowBanner: true,
+    shouldShowList: true,
+    shouldPlaySound: false,
+    shouldSetBadge: false,
+  }),
+});
+
+export async function registerForPushNotificationsAsync() {
+  if (!Device.isDevice) {
+    throw new Error("Push notifications require a physical device.");
+  }
+
+  const existing = await Notifications.getPermissionsAsync();
+  let finalStatus = existing.status;
+  if (existing.status !== "granted") {
+    const requested = await Notifications.requestPermissionsAsync();
+    finalStatus = requested.status;
+  }
+
+  if (finalStatus !== "granted") {
+    throw new Error("Push notification permission was not granted.");
+  }
+
+  const { easProjectId } = getClientEnv();
+  const projectId = easProjectId ?? Constants.expoConfig?.extra?.eas?.projectId ?? undefined;
+
+  const token = await Notifications.getExpoPushTokenAsync({ projectId });
+
+  if (Platform.OS === "android") {
+    await Notifications.setNotificationChannelAsync("default", {
+      name: "default",
+      importance: Notifications.AndroidImportance.MAX,
+      vibrationPattern: [0, 250, 250, 250],
+      lightColor: "#ffffff",
+    });
+  }
+
+  return token.data;
+}

package/template/client/src/store/preferences-store.ts

@@ -0,0 +1,42 @@
+import { createMMKV } from "react-native-mmkv";
+import { create } from "zustand";
+import { createJSONStorage, persist, type StateStorage } from "zustand/middleware";
+import type { ThemePreference } from "@/src/types/theme";
+
+const mmkv = createMMKV({ id: "airborne-preferences" });
+
+const zustandStorage: StateStorage = {
+  setItem: (name, value) => {
+    mmkv.set(name, value);
+  },
+  getItem: (name) => mmkv.getString(name) ?? null,
+  removeItem: (name) => {
+    mmkv.remove(name);
+  },
+};
+
+type PreferencesState = {
+  theme: ThemePreference;
+  lastPushToken: string | null;
+  setTheme: (theme: ThemePreference) => void;
+  setLastPushToken: (token: string | null) => void;
+};
+
+export const usePreferencesStore = create<PreferencesState>()(
+  persist(
+    (set) => ({
+      theme: "system",
+      lastPushToken: null,
+      setTheme: (theme) => set({ theme }),
+      setLastPushToken: (lastPushToken) => set({ lastPushToken }),
+    }),
+    {
+      name: "airborne-preferences-store",
+      storage: createJSONStorage(() => zustandStorage),
+      partialize: (state) => ({
+        theme: state.theme,
+        lastPushToken: state.lastPushToken,
+      }),
+    },
+  ),
+);

package/template/client/src/types/theme.ts

@@ -0,0 +1 @@
+export type ThemePreference = "light" | "dark" | "system";

package/template/client/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./*"],
+      "@convex/*": ["../server/convex/*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "../server/convex/_generated/**/*.ts",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "uniwind-types.d.ts"
+  ]
+}