Comment créer une app hybride Ionic Capacitor 2026

npm install -g @ionic/cli@latest
ionic start photoGallery tabs --type react --capacitor
cd photoGallery
ionic serve

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.learni.photogallery',
  appName: 'Photo Gallery',
  webDir: 'build',
  bundledWebRuntime: false,
  plugins: {
    Camera: {
      permissions: {
        camera: true,
        photos: true
      }
    }
  }
};

export default config;

npm install @capacitor/camera @capacitor/core
npm install @capacitor/android @capacitor/ios
npx cap sync
npx cap add android
npx cap add ios

import { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonImg, useCamera } from '@ionic/react';
import { camera } from 'ionicons/icons';

const Explore: React.FC = () => {
  const [photo, setPhoto] = useState<string>();
  const { photo: cameraPhoto, takePhoto } = useCamera();

  const takePicture = async () => {
    const photoTaken = await takePhoto({
      quality: 90,
      allowEditing: true,
      resultType: 'dataUrl'
    });
    setPhoto(photoTaken.dataUrl);
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Explore</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {photo && <IonImg src={photo} alt="Photo capturée" />}
        <IonFab vertical="bottom" horizontal="center" slot="fixed">
          <IonFabButton onClick={takePicture}>
            <IonIcon icon={camera}></IonIcon>
          </IonFabButton>
        </IonFab>
      </IonContent>
    </IonPage>
  );
};

export default Explore;

npm run build
npx cap sync
npx cap open android
# Ou pour iOS : npx cap open ios

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-feature android:name="android.hardware.camera" android:required="true" />
  <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name">
    <activity android:exported="true" android:launchMode="singleTask" android:name="com.getcapacitorcommunity.camera.MainActivity">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
  </application>
</manifest>