Capacitor Plugins

Capacitor Plugins Directory

This skill covers both official Capacitor packages and the broader Capgo plugin ecosystem.

When to Use This Skill

• User asks "which plugin should I use for X?"
• User needs native functionality (camera, biometrics, payments, etc.)
• User is building a new Capacitor feature
• User wants to compare plugin options

Decision Process

Step 1: Check for an Official Capacitor Package First

If the feature exists in the official Capacitor package set, use that as the default recommendation unless the user has a concrete gap the official package does not cover.

Open the matching file in references/ before answering:

• capacitor-action-sheet.md
• capacitor-app-launcher.md
• capacitor-app.md
• capacitor-background-runner.md
• capacitor-barcode-scanner.md
• capacitor-browser.md
• capacitor-camera.md
• capacitor-clipboard.md
• capacitor-cookies.md
• capacitor-device.md
• capacitor-dialog.md
• capacitor-file-transfer.md
• capacitor-file-viewer.md
• capacitor-filesystem.md
• capacitor-geolocation.md
• capacitor-google-maps.md
• capacitor-haptics.md
• capacitor-http.md
• capacitor-inappbrowser.md
• capacitor-keyboard.md
• capacitor-local-notifications.md
• capacitor-motion.md
• capacitor-network.md
• capacitor-preferences.md
• capacitor-privacy-screen.md
• capacitor-push-notifications.md
• capacitor-screen-orientation.md
• capacitor-screen-reader.md
• capacitor-share.md
• capacitor-splash-screen.md
• capacitor-status-bar.md
• capacitor-system-bars.md
• capacitor-text-zoom.md
• capacitor-toast.md
• capacitor-watch.md

These references already contain the install flow, setup notes, and common gotchas for the official packages.

Step 2: Escalate to Capgo or Community Plugins When Needed

Recommend a Capgo or community plugin when:

• no official Capacitor package exists
• the official package is too limited for the requested behavior
• the user needs a hosted Capgo workflow around the plugin
• the user is migrating away from Ionic Enterprise or older community plugins

Open references/capgo-plugin-catalog.md before recommending a Capgo plugin. The catalog is generated from real package metadata and covers every canonical @capgo/* Capacitor plugin package found in the local Capgo plugin workspace.

When recommending a non-official plugin, explain why it is a better fit than the official option and include the exact package name from the catalog.

Capgo Plugin Catalog

Use references/capgo-plugin-catalog.md as the complete Capgo plugin source. It includes package names, descriptions, and source links for 139 Capgo Capacitor plugin packages.

Fast starting points:

Installation

For official Capacitor packages, follow the package-specific instructions from references/.

For Capgo plugins, install the exact package from references/capgo-plugin-catalog.md:

npm install <exact-package-name>
npx cap sync

Choosing the Right Plugin

Prefer Official Capacitor For

• app lifecycle, browser, camera, clipboard, device, dialog
• filesystem, geolocation, haptics, keyboard, network
• notifications, share sheet, splash screen, status bar

For Authentication

• Biometric login: Use @capgo/capacitor-native-biometric
• Social sign-in: Use @capgo/capacitor-social-login
• Password autofill: Use @capgo/capacitor-autofill-save-password

For Media

• Camera with overlay: Use @capgo/camera-preview
• Simple photo access: Use @capgo/capacitor-photo-library
• Video playback: Use @capgo/capacitor-video-player
• Document scanning: Use @capgo/capacitor-document-scanner

For Payments

• Subscriptions/IAP: Use @capgo/native-purchases
• Apple Pay/Google Pay: Use @capgo/capacitor-pay

For Live Updates

• Production OTA: Use @capgo/capacitor-updater
• Development hot reload: Use @capgo/capacitor-live-reload

For Native SQL Storage

• Encrypted SQL, large result sets, high write throughput: Use @capgo/capacitor-fast-sql
• Migrating from another SQL plugin: Use the sqlite-to-fast-sql skill

Resources

• Documentation: https://capgo.app/docs
• GitHub: https://github.com/Cap-go
• Discord: https://discord.gg/capgo

Action Sheet

Provides access to native Action Sheets.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/action-sheet
npx cap sync

Configuration

Android

Set androidxMaterialVersion in variables.gradle.

• Use 1.12.0 as the baseline default for older setups.
• Use 1.13.0 for Capacitor 8 or current projects.

Web

Requires PWA Elements (@ionic/pwa-elements).

Install it and register the loader during app startup:

npm install @ionic/pwa-elements

import { defineCustomElements } from '@ionic/pwa-elements/loader';

defineCustomElements(window);

Usage

import { ActionSheet, ActionSheetButtonStyle } from '@capacitor/action-sheet';

const result = await ActionSheet.showActions({
  title: 'Photo Options',
  message: 'Select an option to perform',
  options: [
    { title: 'Upload' },
    { title: 'Share' },
    { title: 'Remove', style: ActionSheetButtonStyle.Destructive },
  ],
});
console.log('Action index:', result.index);

Notes

• ActionSheetButtonStyle (Default, Destructive, Cancel) is iOS-only.
• message property is iOS-only.
• icon property is Web-only (Ionicons).

App Launcher

Check if an app can be opened and open it via URL schemes or package names.

Platforms: Android, iOS

Installation

npm install @capacitor/app-launcher
npx cap sync

Configuration

iOS

Declare target app URL schemes in ios/App/App/Info.plist via LSApplicationQueriesSchemes:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>com.example.app</string>
</array>

Android

Android 11+ requires declaring target apps in android/app/src/main/AndroidManifest.xml within a <queries> tag:

<queries>
  <package android:name="com.example.app" />
</queries>

Usage

import { AppLauncher } from '@capacitor/app-launcher';

const { value } = await AppLauncher.canOpenUrl({ url: 'com.example.app' });
const { completed } = await AppLauncher.openUrl({ url: 'com.example.app://page' });

App

Handles high-level app state and events including foreground/background transitions, deep links, and back button handling.

Platforms: Android, iOS, Web (partial)

Installation

npm install @capacitor/app
npx cap sync

Configuration

iOS

Add custom URL schemes in ios/App/App/Info.plist via CFBundleURLTypes.

Android

Add custom URL schemes via intent-filter in android/app/src/main/AndroidManifest.xml with scheme in android/app/src/main/res/values/strings.xml.

Config option disableBackButtonHandler (boolean, default: false, Android only) in capacitor.config.ts.

Usage

import { App } from '@capacitor/app';

const appStateHandle = await App.addListener('appStateChange', ({ isActive }) => {
  console.log('App state:', isActive);
});

const appUrlHandle = await App.addListener('appUrlOpen', (data) => {
  console.log('Deep link:', data.url);
});

const info = await App.getInfo();
const launch = await App.getLaunchUrl();
const url = launch?.url;

// Cleanup when the screen or component is torn down.
await appStateHandle.remove();
await appUrlHandle.remove();

Notes

• exitApp(), minimizeApp() are Android-only.
• backButton and appRestoredResult events are Android-only.

Background Runner

Event-based standalone JavaScript environment for executing code outside the webview.

Platforms: Android, iOS

Installation

npm install @capacitor/background-runner
npx cap sync

Configuration

Capacitor Config

{
  "plugins": {
    "BackgroundRunner": {
      "label": "com.example.background.task",
      "src": "runners/background.js",
      "event": "myCustomEvent",
      "repeat": true,
      "interval": 15,
      "autoStart": true
    }
  }
}

iOS

• Enable Background Modes capability: "Background fetch" and "Background processing".
• Add BGTaskSchedulerPermittedIdentifiers to ios/App/App/Info.plist.
• In ios/App/App/AppDelegate.swift, import CapacitorBackgroundRunner.
• Call BackgroundRunnerPlugin.handleApplicationDidFinishLaunching(launchOptions: launchOptions) inside application(_:didFinishLaunchingWithOptions:).
• Register the task with BackgroundRunnerPlugin.registerBackgroundTask().

Android

• Geolocation: ACCESS_COARSE_LOCATION and ACCESS_FINE_LOCATION permissions in android/app/src/main/AndroidManifest.xml.
• Android 13+: call checkPermissions() / requestPermissions() for notifications.
• Android 12+: SCHEDULE_EXACT_ALARM permission.

Usage

import { BackgroundRunner } from '@capacitor/background-runner';

await BackgroundRunner.dispatchEvent({
  label: 'com.example.background.task',
  event: 'myCustomEvent',
  details: {},
});

Notes

• iOS: ~30 second runtime per invocation.
• Android: 10-minute max runtime, 15-minute minimum repeat interval.
• Runner context destroyed after resolve/reject. No state persistence between events.

Barcode Scanner

Barcode/QR scanning using OutSystems barcode libraries.

Platforms: Android, iOS

Installation

npm install @capacitor/barcode-scanner
npx cap sync

Configuration

Android

Minimum SDK 26. Two scanning libraries: ZXING (all formats) or MLKIT.

iOS

Add to ios/App/App/Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera access is required to scan barcodes.</string>

Usage

import {
  CapacitorBarcodeScanner,
  CapacitorBarcodeScannerCameraDirection,
  CapacitorBarcodeScannerTypeHint,
} from '@capacitor/barcode-scanner';

const result = await CapacitorBarcodeScanner.scanBarcode({
  hint: CapacitorBarcodeScannerTypeHint.QR_CODE,
  cameraDirection: CapacitorBarcodeScannerCameraDirection.BACK,
});
console.log(result.ScanResult);

Notes

• Supported formats: QR_CODE, AZTEC, CODABAR, CODE_39, CODE_93, CODE_128, DATA_MATRIX, EAN_13, EAN_8, ITF, PDF_417, UPC_A, UPC_E, and more.
• MAXICODE and UPC_EAN_EXTENSION unsupported on iOS.

Browser

Opens an in-app browser. Uses SFSafariViewController on iOS (OAuth-compliant).

Platforms: Android, iOS, Web (partial)

Installation

npm install @capacitor/browser
npx cap sync

Configuration

Android

Set androidxBrowserVersion in variables.gradle (default: 1.9.0).

Usage

import { Browser } from '@capacitor/browser';

await Browser.open({ url: 'https://capacitorjs.com/', toolbarColor: '#ffffff' });

Browser.addListener('browserFinished', () => {
  console.log('Browser closed');
});

Notes

• presentationStyle (fullscreen/popover) is iOS-only.
• windowName is Web-only.

Camera

Photo capture and gallery selection.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/camera
npx cap sync

Configuration

iOS

Add to ios/App/App/Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera access is required to take photos.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Photo library access is required to save photos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Photo library access is required to select photos.</string>

Android

Uses Android Photo Picker (API 30+) with automatic fallback. Storage permissions only needed with saveToGallery: true.

Web

Requires PWA Elements (@ionic/pwa-elements).

Usage

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

const photo = await Camera.getPhoto({
  quality: 90,
  allowEditing: true,
  resultType: CameraResultType.Uri,
  source: CameraSource.Prompt,
});
const imageUrl = photo.webPath;

Notes

• CameraResultType: Uri, Base64, DataUrl.
• CameraSource: Prompt, Camera, Photos.
• Also supports pickImages() and pickLimitedLibraryPhotos().

Clipboard

System clipboard API for copy/paste operations.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/clipboard
npx cap sync

Usage

import { Clipboard } from '@capacitor/clipboard';

await Clipboard.write({ string: 'Hello World' });
const { value, type } = await Clipboard.read();

Notes

• write() accepts string, image (data URL), url, or label (Android only).

Cookies

Native cookie management by patching document.cookie to use native libraries.

Platforms: Android, iOS, Web

Installation

Bundled with @capacitor/core. No separate install needed.

Configuration

Enable in capacitor.config.ts (or .json):

{
  "plugins": {
    "CapacitorCookies": {
      "enabled": true
    }
  }
}

iOS

iOS 14+ third-party cookies require domain whitelisting via WKAppBoundDomains in ios/App/App/Info.plist (up to 10 domains).

Usage

import { CapacitorCookies } from '@capacitor/core';

await CapacitorCookies.setCookie({
  url: 'https://example.com',
  key: 'token',
  value: 'abc123',
});
const cookies = await CapacitorCookies.getCookies({ url: 'https://example.com' });
await CapacitorCookies.deleteCookie({ url: 'https://example.com', key: 'token' });
await CapacitorCookies.clearAllCookies();

Device

Exposes internal device information (model, OS version, unique IDs).

Platforms: Android, iOS, Web

Installation

npm install @capacitor/device
npx cap sync

Usage

import { Device } from '@capacitor/device';

const info = await Device.getInfo();
const id = await Device.getId();
const battery = await Device.getBatteryInfo();
const { value } = await Device.getLanguageCode();

Notes

• getId() returns UUID on iOS, 64-bit hex on Android 8+, random on web with localStorage.
• getBatteryInfo() returns batteryLevel (0-1) and isCharging.

Dialog

Triggers native dialog windows for alerts, confirmations, and prompts.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/dialog
npx cap sync

Usage

import { Dialog } from '@capacitor/dialog';

await Dialog.alert({ title: 'Error', message: 'Something went wrong' });

const { value } = await Dialog.confirm({ title: 'Confirm', message: 'Are you sure?' });

const { value: name, cancelled } = await Dialog.prompt({
  title: 'Name',
  message: 'Enter your name',
  inputPlaceholder: 'John Doe',
});

File Transfer

File upload and download with progress tracking.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/file-transfer
npx cap sync

Usage

import { FileTransfer } from '@capacitor/file-transfer';

const result = await FileTransfer.downloadFile({
  url: 'https://example.com/file.pdf',
  path: 'file:///data/user/0/com.example/files/file.pdf',
  progress: true,
});

await FileTransfer.uploadFile({
  url: 'https://example.com/upload',
  path: 'file:///data/user/0/com.example/files/photo.jpg',
  method: 'POST',
  progress: true,
});

FileTransfer.addListener('progress', (event) => {
  console.log(`${event.bytes} / ${event.contentLength}`);
});

Notes

• Common options: url, path, method, headers, params, readTimeout/connectTimeout (default 60s), progress, disableRedirects.
• Upload-specific: chunkedMode, mimeType, fileKey.

File Viewer

Open files and preview media on mobile devices.

Platforms: Android, iOS (no Web)

Installation

npm install @capacitor/file-viewer
npx cap sync

Usage

import { FileViewer } from '@capacitor/file-viewer';

await FileViewer.openDocumentFromLocalPath({ path: 'path/to/file.pdf' });
await FileViewer.openDocumentFromUrl({ url: 'https://example.com/document.pdf' });
await FileViewer.previewMediaContentFromUrl({ url: 'https://example.com/video.mp4' });

Notes

• Media preview methods (previewMediaContentFromUrl, etc.) are iOS-only. On Android, they fall back to standard document opening.
• No Web support.

Filesystem

Node.js-like API for device file operations (read, write, delete, manage files and directories).

Platforms: Android, iOS, Web

Installation

npm install @capacitor/filesystem
npx cap sync

Configuration

iOS

Add to ios/App/PrivacyInfo.xcprivacy inside NSPrivacyAccessedAPITypes:

<dict>
  <key>NSPrivacyAccessedAPIType</key>
  <string>NSPrivacyAccessedAPICategoryFileTimestamp</string>
  <key>NSPrivacyAccessedAPITypeReasons</key>
  <array>
    <string>C617.1</string>
  </array>
</dict>

Add to ios/App/App/Info.plist:

<key>UIFileSharingEnabled</key>
<true/>
<key>LSSupportsOpeningDocumentsInPlace</key>
<true/>

Android

READ_EXTERNAL_STORAGE and WRITE_EXTERNAL_STORAGE permissions for Directory.Documents or Directory.ExternalStorage on Android 10 and older. Large files may need android:largeHeap="true" in android/app/src/main/AndroidManifest.xml.

Usage

import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';

await Filesystem.mkdir({
  path: 'secrets',
  directory: Directory.Documents,
  recursive: true,
});

await Filesystem.writeFile({
  path: 'secrets/text.txt',
  data: 'Hello',
  directory: Directory.Documents,
  encoding: Encoding.UTF8,
});

const contents = await Filesystem.readFile({
  path: 'secrets/text.txt',
  directory: Directory.Documents,
  encoding: Encoding.UTF8,
});

const files = await Filesystem.readdir({
  path: '',
  directory: Directory.Documents,
});

Notes

• Available directories: Documents, Data, Library, Cache, External, ExternalStorage, ExternalCache, LibraryNoCloud, Temporary.
• downloadFile() is deprecated; use @capacitor/file-transfer instead.

Geolocation

GPS position tracking with altitude, heading, and speed data.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/geolocation
npx cap sync

Configuration

iOS

Add to ios/App/App/Info.plist:

<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Location access is required.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Location access is required.</string>

Android

Add to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-feature android:name="android.hardware.location.gps" />

Usage

import { Geolocation } from '@capacitor/geolocation';

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

const watchId = await Geolocation.watchPosition(
  { enableHighAccuracy: true },
  (position) => {
    console.log(position.coords);
  },
);

Geolocation.clearWatch({ id: watchId });

Google Maps

Integrates Google Maps SDK into Capacitor applications.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/google-maps
npx cap sync

Configuration

iOS

Add skipLibCheck: true to tsconfig.json. Add NSLocationWhenInUseUsageDescription to ios/App/App/Info.plist for current location.

Android

Add API key to android/app/src/main/AndroidManifest.xml:

<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY_HERE"/>

Add location permissions if using current location:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Web

Requires API key with billing enabled from Google Cloud Console.

Usage

import { GoogleMap } from '@capacitor/google-maps';

const mapElement = document.querySelector<HTMLElement>('#map');
if (!mapElement) throw new Error('Map element not found');

const map = await GoogleMap.create({
  id: 'my-map',
  element: mapElement,
  apiKey: 'YOUR_API_KEY',
  config: { center: { lat: 33.6, lng: -117.9 }, zoom: 8 },
});

const markerId = await map.addMarker({
  coordinate: { lat: 33.6, lng: -117.9 },
  title: 'My Location',
});

Notes

• Map renders beneath the entire webview on Android; ensure transparency through all layers.
• Custom marker icons support PNG/JPG only (no SVG on native).
• Requires <capacitor-google-map> custom web component with explicit CSS sizing.
• Framework-specific setup needed for Angular/React/Vue.

Haptics

Physical feedback through touch or vibration.

Platforms: Android, iOS

Installation

npm install @capacitor/haptics
npx cap sync

Usage

import { Haptics, ImpactStyle, NotificationType } from '@capacitor/haptics';

await Haptics.impact({ style: ImpactStyle.Heavy });
await Haptics.notification({ type: NotificationType.Success });
await Haptics.vibrate({ duration: 500 });
await Haptics.selectionStart();
await Haptics.selectionChanged();
await Haptics.selectionEnd();

Notes

• ImpactStyle: Heavy, Medium, Light.
• NotificationType: Success, Warning, Error.
• Devices without Taptic Engine or Vibrator execute calls silently.

Http

Native HTTP support by patching fetch and XMLHttpRequest to use native libraries.

Platforms: Android, iOS, Web

Installation

Bundled with @capacitor/core. No separate install needed.

Configuration

Enable in capacitor.config.ts (or .json):

{
  "plugins": {
    "CapacitorHttp": {
      "enabled": true
    }
  }
}

Usage

import { CapacitorHttp } from '@capacitor/core';

const response = await CapacitorHttp.get({
  url: 'https://api.example.com/data',
  headers: { Authorization: 'Bearer token' },
});

const postResponse = await CapacitorHttp.post({
  url: 'https://api.example.com/data',
  data: { key: 'value' },
});

Notes

• Methods: request(), get(), post(), put(), patch(), delete().
• Data can only be string or JSON on Android/iOS. For large files use @capacitor/file-transfer.

InAppBrowser

Opens URLs in WebView, in-app system browser, or external browser.

Platforms: Android (minimum SDK 26), iOS

Installation

npm install @capacitor/inappbrowser
npx cap sync

Usage

import { InAppBrowser } from '@capacitor/inappbrowser';

await InAppBrowser.openInWebView({ url: 'https://example.com' });
await InAppBrowser.openInSystemBrowser({ url: 'https://example.com' });
await InAppBrowser.openInExternalBrowser({ url: 'https://example.com' });
await InAppBrowser.close();

InAppBrowser.addListener('browserClosed', () => {});
InAppBrowser.addListener('browserPageLoaded', () => {});

Notes

• WebView supports toolbar positioning, navigation buttons, cache management, user agent, zoom.
• Events: browserClosed, browserPageLoaded, browserPageNavigationCompleted.

Keyboard

Keyboard display/visibility control and event tracking.

Platforms: Android, iOS

Installation

npm install @capacitor/keyboard
npx cap sync

Configuration

Config options in capacitor.config.ts:

• resize: Controls app resizing when keyboard appears (default: native). Values: body, ionic, native, none.
• style: Override keyboard styling (Dark/Light/Default).
• resizeOnFullScreen: Android workaround for full-screen keyboard resizing.

Usage

import { Keyboard } from '@capacitor/keyboard';

Keyboard.addListener('keyboardWillShow', (info) => {
  console.log('Keyboard height:', info.keyboardHeight);
});
Keyboard.addListener('keyboardDidHide', () => {
  console.log('Keyboard hidden');
});

await Keyboard.hide();
await Keyboard.setAccessoryBarVisible({ isVisible: false });

Notes

• show() is Android-only.
• setAccessoryBarVisible() is iPhone-only.
• setScroll(), setStyle(), setResizeMode(), getResizeMode() are iOS-only.

Local Notifications

Schedule device notifications locally without server-based push.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/local-notifications
npx cap sync

Configuration

Android

• Android 13+: checkPermissions() / requestPermissions() required.
• Android 12+: SCHEDULE_EXACT_ALARM permission in android/app/src/main/AndroidManifest.xml.
• Android 14+: USE_EXACT_ALARM is auto-granted only for limited app categories and is subject to Google Play policy review. For most apps, prefer SCHEDULE_EXACT_ALARM, check exact-alarm access at runtime, and fall back to inexact scheduling when exact alarms are unavailable.
• Config options: smallIcon (drawable resource), iconColor, sound in capacitor.config.ts.

Usage

import { LocalNotifications } from '@capacitor/local-notifications';

const permission = await LocalNotifications.checkPermissions();
if (permission.display !== 'granted') {
  const request = await LocalNotifications.requestPermissions();
  if (request.display !== 'granted') {
    throw new Error('Local notification permission denied');
  }
}

await LocalNotifications.schedule({
  notifications: [
    {
      title: 'Reminder',
      body: 'Time to check in!',
      id: 1,
      schedule: { at: new Date(Date.now() + 1000 * 60) },
    },
  ],
});

LocalNotifications.addListener('localNotificationActionPerformed', (notification) => {
  console.log('Action:', notification.actionId);
});

Notes

• Exact alarms during Doze fire max once per 9 min/app.
• Channel config on Android 8+ affects sound and cannot change post-install.
• Supports createChannel(), deleteChannel(), listChannels().

Motion

Tracks accelerometer and device orientation (compass heading, etc.).

Platforms: Android, iOS, Web

Installation

npm install @capacitor/motion
npx cap sync

Usage

import { Motion } from '@capacitor/motion';

Motion.addListener('accel', (event) => {
  console.log('Acceleration:', event.acceleration);
  console.log('Rotation:', event.rotationRate);
});

Motion.addListener('orientation', (event) => {
  console.log('Orientation:', event.alpha, event.beta, event.gamma);
});

Notes

• Requires user permission before accessing motion data.
• Must request on user-initiated action (button click) via DeviceMotionEvent API on web.

Network

Network and connectivity information.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/network
npx cap sync

Usage

import { Network } from '@capacitor/network';

const status = await Network.getStatus();
console.log('Connected:', status.connected, 'Type:', status.connectionType);

const handle = await Network.addListener('networkStatusChange', (status) => {
  console.log('Network changed:', status.connectionType);
});

// Cleanup when the listener is no longer needed.
await handle.remove();

Notes

• connected: boolean connectivity flag. It is usually false when connectionType is 'none', true for 'wifi' or 'cellular', and should be treated as undetermined when the type is 'unknown'.
• connectionType: 'wifi' | 'cellular' | 'none' | 'unknown'.

Preferences

Key/value storage for lightweight persistent data. Not a database replacement.

Platforms: Android (SharedPreferences), iOS (UserDefaults), Web (localStorage)

Installation

npm install @capacitor/preferences
npx cap sync

Configuration

iOS

Add to ios/App/PrivacyInfo.xcprivacy inside NSPrivacyAccessedAPITypes:

<dict>
  <key>NSPrivacyAccessedAPIType</key>
  <string>NSPrivacyAccessedAPICategoryUserDefaults</string>
  <key>NSPrivacyAccessedAPITypeReasons</key>
  <array>
    <string>CA92.1</string>
  </array>
</dict>

Usage

import { Preferences } from '@capacitor/preferences';

await Preferences.set({ key: 'name', value: JSON.stringify({ first: 'John' }) });
const { value } = await Preferences.get({ key: 'name' });
await Preferences.remove({ key: 'name' });
await Preferences.clear();
const { keys } = await Preferences.keys();

Notes

• Only supports string values; use JSON serialization for complex types.

Privacy Screen

Prevents sensitive app information from appearing in app switchers/recent apps.

Platforms: Android, iOS (no Web)

Installation

npm install @capacitor/privacy-screen
npx cap sync

Usage

import { PrivacyScreen } from '@capacitor/privacy-screen';

await PrivacyScreen.enable({
  android: { preventScreenshots: true, privacyModeOnActivityHidden: 'dim' },
  ios: { blurEffect: 'dark' },
});

const { enabled } = await PrivacyScreen.isEnabled();
await PrivacyScreen.disable();

Notes

• Android options: dimBackground (boolean), preventScreenshots (boolean), privacyModeOnActivityHidden ('none'|'dim'|'splash').
• iOS options: blurEffect ('none'|'light'|'dark').

Push Notifications

Native push notifications via FCM (Android) and APNs (iOS).

Platforms: Android, iOS

Installation

npm install @capacitor/push-notifications
npx cap sync

Configuration

iOS

Enable Push Notifications capability in Xcode. Add two delegate methods to ios/App/App/AppDelegate.swift for registration callbacks.

Android

• Add google-services.json to android/app/.
• Android 13+: checkPermissions() / requestPermissions().
• Set firebaseMessagingVersion in variables.gradle (default: 25.0.1).
• Notification icon in android/app/src/main/AndroidManifest.xml (white on transparent):

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/push_icon_name" />

Capacitor Config

{
  "plugins": {
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"]
    }
  }
}

Usage

import { PushNotifications } from '@capacitor/push-notifications';

let permStatus = await PushNotifications.checkPermissions();
if (permStatus.receive === 'prompt') {
  permStatus = await PushNotifications.requestPermissions();
}

if (permStatus.receive !== 'granted') {
  console.warn('Push notification permission not granted');
} else {
  await PushNotifications.register();
}

PushNotifications.addListener('registration', (token) => {
  console.log('FCM/APNs token:', token.value);
});

PushNotifications.addListener('registrationError', (error) => {
  console.error('Registration failed:', error);
});

PushNotifications.addListener('pushNotificationReceived', (notification) => {
  console.log('Received:', notification.title, notification.body);
});

PushNotifications.addListener('pushNotificationActionPerformed', (action) => {
  console.log('Action:', action.actionId);
});

Notes

• iOS does not support silent/background push via this plugin.
• Android won't trigger callbacks for data-only notifications if app is killed.

Screen Orientation

Screen orientation information and locking.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/screen-orientation
npx cap sync

Usage

import { ScreenOrientation } from '@capacitor/screen-orientation';

const { type } = await ScreenOrientation.orientation();
await ScreenOrientation.lock({ orientation: 'portrait' });
await ScreenOrientation.unlock();

ScreenOrientation.addListener('screenOrientationChange', (result) => {
  console.log('Orientation:', result.type);
});

Notes

• OrientationLockType: 'any', 'natural', 'landscape', 'portrait', 'portrait-primary', 'portrait-secondary', 'landscape-primary', 'landscape-secondary'.
• iPad: requires UIRequiresFullScreen = true in ios/App/App/Info.plist.
• Android 16+ (targetSdk 36): lock() has no effect on large screens.

Screen Reader

Access TalkBack/VoiceOver and text-to-speech for accessibility.

Platforms: Android, iOS, Web (partial)

Installation

npm install @capacitor/screen-reader
npx cap sync

Usage

import { ScreenReader } from '@capacitor/screen-reader';

// Native only: iOS and Android.
const { value } = await ScreenReader.isEnabled();
console.log('Screen reader active:', value);

// `language` is Android-only.
await ScreenReader.speak({ value: 'Hello World', language: 'en' });

const handle = await ScreenReader.addListener('stateChange', ({ value }) => {
  console.log('Screen reader active:', value);
});

await handle.remove();

Notes

• isEnabled() not available on Web.
• speak() and addListener() are also native-only.
• language parameter (ISO 639-1) is Android-only.

Share

Share content through the system share sheet.

Platforms: Android, iOS, Web (via Web Share API)

Installation

npm install @capacitor/share
npx cap sync

Usage

import { Share } from '@capacitor/share';

await Share.share({
  title: 'Check this out',
  text: 'Really cool thing I found',
  url: 'https://example.com/',
  dialogTitle: 'Share with friends',
});

await Share.share({ files: ['file:///path/to/image.png'] });

const { value } = await Share.canShare();

Notes

• files sharing is iOS/Android only.
• dialogTitle is Android-only.
• Android: Only cache folder files shareable by default. For additional folders, configure android/app/src/main/res/xml/file_paths.xml.

Splash Screen

Control the display and hiding of the splash screen.

Platforms: Android, iOS

Installation

npm install @capacitor/splash-screen
npx cap sync

Configuration

In capacitor.config.ts (or .json):

{
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 500,
      "launchAutoHide": true,
      "backgroundColor": "#ffffff",
      "showSpinner": false,
      "androidScaleType": "CENTER_CROP",
      "splashFullScreen": false,
      "splashImmersive": false
    }
  }
}

Usage

import { SplashScreen } from '@capacitor/splash-screen';

await SplashScreen.show({ autoHide: false, fadeInDuration: 300, fadeOutDuration: 300 });
await SplashScreen.hide({ fadeOutDuration: 500 });

Notes

• Android 12+ uses native Splash Screen API. Compatibility library can be disabled by modifying AppTheme.NoActionBarLaunch parent theme in android/app/src/main/res/values/styles.xml.
• Additional config: spinnerColor, layoutName (custom Android layout), useDialog.

Status Bar

Configure style, visibility, and background color of the Status Bar.

Platforms: Android, iOS

Installation

npm install @capacitor/status-bar
npx cap sync

Configuration

iOS

Set UIViewControllerBasedStatusBarAppearance to YES in ios/App/App/Info.plist.

Usage

import { StatusBar, Style } from '@capacitor/status-bar';

await StatusBar.setStyle({ style: Style.Dark });
await StatusBar.setBackgroundColor({ color: '#ffffff' });
await StatusBar.hide({ animation: Animation.Fade });
await StatusBar.show();
await StatusBar.setOverlaysWebView({ overlay: true });
const info = await StatusBar.getInfo();

Notes

• Android 16+ breaking change: overlaysWebView and backgroundColor no longer function due to enforced edge-to-edge behavior.
• Animation parameter is iOS-only.

System Bars

Modern edge-to-edge API for configuring system bars (status bar + navigation bar). Replaces Status Bar plugin for new apps.

Platforms: Android, iOS

Installation

Bundled with @capacitor/core. No separate install needed.

Configuration

iOS

Set UIViewControllerBasedStatusBarAppearance to YES in ios/App/App/Info.plist.

Android

Injects --safe-area-inset-x CSS variables as fallback for older Android WebView versions (<140).

Usage

import { SystemBars, SystemBarsStyle, SystemBarType } from '@capacitor/core';

await SystemBars.setStyle({ style: SystemBarsStyle.Dark });
await SystemBars.hide({ types: [SystemBarType.StatusBar] });
await SystemBars.show({ types: [SystemBarType.NavigationBar] });
await SystemBars.setAnimation({ animation: 'FADE' });

Notes

• setAnimation() is iOS-only (values: 'FADE', 'NONE').
• Config options: insetsHandling (Android), style, hidden, animation (iOS).

Text Zoom

Change WebView text size for visual accessibility.

Platforms: Android, iOS

Installation

npm install @capacitor/text-zoom
npx cap sync

Usage

import { TextZoom } from '@capacitor/text-zoom';

const { value: currentZoom } = await TextZoom.get();
const { value: preferred } = await TextZoom.getPreferred();
await TextZoom.set({ value: 1.5 });

Notes

• Values are decimals (1.0 = 100%, 1.5 = 150%).
• iPad: Requires preferredContentMode set to mobile in Capacitor config.

Toast

Display a notification popup.

Platforms: Android, iOS, Web

Installation

npm install @capacitor/toast
npx cap sync

Usage

import { Toast } from '@capacitor/toast';

await Toast.show({
  text: 'Hello!',
  duration: 'short',
  position: 'bottom',
});

Notes

• duration: 'short' (2000ms) or 'long' (3500ms).
• position: 'top', 'center', 'bottom'.
• Android 12+: All toasts display at the bottom regardless of position setting.
• Web requires PWA Elements (@ionic/pwa-elements).

Watch

Build watch interfaces in web code for display on paired Apple Watch devices. Experimental (CapacitorLABS).

Platforms: iOS only

Installation

npm install @capacitor/watch
npx cap sync

Configuration

iOS

1. Add Background Modes capability: "Background Fetch", "Remote Notifications", "Background Processing". 2. Add Push Notification capability. 3. Modify ios/App/App/AppDelegate.swift: import WatchConnectivity and CapacitorWatch, activate WCSession. 4. Create watchOS app target with bundle ID [app-bundle-id].watchapp. 5. Configure watch app main file with WCSession and CapWatchContentView(). 6. Add Background Modes to watch target: "Remote Notifications".

Usage

import { Watch } from '@capacitor/watch';

await Watch.updateWatchUI({
  watchUI: 'Text("Hello $name")\nButton("Tap Me", "tapCommand")',
});
await Watch.updateWatchData({ data: { name: 'World' } });

Watch.addListener('runCommand', (command) => {
  console.log('Watch command:', command);
});

Notes

• Simulators do not support app-to-watch communication; physical devices required for testing.
• UI format: String-based with Text() and Button() components. Variables use $variableName syntax.

Capgo Plugin Catalog

Complete catalog of canonical Capgo Capacitor plugin packages from Capgo plugin package metadata. Excludes example apps, templates, security advisory worktrees, issue worktrees, and PR worktrees.

Use exact package names when recommending installation:

npm install <exact-package-name>
npx cap sync

Total packages: 139