@flightdev/mobile

Mobile app support for Flight Framework via Capacitor. Build iOS and Android apps with the same codebase.

Philosophy

Flight doesn't impose - install only the Capacitor plugins you need. All plugins are optional peer dependencies. Hooks gracefully degrade on web.

Features

• Cross-platform - iOS, Android, and Web from one codebase
• React hooks - usePlatform, useCamera, useGeolocation, and more
• Vue composables - Reactive wrappers with automatic cleanup
• Plugin freedom - Install only what you need
• Web fallback - Graceful degradation, no errors

Installation

# Core package
npm install @flightdev/mobile

# Install Capacitor (required for native)
npm install @capacitor/core @capacitor/cli

# Install only the plugins you need
npm install @capacitor/camera          # Optional
npm install @capacitor/geolocation     # Optional
npm install @capacitor/push-notifications # Optional
npm install @capacitor/haptics         # Optional
npm install @capacitor/preferences     # Optional

Quick Start

React

import { usePlatform, useCamera, useGeolocation } from '@flightdev/mobile/react';

function App() {
    const { isNative, isIOS, isAndroid } = usePlatform();
    const { takePhoto, available: cameraAvailable } = useCamera();
    const { position, getCurrentPosition } = useGeolocation();
    
    return (
        <div>
            <p>Platform: {isIOS ? 'iOS' : isAndroid ? 'Android' : 'Web'}</p>
            
            {cameraAvailable && (
                <button onClick={() => takePhoto()}>Take Photo</button>
            )}
            
            <button onClick={getCurrentPosition}>Get Location</button>
            {position && <p>Lat: {position.coords.latitude}</p>}
        </div>
    );
}

Vue

<script setup>
import { usePlatform, useCamera, useGeolocation } from '@flightdev/mobile/vue';

const { isNative, isIOS } = usePlatform();
const { takePhoto, available } = useCamera();
const { position, getCurrentPosition, loading } = useGeolocation();
</script>

<template>
    <p>Platform: {{ isIOS ? 'iOS' : 'Web' }}</p>
    <button v-if="available" @click="takePhoto">Take Photo</button>
    <button @click="getCurrentPosition">Get Location</button>
</template>

Hooks

usePlatform

Detect current platform.

const { platform, isNative, isIOS, isAndroid, isWeb } = usePlatform();

useCamera

Take photos and pick images.

const { takePhoto, pickImage, available } = useCamera();

const photo = await takePhoto({ quality: 90 });
const image = await pickImage();

useGeolocation

Get device location.

const { position, error, loading, getCurrentPosition, watchPosition } = useGeolocation();

await getCurrentPosition();
console.log(position.coords.latitude, position.coords.longitude);

usePushNotifications

Handle push notifications.

const { token, requestPermission, onNotificationReceived } = usePushNotifications();

await requestPermission();
console.log('FCM Token:', token);

useHaptics

Haptic feedback.

const { impact, notification, vibrate } = useHaptics();

await impact('medium');
await notification('success');
await vibrate(300);

useStorage

Secure key-value storage.

const { get, set, remove } = useStorage();

await set('theme', 'dark');
const theme = await get('theme');

Configuration

Create capacitor.config.ts:

import { defineCapacitorConfig } from '@flightdev/mobile/config';

export default defineCapacitorConfig({
    appId: 'com.example.myapp',
    appName: 'My App',
    webDir: 'dist',
    plugins: {
        PushNotifications: {
            presentationOptions: ['badge', 'sound', 'alert'],
        },
    },
});

Build Commands

# Add platforms
npx cap add ios
npx cap add android

# Build web assets
npm run build

# Sync to native projects
npx cap sync

# Open native IDE
npx cap open ios
npx cap open android

License

MIT