@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

bash

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



$3

tsx

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 (

        

            Platform: {isIOS ? 'iOS' : isAndroid ? 'Android' : 'Web'}

            

            {cameraAvailable && (

                

            )}

            

            

            {position && Lat: {position.coords.latitude}}

        

    );

}

$3

vue





Hooks



$3



Detect current platform.

typescript

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





$3



Take photos and pick images.

typescript

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



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

const image = await pickImage();





$3



Get device location.

typescript

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



await getCurrentPosition();

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





$3



Handle push notifications.

typescript

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



await requestPermission();

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





$3



Haptic feedback.

typescript

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



await impact('medium');

await notification('success');

await vibrate(300);





$3



Secure key-value storage.

typescript

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



await set('theme', 'dark');

const theme = await get('theme');





Configuration



Create

capacitor.config.ts

typescript

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

bash

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