react-native-earl-gamepad 0.5.2 → 0.7.0

package/README.md

@@ -1,12 +1,23 @@
 # react-native-earl-gamepad
+
+![GitHub stars](https://img.shields.io/github/stars/Swif7ify/react-native-earl-gamepad?style=social)
 ![npm](https://img.shields.io/npm/v/react-native-earl-gamepad)
 ![downloads](https://img.shields.io/npm/dm/react-native-earl-gamepad)
 ![license](https://img.shields.io/npm/l/react-native-earl-gamepad)
 
-WebView-based gamepad bridge for React Native. Polls `navigator.getGamepads()` in a hidden WebView and surfaces buttons, sticks, d-pad, and connection events to JS.
+WebView-based gamepad bridge for React Native. Polls `navigator.getGamepads()` in a hidden WebView and surfaces buttons, sticks, d-pad, touchpad click, and connection events to JS.
+
 -   Components: `GamepadBridge`, `useGamepad`, and `GamepadDebug`.
--   Deadzone handling (default `0.15`) with auto-clear on disconnect.
--   Typed events for buttons, axes, d-pad, and status.
+-   Deadzone handling (default `0.15`) with auto-clear on disconnect and live state snapshots to avoid stuck buttons.
+-   Typed events for buttons, axes, d-pad, touchpad click, status, and a full-state snapshot.
+
+### Why this?
+
+Native gamepad support in React Native can be flaky or hard to maintain. Instead of relying on old native modules, it uses a hidden WebView to bridge the HTML5 Gamepad API (navigator.getGamepads()) directly to React Native. This ensures much better compatibility across iOS and Android since it relies on the web standard.
+
+### Controller Compatibility
+
+-   Tested with: PS4, and generic Bluetooth controllers. Supports standard mapping.
 
 ## Requirements
 
@@ -121,7 +132,12 @@ export function HUD() {
 
 ### Visual debugger
 
-Drop-in component to see a controller diagram that lights up buttons, shows stick offsets, and lists state.
+Drop-in component to see a controller diagram that lights up buttons, shows stick offsets, and lists state. Shows live metadata (name/vendor/product, mapping, axes/buttons count, vibration support) and includes vibration test buttons plus a loader prompt when no pad is connected.
+
+The State panel includes:
+
+-   Per-stick plots (left/right) with axis values, crosshairs, and a dashed trace from center to the current dot.
+-   Touchpad click indicator (PS touchpad click is mapped to `touchpad`; position is not exposed by the Gamepad API).
 
 ```tsx
 import { GamepadDebug } from "react-native-earl-gamepad";
@@ -131,9 +147,9 @@ export function DebugScreen() {
 }
 ```
 
-![Gamepad visual idle](https://github.com/user-attachments/assets/dfebd8c5-7d9a-42c7-802b-2773ec8c8ae9)
-
-![Gamepad visual pressed](https://github.com/user-attachments/assets/7b37d76a-7695-4be9-bda4-7e3d1e6adf41)
+![Gamepad visual idle](https://github.com/user-attachments/assets/ae29d0a9-ded5-4b2d-96f8-f432f99cb54c)
+![Gamepad visual pressed](https://github.com/user-attachments/assets/830323aa-0f6c-4ee4-a276-663a421b9697)
+![Gamepad Idle](https://github.com/user-attachments/assets/206fe108-8ec3-40cb-a64b-de058d07672f)
 
 ## API
 
@@ -145,6 +161,7 @@ export function DebugScreen() {
 -   `onAxis?: (event: AxisEvent) => void` — fired when an axis changes beyond threshold.
 -   `onDpad?: (event: DpadEvent) => void` — convenience mapping of button indices 12–15.
 -   `onStatus?: (event: StatusEvent) => void` — `connected` / `disconnected` events.
+-   `onState?: (event: StateEvent) => void` — full snapshot of pressed buttons, values, and axes each poll.
 -   `style?: StyleProp<ViewStyle>` — override container; default is a 1×1 transparent view.
 
 ### `useGamepad` options and return
@@ -162,6 +179,9 @@ Return shape:
 -   `buttonValues: Partial<Record<GamepadButtonName, number>>` — last analog value per button (useful for LT/RT triggers).
 -   `isPressed(key: GamepadButtonName): boolean` — helper to check a single button.
 -   `bridge: JSX.Element | null` — render once to enable polling.
+-   `info: GamepadInfo` — metadata for the first controller (id, vendor/product if exposed, mapping, counts, vibration support, timestamp, index).
+-   `vibrate(duration?: number, strength?: number): void` — fire a short rumble when `vibrationActuator` is available.
+-   `stopVibration(): void` — stop an in-flight vibration when supported.
 
 ### `GamepadDebug`
 
@@ -174,6 +194,8 @@ Return shape:
 -   `AxisEvent`: `{ type: 'axis'; axis: StickAxisName; index: number; value: number }`
 -   `DpadEvent`: `{ type: 'dpad'; key: 'up' | 'down' | 'left' | 'right'; pressed: boolean }`
 -   `StatusEvent`: `{ type: 'status'; state: 'connected' | 'disconnected' }`
+-   `InfoEvent`: controller metadata payload (name/vendor/product, mapping, counts, vibration capability, timestamp, index, etc.)
+-   `StateEvent`: `{ type: 'state'; pressed: GamepadButtonName[]; values: Record<GamepadButtonName, number>; axes: Record<StickAxisName, number> }`
 
 Button names map to the standard gamepad layout (`a`, `b`, `x`, `y`, `lb`, `rb`, `lt`, `rt`, `back`, `start`, `ls`, `rs`, `dpadUp`, `dpadDown`, `dpadLeft`, `dpadRight`, `home`). Unknown indices fall back to `button-N`. Axes map to `leftX`, `leftY`, `rightX`, `rightY` with fallbacks `axis-N`.
 
@@ -199,13 +221,13 @@ npm install
 npm run build
 ```
 
+Build outputs to `dist/` with type declarations.
+
 ## Troubleshooting
 
 -   **[Invariant Violation: Tried to register two views with the same name RNCWebView]**: Check your `package.json` for multiple instances of `react-native-webview` and uninstall any duplicates.
     When you install `react-native-earl-gamepad`, `react-native-webview` is already included, so you should not install it separately. or you can check it by running `npm ls react-native-webview`.
 
-Build outputs to `dist/` with type declarations.
-
 ## License
 
 MIT

package/dist/GamepadBridge.d.ts

@@ -1,5 +1,15 @@
 import { StyleProp, ViewStyle } from "react-native";
-import type { AxisEvent, ButtonEvent, DpadEvent, StatusEvent } from "./types";
+import type { AxisEvent, ButtonEvent, DpadEvent, InfoEvent, StateEvent, StatusEvent } from "./types";
+type VibrationRequest = {
+    type: "once";
+    duration: number;
+    strong: number;
+    weak: number;
+    nonce: number;
+} | {
+    type: "stop";
+    nonce: number;
+};
 type Props = {
     enabled?: boolean;
     axisThreshold?: number;
@@ -7,7 +17,10 @@ type Props = {
     onButton?: (event: ButtonEvent) => void;
     onAxis?: (event: AxisEvent) => void;
     onStatus?: (event: StatusEvent) => void;
+    onInfo?: (event: InfoEvent) => void;
+    onState?: (event: StateEvent) => void;
+    vibrationRequest?: VibrationRequest;
     style?: StyleProp<ViewStyle>;
 };
-export default function GamepadBridge({ enabled, axisThreshold, onDpad, onButton, onAxis, onStatus, style, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default function GamepadBridge({ enabled, axisThreshold, onDpad, onButton, onAxis, onStatus, onInfo, onState, vibrationRequest, style, }: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/GamepadBridge.js

@@ -16,18 +16,87 @@ const buildBridgeHtml = (axisThreshold) => `
 (function(){
   const deadzone = ${axisThreshold.toFixed(2)};
   const send = (data) => window.ReactNativeWebView.postMessage(JSON.stringify(data));
-  const buttonNames = ['a','b','x','y','lb','rb','lt','rt','back','start','ls','rs','dpadUp','dpadDown','dpadLeft','dpadRight','home'];
+  const buttonNames = ['a','b','x','y','lb','rb','lt','rt','back','start','ls','rs','dpadUp','dpadDown','dpadLeft','dpadRight','home','touchpad'];
   const axisNames = ['leftX','leftY','rightX','rightY'];
   let prevButtons = [];
   let prevAxes = [];
+  let prevInfoJson = '';
+
+  function parseVendorProduct(id){
+    const vendorMatch = /Vendor:\s?([0-9a-fA-F]+)/i.exec(id || '') || /VID_([0-9a-fA-F]+)/i.exec(id || '');
+    const productMatch = /Product:\s?([0-9a-fA-F]+)/i.exec(id || '') || /PID_([0-9a-fA-F]+)/i.exec(id || '');
+    return {
+      vendor: vendorMatch ? vendorMatch[1] : null,
+      product: productMatch ? productMatch[1] : null,
+    };
+  }
+
+  function sendInfo(gp){
+    const connected = !!gp;
+    const { vendor, product } = parseVendorProduct(gp?.id || '');
+    const info = {
+      type: 'info',
+      connected,
+      index: gp?.index ?? null,
+      id: gp?.id ?? null,
+      mapping: gp?.mapping ?? null,
+      timestamp: gp?.timestamp ?? null,
+      canVibrate: !!gp?.vibrationActuator,
+      vendor,
+      product,
+      axes: gp?.axes?.length ?? 0,
+      buttons: gp?.buttons?.length ?? 0,
+    };
+    const nextJson = JSON.stringify(info);
+    if (nextJson !== prevInfoJson) {
+      prevInfoJson = nextJson;
+      send(info);
+    }
+  }
+
+  function vibrateOnce(duration, strong, weak){
+    const pad = (navigator.getGamepads && navigator.getGamepads()[0]) || null;
+    if (!pad || !pad.vibrationActuator || !pad.vibrationActuator.playEffect) return;
+    try {
+      pad.vibrationActuator.playEffect('dual-rumble', {
+        duration: duration || 500,
+        strongMagnitude: strong ?? 1,
+        weakMagnitude: weak ?? 1,
+      }).catch(() => {});
+    } catch (err) {
+      // ignore
+    }
+  }
+
+  function stopVibration(){
+    const pad = (navigator.getGamepads && navigator.getGamepads()[0]) || null;
+    if (!pad || !pad.vibrationActuator) return;
+    if (typeof pad.vibrationActuator.reset === 'function') {
+      try { pad.vibrationActuator.reset(); } catch (err) {}
+    }
+  }
+
+  window.__earlVibrateOnce = vibrateOnce;
+  window.__earlStopVibration = stopVibration;
+
+  const nameForIndex = (index) => {
+    if (buttonNames[index]) return buttonNames[index];
+    if (index === 16) return 'home';
+    if (index === 17) return 'touchpad';
+    return 'button-' + index;
+  };
 
   function poll(){
     const pads = (navigator.getGamepads && navigator.getGamepads()) || [];
     const gp = pads[0];
+    sendInfo(gp);
     if (gp) {
+      const pressedNow = [];
+      const valueMap = {};
+      const axesState = {};
       // Buttons
       gp.buttons?.forEach((btn, index) => {
-        const name = buttonNames[index] || ('button-' + index);
+        const name = nameForIndex(index);
         const prevBtn = prevButtons[index] || { pressed:false, value:0 };
         const changed = prevBtn.pressed !== btn.pressed || Math.abs(prevBtn.value - btn.value) > 0.01;
         if (changed) {
@@ -38,6 +107,8 @@ const buildBridgeHtml = (axisThreshold) => `
           if (index === 14) send({ type:'dpad', key:'left', pressed: !!btn.pressed });
           if (index === 15) send({ type:'dpad', key:'right', pressed: !!btn.pressed });
         }
+        if (btn?.pressed) pressedNow.push(name);
+        valueMap[name] = btn?.value ?? 0;
         prevButtons[index] = { pressed: !!btn.pressed, value: btn.value ?? 0 };
       });
 
@@ -49,13 +120,18 @@ const buildBridgeHtml = (axisThreshold) => `
         if (Math.abs(prevVal - value) > 0.01) {
           send({ type:'axis', axis:name, index, value });
         }
+        axesState[name] = value;
         prevAxes[index] = value;
       });
+
+      send({ type:'state', pressed: pressedNow, values: valueMap, axes: axesState });
     } else {
+      // If no pad, send a single disconnected info payload
+      sendInfo(null);
       if (prevButtons.length) {
         prevButtons.forEach((btn, index) => {
           if (btn?.pressed) {
-            const name = buttonNames[index] || ('button-' + index);
+            const name = nameForIndex(index);
             send({ type:'button', button:name, index, pressed:false, value:0 });
             if (index === 12) send({ type:'dpad', key:'up', pressed:false });
             if (index === 13) send({ type:'dpad', key:'down', pressed:false });
@@ -74,6 +150,7 @@ const buildBridgeHtml = (axisThreshold) => `
         });
         prevAxes = [];
       }
+      send({ type:'state', pressed: [], values: {}, axes: {} });
     }
     requestAnimationFrame(poll);
   }
@@ -99,7 +176,7 @@ const buildBridgeHtml = (axisThreshold) => `
 })();
 </script>
 </body></html>`;
-function GamepadBridge({ enabled = true, axisThreshold = 0.15, onDpad, onButton, onAxis, onStatus, style, }) {
+function GamepadBridge({ enabled = true, axisThreshold = 0.15, onDpad, onButton, onAxis, onStatus, onInfo, onState, vibrationRequest, style, }) {
     const webviewRef = (0, react_1.useRef)(null);
     const html = (0, react_1.useMemo)(() => buildBridgeHtml(axisThreshold), [axisThreshold]);
     const focusBridge = (0, react_1.useCallback)(() => {
@@ -113,6 +190,19 @@ function GamepadBridge({ enabled = true, axisThreshold = 0.15, onDpad, onButton,
         if (enabled)
             focusBridge();
     }, [enabled, focusBridge]);
+    (0, react_1.useEffect)(() => {
+        if (!enabled || !vibrationRequest)
+            return;
+        const node = webviewRef.current;
+        if (!node)
+            return;
+        if (vibrationRequest.type === "once") {
+            node.injectJavaScript(`window.__earlVibrateOnce(${Math.max(vibrationRequest.duration, 0)}, ${Math.max(Math.min(vibrationRequest.strong, 1), 0)}, ${Math.max(Math.min(vibrationRequest.weak, 1), 0)}); true;`);
+        }
+        else {
+            node.injectJavaScript(`window.__earlStopVibration(); true;`);
+        }
+    }, [enabled, vibrationRequest]);
     if (!enabled)
         return null;
     const handleMessage = (event) => {
@@ -130,6 +220,12 @@ function GamepadBridge({ enabled = true, axisThreshold = 0.15, onDpad, onButton,
             else if (data.type === "status") {
                 onStatus === null || onStatus === void 0 ? void 0 : onStatus(data);
             }
+            else if (data.type === "info") {
+                onInfo === null || onInfo === void 0 ? void 0 : onInfo(data);
+            }
+            else if (data.type === "state") {
+                onState === null || onState === void 0 ? void 0 : onState(data);
+            }
         }
         catch {
             // ignore malformed messages

package/dist/GamepadDebug.js

@@ -15,6 +15,11 @@ function ControllerVisual({ pressed, axis, value }) {
         const v = value(name);
         return Math.max(v, pressed(name) ? 1 : 0);
     };
+    const { width, height } = (0, react_native_1.useWindowDimensions)();
+    const isPortrait = height >= width;
+    const containerScaleStyle = isPortrait
+        ? { transform: [{ scale: 0.7 }] }
+        : undefined;
     const mix = (a, b, t) => Math.round(a + (b - a) * t);
     const stickColor = (mag) => {
         const clamped = Math.min(1, Math.max(0, mag));
@@ -30,7 +35,7 @@ function ControllerVisual({ pressed, axis, value }) {
     };
     const leftMag = Math.min(1, Math.hypot(axis("leftX"), axis("leftY")));
     const rightMag = Math.min(1, Math.hypot(axis("rightX"), axis("rightY")));
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.psWrapper, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.psContainer, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.psShoulderRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.psWrapper, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.psContainer, containerScaleStyle], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.psShoulderRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                 styles.psShoulder,
                                 styles.psShoulderLeft,
                                 level("lb") > 0 && styles.psShoulderActive,
@@ -62,7 +67,10 @@ function ControllerVisual({ pressed, axis, value }) {
                             ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
                                     styles.psShoulderText,
                                     level("rt") > 0 && styles.psShoulderTextActive,
-                                ], children: "R2" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.psMiddle }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.psPaveTactile }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                ], children: "R2" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.psMiddle }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                        styles.psPaveTactile,
+                        pressed("touchpad") && styles.psPaveTactileActive,
+                    ] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                         styles.psShare,
                         pressed("back") && styles.psActiveButton,
                     ] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
@@ -121,7 +129,7 @@ function ControllerVisual({ pressed, axis, value }) {
                                     {
                                         transform: [
                                             { translateX: axis("leftX") * 6 },
-                                            { translateY: axis("leftY") * -6 },
+                                            { translateY: axis("leftY") * 6 },
                                         ],
                                         backgroundColor: stickColor(leftMag),
                                     },
@@ -142,7 +150,7 @@ function ControllerVisual({ pressed, axis, value }) {
                                     {
                                         transform: [
                                             { translateX: axis("rightX") * 6 },
-                                            { translateY: axis("rightY") * -6 },
+                                            { translateY: axis("rightY") * 6 },
                                         ],
                                         backgroundColor: stickColor(rightMag),
                                     },
@@ -155,7 +163,8 @@ function ControllerVisual({ pressed, axis, value }) {
                                     ] }) }) })] })] }) }));
 }
 function GamepadDebug({ enabled = true, axisThreshold = 0.15, }) {
-    const { bridge, pressedButtons, axes, buttonValues } = (0, useGamepad_1.default)({
+    var _a, _b, _c, _d;
+    const { bridge, pressedButtons, axes, buttonValues, info, vibrate, stopVibration, } = (0, useGamepad_1.default)({
         enabled,
         axisThreshold,
     });
@@ -163,7 +172,59 @@ function GamepadDebug({ enabled = true, axisThreshold = 0.15, }) {
     const pressed = (key) => pressedButtons.has(key);
     const axisValue = (key) => { var _a; return (_a = axes[key]) !== null && _a !== void 0 ? _a : 0; };
     const buttonValue = (key) => { var _a; return (_a = buttonValues[key]) !== null && _a !== void 0 ? _a : 0; };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, children: [bridge, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.body, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, styles.controllerCard], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardTitle, children: "Controller" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.controller, children: (0, jsx_runtime_1.jsx)(ControllerVisual, { pressed: pressed, axis: axisValue, value: buttonValue }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, styles.stateCard], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardTitle, children: "State" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: "Pressed" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.badgeRow, children: pressedList.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.muted, children: "None" })) : (pressedList.map((name) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.badge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.badgeText, children: name }) }, name)))) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: "Axes" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.axesGrid, children: trackedAxes.map((axisName) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.axisItem, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.axisLabel, children: axisName }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.axisValue, children: format(axes[axisName]) })] }, axisName))) })] })] })] }) }));
+    const touchpadPressed = pressed("touchpad");
+    const renderStickCard = (title, xLabel, yLabel, x, y) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.stickCard, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.stickTitle, children: title }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.stickContent, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.stickAxesList, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.stickAxisRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.stickAxisLabel, children: xLabel }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.stickAxisValue, children: format(x) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.stickAxisRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.stickAxisLabel, children: yLabel }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.stickAxisValue, children: format(y) })] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.stickPlot, children: (() => {
+                            const radius = 44;
+                            const dotX = x * radius;
+                            const dotY = y * radius;
+                            const distance = Math.hypot(dotX, dotY);
+                            const hasMovement = distance > 1;
+                            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.stickCircle, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.stickCrosshairH }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.stickCrosshairV }), hasMovement && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.stickGuideDiag,
+                                            {
+                                                width: distance,
+                                                left: 55,
+                                                top: 55,
+                                                transform: [
+                                                    {
+                                                        rotate: `${Math.atan2(dotY, dotX) *
+                                                            (180 / Math.PI)}deg`,
+                                                    },
+                                                ],
+                                            },
+                                        ] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.stickDot,
+                                            {
+                                                transform: [
+                                                    { translateX: dotX },
+                                                    { translateY: dotY },
+                                                ],
+                                            },
+                                        ] })] }));
+                        })() })] })] }));
+    const isConnected = info.connected;
+    const controllerLabel = (_a = info.id) !== null && _a !== void 0 ? _a : "No controller detected";
+    const vendorLabel = (_b = info.vendor) !== null && _b !== void 0 ? _b : "—";
+    const productLabel = (_c = info.product) !== null && _c !== void 0 ? _c : "—";
+    const mappingLabel = (_d = info.mapping) !== null && _d !== void 0 ? _d : "unknown";
+    const timestampLabel = info.timestamp != null ? Math.round(info.timestamp).toString() : "—";
+    const infoItems = [
+        { label: "Name", value: controllerLabel },
+        { label: "Vendor", value: vendorLabel },
+        { label: "Product", value: productLabel },
+        { label: "Mapping", value: mappingLabel },
+        { label: "Index", value: info.index != null ? `${info.index}` : "—" },
+        { label: "Axes", value: `${info.axes || 0}` },
+        { label: "Buttons", value: `${info.buttons || 0}` },
+        { label: "Vibration", value: info.canVibrate ? "Yes" : "No" },
+        { label: "Timestamp", value: timestampLabel },
+    ];
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.container, children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { contentContainerStyle: styles.scrollContent, showsVerticalScrollIndicator: false, children: [bridge, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.body, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, styles.controllerCard], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.statusRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardTitle, children: "Controller" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                                styles.statusPill,
+                                                isConnected
+                                                    ? styles.statusPillConnected
+                                                    : styles.statusPillWaiting,
+                                            ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.statusPillText, children: isConnected ? "Connected" : "Waiting" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.helperText, children: "Connect your gamepad and press a button to test." }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.infoGrid, children: infoItems.map(({ label, value }) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.infoItem, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.infoLabel, children: label }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.infoValue, children: value })] }, label))) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.controller, children: [!isConnected && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.loaderOverlay, children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: "#2563eb", size: "small" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loaderText, children: "Connect your gamepad and press a button to test..." })] })), (0, jsx_runtime_1.jsx)(ControllerVisual, { pressed: pressed, axis: axisValue, value: buttonValue })] }), info.canVibrate && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.testsRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.button, onPress: () => vibrate(900, 1), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: "Vibration, 1 sec" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.button, onPress: stopVibration, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.buttonText, children: "Stop vibration" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.helperTextSmall, children: "Uses vibrationActuator when available." })] })), !info.canVibrate && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.helperTextSmall, children: "Vibration not reported by this controller." }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, styles.stateCard], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.cardTitle, children: "State" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: "Pressed" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.badgeRow, children: pressedList.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.muted, children: "None" })) : (pressedList.map((name) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.badge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.badgeText, children: name }) }, name)))) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.sectionTitle, children: "Axes" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.stickGrid, children: [renderStickCard("L STICK", "Axis 0 (leftX)", "Axis 1 (leftY)", axisValue("leftX"), axisValue("leftY")), renderStickCard("R STICK", "Axis 2 (rightX)", "Axis 3 (rightY)", axisValue("rightX"), axisValue("rightY"))] })] })] })] }) }));
 }
 const styles = react_native_1.StyleSheet.create({
     container: {
@@ -252,6 +313,106 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 16,
         fontVariant: ["tabular-nums"],
     },
+    stickGrid: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 10,
+    },
+    stickCard: {
+        flexGrow: 1,
+        flexBasis: "48%",
+        minWidth: 240,
+        backgroundColor: "#f8fafc",
+        borderWidth: 1,
+        borderColor: "#cbd5e1",
+        borderRadius: 10,
+        padding: 10,
+        gap: 10,
+    },
+    stickTitle: {
+        color: "#475569",
+        fontSize: 12,
+        fontWeight: "700",
+        letterSpacing: 0.3,
+    },
+    stickContent: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 12,
+    },
+    stickAxesList: {
+        gap: 6,
+    },
+    stickAxisRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 8,
+    },
+    stickAxisLabel: {
+        color: "#475569",
+        fontSize: 12,
+        fontWeight: "600",
+    },
+    stickAxisValue: {
+        color: "#0f172a",
+        fontSize: 16,
+        fontWeight: "700",
+        fontVariant: ["tabular-nums"],
+    },
+    stickPlot: {
+        width: 120,
+        height: 120,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    stickCircle: {
+        width: 110,
+        height: 110,
+        borderRadius: 55,
+        borderWidth: 1,
+        borderColor: "#cbd5e1",
+        backgroundColor: "#fff",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+    },
+    stickCrosshairH: {
+        position: "absolute",
+        left: 5,
+        right: 5,
+        top: 55,
+        height: 1,
+        backgroundColor: "#e2e8f0",
+    },
+    stickCrosshairV: {
+        position: "absolute",
+        top: 5,
+        bottom: 5,
+        left: 55,
+        width: 1,
+        backgroundColor: "#e2e8f0",
+    },
+    stickGuideDiag: {
+        position: "absolute",
+        height: 0,
+        borderTopWidth: 1,
+        borderColor: "#94a3b8",
+        borderStyle: "dashed",
+        transformOrigin: "left center",
+    },
+    stickDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: "#1d4ed8",
+        position: "absolute",
+        top: 55,
+        left: 55,
+        marginLeft: -5,
+        marginTop: -5,
+    },
     body: {
         flexDirection: "row",
         flexWrap: "wrap",
@@ -279,6 +440,65 @@ const styles = react_native_1.StyleSheet.create({
         fontWeight: "700",
         fontSize: 16,
     },
+    statusRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 8,
+    },
+    statusPill: {
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 999,
+        borderWidth: 1,
+    },
+    statusPillConnected: {
+        backgroundColor: "#dcfce7",
+        borderColor: "#16a34a",
+    },
+    statusPillWaiting: {
+        backgroundColor: "#fee2e2",
+        borderColor: "#f97316",
+    },
+    statusPillText: {
+        fontSize: 12,
+        fontWeight: "700",
+        color: "#0f172a",
+    },
+    helperText: {
+        color: "#475569",
+        fontSize: 12,
+    },
+    helperTextSmall: {
+        color: "#94a3b8",
+        fontSize: 11,
+    },
+    infoGrid: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 8,
+    },
+    infoItem: {
+        flexGrow: 1,
+        flexBasis: "45%",
+        minWidth: 140,
+        backgroundColor: "#f8fafc",
+        borderWidth: 1,
+        borderColor: "#e2e8f0",
+        borderRadius: 8,
+        padding: 8,
+        gap: 2,
+    },
+    infoLabel: {
+        color: "#475569",
+        fontSize: 11,
+        fontWeight: "700",
+    },
+    infoValue: {
+        color: "#0f172a",
+        fontSize: 13,
+        fontWeight: "600",
+    },
     controller: {
         backgroundColor: "#f8fafc",
         borderWidth: 1,
@@ -286,6 +506,50 @@ const styles = react_native_1.StyleSheet.create({
         padding: 12,
         alignItems: "center",
         justifyContent: "center",
+        position: "relative",
+        overflow: "hidden",
+    },
+    loaderOverlay: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(255,255,255,0.92)",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 12,
+        gap: 6,
+        zIndex: 50,
+    },
+    loaderText: {
+        color: "#0f172a",
+        fontSize: 12,
+        textAlign: "center",
+    },
+    testsRow: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 8,
+    },
+    button: {
+        backgroundColor: "#2563eb",
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        borderRadius: 8,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    buttonDisabled: {
+        backgroundColor: "#cbd5e1",
+    },
+    buttonText: {
+        color: "#f8fafc",
+        fontWeight: "700",
+        fontSize: 13,
+    },
+    buttonTextDisabled: {
+        color: "#475569",
     },
     axesGrid: {
         flexDirection: "row",
@@ -349,7 +613,7 @@ const styles = react_native_1.StyleSheet.create({
         width: 395,
         height: 160,
         backgroundColor: "#e0e0e0",
-        marginLeft: 27,
+        marginLeft: 50, // 27
         borderRadius: 25,
         position: "absolute",
         zIndex: 0,
@@ -359,7 +623,7 @@ const styles = react_native_1.StyleSheet.create({
         width: 150,
         height: 80,
         backgroundColor: "#333",
-        marginLeft: 147,
+        marginLeft: 170,
         borderRadius: 7,
         position: "absolute",
         zIndex: 10,
@@ -370,12 +634,18 @@ const styles = react_native_1.StyleSheet.create({
         shadowRadius: 10,
         elevation: 5,
     },
+    psPaveTactileActive: {
+        backgroundColor: "#2563eb",
+        shadowColor: "#2563eb",
+        shadowOpacity: 0.65,
+        shadowRadius: 12,
+    },
     psShare: {
         width: 12,
         height: 25,
         position: "absolute",
         backgroundColor: "#95a5a6",
-        marginLeft: 125,
+        marginLeft: 148,
         marginTop: 85,
         borderRadius: 5,
         zIndex: 10,
@@ -390,7 +660,7 @@ const styles = react_native_1.StyleSheet.create({
         height: 25,
         position: "absolute",
         backgroundColor: "#95a5a6",
-        marginLeft: 305,
+        marginLeft: 327,
         marginTop: 85,
         borderRadius: 5,
         zIndex: 10,
@@ -405,7 +675,7 @@ const styles = react_native_1.StyleSheet.create({
         height: 260,
         backgroundColor: "#e0e0e0",
         position: "absolute",
-        left: 0,
+        left: 23,
         top: 95,
         transform: [{ rotate: "11deg" }],
         borderTopLeftRadius: 30,
@@ -426,7 +696,7 @@ const styles = react_native_1.StyleSheet.create({
         height: 260,
         backgroundColor: "#e0e0e0",
         position: "absolute",
-        left: 330,
+        left: 353,
         top: 95,
         transform: [{ rotate: "-11deg" }],
         borderTopLeftRadius: 30,
@@ -448,7 +718,7 @@ const styles = react_native_1.StyleSheet.create({
         height: 112,
         borderRadius: 56,
         marginTop: 5,
-        marginLeft: 10,
+        marginLeft: 0,
         borderWidth: 1,
         borderColor: "#b0b0b0",
         position: "relative",
@@ -514,7 +784,7 @@ const styles = react_native_1.StyleSheet.create({
         width: 112,
         height: 112,
         borderRadius: 56,
-        marginTop: 2,
+        marginTop: 4,
         borderWidth: 1,
         borderColor: "#b0b0b0",
         position: "relative",

package/dist/types.d.ts

@@ -1,26 +1,47 @@
-export type DpadKey = 'up' | 'down' | 'left' | 'right';
-export type GamepadButtonName = 'a' | 'b' | 'x' | 'y' | 'lb' | 'rb' | 'lt' | 'rt' | 'back' | 'start' | 'ls' | 'rs' | 'dpadUp' | 'dpadDown' | 'dpadLeft' | 'dpadRight' | 'home' | `button-${number}`;
-export type StickAxisName = 'leftX' | 'leftY' | 'rightX' | 'rightY' | `axis-${number}`;
+export type DpadKey = "up" | "down" | "left" | "right";
+export type GamepadButtonName = "a" | "b" | "x" | "y" | "lb" | "rb" | "lt" | "rt" | "back" | "start" | "ls" | "rs" | "dpadUp" | "dpadDown" | "dpadLeft" | "dpadRight" | "home" | "touchpad" | `button-${number}`;
+export type StickAxisName = "leftX" | "leftY" | "rightX" | "rightY" | `axis-${number}`;
 export type DpadEvent = {
-    type: 'dpad';
+    type: "dpad";
     key: DpadKey;
     pressed: boolean;
 };
 export type ButtonEvent = {
-    type: 'button';
+    type: "button";
     button: GamepadButtonName;
     index: number;
     pressed: boolean;
     value: number;
 };
 export type AxisEvent = {
-    type: 'axis';
+    type: "axis";
     axis: StickAxisName;
     index: number;
     value: number;
 };
+export type GamepadInfo = {
+    connected: boolean;
+    index: number | null;
+    id: string | null;
+    mapping: string | null;
+    timestamp: number | null;
+    canVibrate: boolean;
+    vendor: string | null;
+    product: string | null;
+    axes: number;
+    buttons: number;
+};
+export type InfoEvent = GamepadInfo & {
+    type: "info";
+};
+export type StateEvent = {
+    type: "state";
+    pressed: GamepadButtonName[];
+    values: Partial<Record<GamepadButtonName, number>>;
+    axes: Partial<Record<StickAxisName, number>>;
+};
 export type StatusEvent = {
-    type: 'status';
-    state: 'connected' | 'disconnected';
+    type: "status";
+    state: "connected" | "disconnected";
 };
-export type GamepadMessage = DpadEvent | ButtonEvent | AxisEvent | StatusEvent;
+export type GamepadMessage = DpadEvent | ButtonEvent | AxisEvent | StatusEvent | InfoEvent | StateEvent;

package/dist/useGamepad.d.ts

@@ -1,5 +1,5 @@
 import { type JSX } from "react";
-import type { AxisEvent, ButtonEvent, DpadEvent, GamepadButtonName, StickAxisName, StatusEvent } from "./types";
+import type { AxisEvent, ButtonEvent, DpadEvent, GamepadButtonName, GamepadInfo, StickAxisName, InfoEvent, StatusEvent } from "./types";
 type Options = {
     enabled?: boolean;
     axisThreshold?: number;
@@ -7,6 +7,7 @@ type Options = {
     onAxis?: (event: AxisEvent) => void;
     onDpad?: (event: DpadEvent) => void;
     onStatus?: (event: StatusEvent) => void;
+    onInfo?: (event: InfoEvent) => void;
 };
 type Return = {
     pressedButtons: Set<GamepadButtonName>;
@@ -14,6 +15,9 @@ type Return = {
     buttonValues: Partial<Record<GamepadButtonName, number>>;
     isPressed: (key: GamepadButtonName) => boolean;
     bridge: JSX.Element | null;
+    info: GamepadInfo;
+    vibrate: (duration?: number, strength?: number) => void;
+    stopVibration: () => void;
 };
-export default function useGamepad({ enabled, axisThreshold, onButton, onAxis, onDpad, onStatus, }?: Options): Return;
+export default function useGamepad({ enabled, axisThreshold, onButton, onAxis, onDpad, onStatus, onInfo, }?: Options): Return;
 export {};

package/dist/useGamepad.js

@@ -7,7 +7,7 @@ exports.default = useGamepad;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const GamepadBridge_1 = __importDefault(require("./GamepadBridge"));
-function useGamepad({ enabled = true, axisThreshold = 0.15, onButton, onAxis, onDpad, onStatus, } = {}) {
+function useGamepad({ enabled = true, axisThreshold = 0.15, onButton, onAxis, onDpad, onStatus, onInfo, } = {}) {
     const [pressedButtons, setPressedButtons] = (0, react_1.useState)(new Set());
     const [buttonValues, setButtonValues] = (0, react_1.useState)({});
     const pressedRef = (0, react_1.useRef)(new Set());
@@ -17,6 +17,27 @@ function useGamepad({ enabled = true, axisThreshold = 0.15, onButton, onAxis, on
         rightX: 0,
         rightY: 0,
     });
+    const [info, setInfo] = (0, react_1.useState)({
+        connected: false,
+        index: null,
+        id: null,
+        mapping: null,
+        timestamp: null,
+        canVibrate: false,
+        vendor: null,
+        product: null,
+        axes: 0,
+        buttons: 0,
+    });
+    const [vibrationRequest, setVibrationRequest] = (0, react_1.useState)(null);
+    const vibrationNonce = (0, react_1.useRef)(0);
+    const resetState = (0, react_1.useCallback)(() => {
+        const cleared = new Set();
+        pressedRef.current = cleared;
+        setPressedButtons(cleared);
+        setButtonValues({});
+        setAxes({ leftX: 0, leftY: 0, rightX: 0, rightY: 0 });
+    }, []);
     (0, react_1.useEffect)(() => {
         pressedRef.current = pressedButtons;
     }, [pressedButtons]);
@@ -43,17 +64,75 @@ function useGamepad({ enabled = true, axisThreshold = 0.15, onButton, onAxis, on
     const handleDpad = (0, react_1.useCallback)((event) => {
         onDpad === null || onDpad === void 0 ? void 0 : onDpad(event);
     }, [onDpad]);
-    (0, react_1.useEffect)(() => {
-        if (!enabled && pressedRef.current.size) {
-            pressedRef.current = new Set();
-            setPressedButtons(new Set());
+    const handleInfo = (0, react_1.useCallback)((event) => {
+        if (!event.connected) {
+            resetState();
+        }
+        setInfo(event);
+        onInfo === null || onInfo === void 0 ? void 0 : onInfo(event);
+    }, [onInfo, resetState]);
+    const handleState = (0, react_1.useCallback)((event) => {
+        var _a, _b;
+        const next = new Set(event.pressed);
+        pressedRef.current = next;
+        setPressedButtons(next);
+        setButtonValues((_a = event.values) !== null && _a !== void 0 ? _a : {});
+        setAxes((_b = event.axes) !== null && _b !== void 0 ? _b : {});
+    }, []);
+    const handleStatus = (0, react_1.useCallback)((event) => {
+        if (event.state === "disconnected") {
+            resetState();
+            setInfo((prev) => ({
+                ...prev,
+                connected: false,
+            }));
         }
+        onStatus === null || onStatus === void 0 ? void 0 : onStatus(event);
+    }, [onStatus, resetState]);
+    const vibrate = (0, react_1.useCallback)((duration = 800, strength = 1) => {
+        vibrationNonce.current += 1;
+        const safeStrength = Math.max(0, Math.min(strength, 1));
+        setVibrationRequest({
+            type: "once",
+            duration,
+            strong: safeStrength,
+            weak: safeStrength,
+            nonce: vibrationNonce.current,
+        });
+    }, []);
+    const stopVibration = (0, react_1.useCallback)(() => {
+        vibrationNonce.current += 1;
+        setVibrationRequest({ type: "stop", nonce: vibrationNonce.current });
+    }, []);
+    (0, react_1.useEffect)(() => {
         if (!enabled) {
-            setAxes({ leftX: 0, leftY: 0, rightX: 0, rightY: 0 });
-            setButtonValues({});
+            resetState();
+            setInfo((prev) => ({
+                ...prev,
+                connected: false,
+            }));
         }
-    }, [enabled]);
-    const bridge = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(GamepadBridge_1.default, { enabled: enabled, axisThreshold: axisThreshold, onDpad: handleDpad, onButton: handleButton, onAxis: handleAxis, onStatus: onStatus })), [enabled, axisThreshold, handleAxis, handleButton, handleDpad, onStatus]);
+    }, [enabled, resetState]);
+    const bridge = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(GamepadBridge_1.default, { enabled: enabled, axisThreshold: axisThreshold, onDpad: handleDpad, onButton: handleButton, onAxis: handleAxis, onStatus: handleStatus, onInfo: handleInfo, onState: handleState, vibrationRequest: vibrationRequest !== null && vibrationRequest !== void 0 ? vibrationRequest : undefined })), [
+        enabled,
+        axisThreshold,
+        handleAxis,
+        handleButton,
+        handleDpad,
+        handleInfo,
+        handleStatus,
+        handleState,
+        vibrationRequest,
+    ]);
     const isPressed = (0, react_1.useCallback)((key) => pressedRef.current.has(key), []);
-    return { pressedButtons, axes, buttonValues, isPressed, bridge };
+    return {
+        pressedButtons,
+        axes,
+        buttonValues,
+        isPressed,
+        bridge,
+        info,
+        vibrate,
+        stopVibration,
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-earl-gamepad",
-	"version": "0.5.2",
+	"version": "0.7.0",
 	"description": "React Native gamepad bridge via WebView (buttons, sticks, d-pad, status).",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",