react-native

react-native

Production cross-platform mobile development. Covers Expo-managed and bare React Native workflows, native module integration, and App Store / Play Store shipping.

Project Setup — Expo

Expo is the default for new projects. Managed workflow handles native builds, EAS Build handles binaries, EAS Update handles OTA.

npx create-expo-app@latest my-app --template
cd my-app && npm start              # opens dev menu
# iOS simulator (macOS only)
npm run ios
# Android emulator
npm run android
# Physical device: scan QR in Expo Go app

// app.json — Expo config
{
  "expo": {
    "name": "Ask Meridian",
    "slug": "ask-meridian",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": { "image": "./assets/splash.png", "backgroundColor": "#08080f" },
    "ios": {
      "bundleIdentifier": "uk.ask-meridian.mobile",
      "buildNumber": "1",
      "supportsTablet": true
    },
    "android": {
      "package": "uk.ask_meridian.mobile",
      "versionCode": 1,
      "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png" }
    },
    "plugins": ["expo-router", "expo-notifications", "expo-secure-store"]
  }
}

Navigation with Expo Router

File-based routing — a React Native Next.js-alike.

app/
├── _layout.tsx        # root layout (tab bar, navigation container)
├── index.tsx          # /
├── verify.tsx         # /verify
├── (tabs)/
│   ├── _layout.tsx    # tab navigator
│   ├── home.tsx       # /home
│   └── history.tsx    # /history
└── skill/[slug].tsx   # dynamic route

// app/_layout.tsx
import { Stack } from 'expo-router';
export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="index" />
      <Stack.Screen name="skill/[slug]" options={{ presentation: 'modal' }} />
    </Stack>
  );
}

Push Notifications

iOS requires APNs certs via Apple Developer portal; Android uses FCM. Expo unifies both.