Home
Adapters and plugins

React Native Plugin

Cross-platform input, device detection, and haptics for React Native games

The strata-game-library/react-native provides native mobile capabilities for React Native games built with Strata.

Installation

npm install strata-game-library/react-native

iOS Setup

cd ios && pod install

Android Setup

Automatically linked via autolinking.

Features

  • Device Detection - Identify device type, platform, and performance capabilities
  • Input Handling - Unified touch input with StrataInputProvider
  • Gamepad Support - iOS GameController/MFi and Android InputDevice controller detection plus native input snapshots
  • Haptic Feedback - iOS Taptic Engine, Android Vibrator
  • Safe Area Insets - Native detection for notches
  • Orientation - Get and lock screen orientation
  • Performance Mode - Detect low power mode

Hooks

useDevice()

Returns the current device profile:

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

function Game() {
  const device = useDevice();

  // Adapt UI based on device
  if (device.deviceType === 'tablet') {
    return <TabletLayout />;
  }

  // Check safe areas for notch
  const style = {
    paddingTop: device.safeAreaInsets.top,
    paddingBottom: device.safeAreaInsets.bottom,
  };

  return <View style={style}>{/* Game content */}</View>;
}

useInput()

Returns the current input state. Touches come from StrataInputProvider; native controller snapshots are polled when the installed native module exposes getInputSnapshot():

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

function Game() {
  const input = useInput();

  // Use joystick values for movement
  const moveX = input.leftStick.x;
  const moveY = input.leftStick.y;

  // Check button presses
  if (input.buttons.a) {
    player.jump();
  }

  return <GameCanvas movement={[moveX, moveY]} />;
}

// Wrap with provider
function App() {
  return (
    <StrataInputProvider>
      <Game />
    </StrataInputProvider>
  );
}

useHaptics()

Returns haptic feedback controls:

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

function Game() {
  const { trigger } = useHaptics();

  const handleCollision = async () => {
    await trigger({ intensity: 'medium' });
  };

  const handleExplosion = async () => {
    await trigger({
      intensity: 'heavy',
      duration: 200,
    });
  };

  const handlePattern = async () => {
    await trigger({
      duration: 100,
    });
  };

  return <GameCanvas onCollision={handleCollision} />;
}

useControlHints()

Returns localized control hints based on input mode:

import { useControlHints } from 'strata-game-library/react-native';

function ControlsOverlay() {
  const hints = useControlHints();

  return (
    <View>
      <Text>{hints.movement}</Text>   {/* "Drag to move" or "WASD to move" */}
      <Text>{hints.action}</Text>     {/* "Tap to jump" or "Space to jump" */}
      <Text>{hints.camera}</Text>     {/* "Swipe to look" or "Mouse to look" */}
    </View>
  );
}

Components

<StrataInputProvider>

Wraps your app to capture and process input events:

import { StrataInputProvider } from 'strata-game-library/react-native';

function App() {
  return (
    <StrataInputProvider
      onInput={(snapshot) => {
        // Process raw input
        console.log(snapshot.touches);
      }}
    >
      <Game />
    </StrataInputProvider>
  );
}

Utilities

setOrientation()

Lock screen orientation:

import { setOrientation } from 'strata-game-library/react-native';

// Lock to landscape
await setOrientation('landscape');

// Lock to portrait
await setOrientation('portrait');

// Unlock
await setOrientation('default');

Performance Tier

Use useDevice().performanceMode to adapt graphics:

const { performanceMode } = useDevice();
const graphicsSettings = {
  low: { shadows: false, particles: 100 },
  medium: { shadows: true, particles: 500 },
  high: { shadows: true, particles: 2000 },
}[performanceMode];

Platform Support

FeatureiOSAndroid
Device Detection✅✅
Touch Input✅✅
Haptics (Light)✅ Taptic✅
Haptics (Heavy)✅ Taptic✅
Safe Area Insets✅✅
Orientation Lock✅✅
Gamepad Detection✅ GameController/MFi✅ InputDevice
Native Input Snapshot✅✅
Performance Detection✅✅
Low Power Mode✅✅

Performance Tips

  1. Use useMemo for input processing to avoid re-renders
  2. Debounce haptics to prevent rapid successive calls
  3. Use controller-aware hints from useControlHints() when useDevice() reports inputMode: 'gamepad'
  4. Use orientation lock to prevent layout shifts during gameplay
Built withSourcey
Edit this pageGitHubnpm