Mobile Plugins - Strata Game Library

Strata provides mobile plugins for both React Native and Capacitor, enabling cross-platform input handling, device detection, and haptic feedback for mobile games.

Available Plugins

Plugin	Platform	Use Case
strata-game-library/react-native	React Native	Native mobile apps
strata-game-library/capacitor	Capacitor	Hybrid web/mobile apps

Features

Both plugins provide:

🎮 Device Detection - Identify device type, platform, and capabilities
👆 Unified Input - Abstract touch, keyboard, and gamepad into one API
📳 Haptic Feedback - Cross-platform vibration with intensity control
📱 Safe Area Insets - Native safe area detection for notches
🔄 Screen Orientation - Get and set orientation
⚡ Performance Mode - Detect low power mode

Quick Comparison

Feature	React Native	Capacitor
iOS Support	✅ Native	✅ Native
Android Support	✅ Native	✅ Native
Web Support	❌	✅
Electron Support	❌	✅
React Hooks	✅	✅
Bundle Size	Larger	Smaller
Native Performance	Best	Good

Choosing a Plugin

Use React Native Plugin if

Building a pure React Native app
Need maximum native performance
Using react-native-three or expo-three

Use Capacitor Plugin if

Building a web-first app
Want to deploy to web, iOS, Android, and desktop
Using standard React Three Fiber on web

Quick Start

React Native

npm install strata-game-library/react-native
cd ios && pod install

import { useDevice, useInput, useHaptics } from 'strata-game-library/react-native';

function Game() {
  const device = useDevice();
  const input = useInput();
  const { trigger } = useHaptics();

  return <Canvas>{/* Your R3F scene */}</Canvas>;
}

Capacitor

pnpm install strata-game-library/capacitor
npx cap sync

import { DeviceProvider, useDevice, useInput } from 'strata-game-library/capacitor';

function App() {
  return (
    <DeviceProvider>
      <Game />
    </DeviceProvider>
  );
}

Common API

Both plugins share the same core API:

Device Profile

interface DeviceProfile {
  platform: 'ios' | 'android' | 'web' | 'windows' | 'macos' | 'linux';
  deviceType: 'mobile' | 'tablet' | 'foldable' | 'desktop';
  inputMode: 'touch' | 'keyboard' | 'gamepad' | 'hybrid';
  orientation: 'portrait' | 'landscape';
  hasTouch: boolean;
  hasPointer: boolean;
  hasGamepad: boolean;
  screenWidth: number;
  screenHeight: number;
  pixelRatio: number;
  safeAreaInsets: {
    top: number;
    right: number;
    bottom: number;
    left: number;
  };
}

Input Snapshot

interface InputSnapshot {
  timestamp: number;
  leftStick: { x: number; y: number };
  rightStick: { x: number; y: number };
  buttons: Record<string, boolean>;
  triggers: { left: number; right: number };
  connectedGamepads?: Array<number | { index: number; id: string }>;
  touches: Array<{
    id: number;
    position: { x: number; y: number };
    phase: 'began' | 'moved' | 'ended' | 'cancelled';
  }>;
}

Haptics Options

interface HapticsOptions {
  intensity: 'light' | 'medium' | 'heavy';
  customIntensity?: number;
  duration?: number;
  pattern?: number[];
}

React Native Plugin - Full React Native docs
Capacitor Plugin - Full Capacitor docs