react-native-earl-gamepad 0.6.0 → 0.7.0

package/README.md

@@ -5,11 +5,11 @@
 ![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?
 
@@ -134,6 +134,11 @@ export function HUD() {
 
 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";
 
@@ -142,9 +147,9 @@ export function DebugScreen() {
 }
 ```
 
-![Gamepad visual idle](https://github.com/user-attachments/assets/9d4cbc94-c3aa-434a-99ae-5ea8b01b06e3)
-![Gamepad visual pressed](https://github.com/user-attachments/assets/7b37d76a-7695-4be9-bda4-7e3d1e6adf41)
-![Gamepad loader](https://github.com/user-attachments/assets/5bb462e5-3259-4680-bfcf-005324ac2aec)
+![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
 
@@ -156,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
@@ -188,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`.
 

package/dist/GamepadBridge.d.ts

@@ -1,5 +1,5 @@
 import { StyleProp, ViewStyle } from "react-native";
-import type { AxisEvent, ButtonEvent, DpadEvent, InfoEvent, StatusEvent } from "./types";
+import type { AxisEvent, ButtonEvent, DpadEvent, InfoEvent, StateEvent, StatusEvent } from "./types";
 type VibrationRequest = {
     type: "once";
     duration: number;
@@ -18,8 +18,9 @@ type Props = {
     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, onInfo, vibrationRequest, 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,7 +16,7 @@ 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 = [];
@@ -79,14 +79,24 @@ const buildBridgeHtml = (axisThreshold) => `
   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) {
@@ -97,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 };
       });
 
@@ -108,15 +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 });
@@ -135,6 +150,7 @@ const buildBridgeHtml = (axisThreshold) => `
         });
         prevAxes = [];
       }
+      send({ type:'state', pressed: [], values: {}, axes: {} });
     }
     requestAnimationFrame(poll);
   }
@@ -160,7 +176,7 @@ const buildBridgeHtml = (axisThreshold) => `
 })();
 </script>
 </body></html>`;
-function GamepadBridge({ enabled = true, axisThreshold = 0.15, onDpad, onButton, onAxis, onStatus, onInfo, vibrationRequest, 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)(() => {
@@ -207,6 +223,9 @@ function GamepadBridge({ enabled = true, axisThreshold = 0.15, onDpad, onButton,
             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

@@ -18,7 +18,7 @@ function ControllerVisual({ pressed, axis, value }) {
     const { width, height } = (0, react_native_1.useWindowDimensions)();
     const isPortrait = height >= width;
     const containerScaleStyle = isPortrait
-        ? { transform: [{ scale: 0.8 }] }
+        ? { transform: [{ scale: 0.7 }] }
         : undefined;
     const mix = (a, b, t) => Math.round(a + (b - a) * t);
     const stickColor = (mag) => {
@@ -67,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: [
@@ -126,7 +129,7 @@ function ControllerVisual({ pressed, axis, value }) {
                                     {
                                         transform: [
                                             { translateX: axis("leftX") * 6 },
-                                            { translateY: axis("leftY") * -6 },
+                                            { translateY: axis("leftY") * 6 },
                                         ],
                                         backgroundColor: stickColor(leftMag),
                                     },
@@ -147,7 +150,7 @@ function ControllerVisual({ pressed, axis, value }) {
                                     {
                                         transform: [
                                             { translateX: axis("rightX") * 6 },
-                                            { translateY: axis("rightY") * -6 },
+                                            { translateY: axis("rightY") * 6 },
                                         ],
                                         backgroundColor: stickColor(rightMag),
                                     },
@@ -169,6 +172,36 @@ 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; };
+    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 : "—";
@@ -191,23 +224,7 @@ function GamepadDebug({ enabled = true, axisThreshold = 0.15, }) {
                                                 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 })] }), (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,
-                                                !info.canVibrate && styles.buttonDisabled,
-                                            ], onPress: () => info.canVibrate && vibrate(900, 1), disabled: !info.canVibrate, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
-                                                    styles.buttonText,
-                                                    !info.canVibrate &&
-                                                        styles.buttonTextDisabled,
-                                                ], children: "Vibration, 1 sec" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [
-                                                styles.button,
-                                                !info.canVibrate && styles.buttonDisabled,
-                                            ], onPress: () => info.canVibrate && stopVibration(), disabled: !info.canVibrate, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
-                                                    styles.buttonText,
-                                                    !info.canVibrate &&
-                                                        styles.buttonTextDisabled,
-                                                ], children: "Stop vibration" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.helperTextSmall, children: info.canVibrate
-                                        ? "Uses vibrationActuator when available."
-                                        : "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.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))) })] })] })] }) }));
+                                            ], 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: {
@@ -296,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",
@@ -517,6 +634,12 @@ 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,

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 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 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";
@@ -34,8 +34,14 @@ export type GamepadInfo = {
 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";
 };
-export type GamepadMessage = DpadEvent | ButtonEvent | AxisEvent | StatusEvent | InfoEvent;
+export type GamepadMessage = DpadEvent | ButtonEvent | AxisEvent | StatusEvent | InfoEvent | StateEvent;

package/dist/useGamepad.js

@@ -31,6 +31,13 @@ function useGamepad({ enabled = true, axisThreshold = 0.15, onButton, onAxis, on
     });
     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]);
@@ -58,18 +65,30 @@ function useGamepad({ enabled = true, axisThreshold = 0.15, onButton, onAxis, on
         onDpad === null || onDpad === void 0 ? void 0 : onDpad(event);
     }, [onDpad]);
     const handleInfo = (0, react_1.useCallback)((event) => {
+        if (!event.connected) {
+            resetState();
+        }
         setInfo(event);
         onInfo === null || onInfo === void 0 ? void 0 : onInfo(event);
-    }, [onInfo]);
+    }, [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]);
+    }, [onStatus, resetState]);
     const vibrate = (0, react_1.useCallback)((duration = 800, strength = 1) => {
         vibrationNonce.current += 1;
         const safeStrength = Math.max(0, Math.min(strength, 1));
@@ -86,20 +105,15 @@ function useGamepad({ enabled = true, axisThreshold = 0.15, onButton, onAxis, on
         setVibrationRequest({ type: "stop", nonce: vibrationNonce.current });
     }, []);
     (0, react_1.useEffect)(() => {
-        if (!enabled && pressedRef.current.size) {
-            pressedRef.current = new Set();
-            setPressedButtons(new Set());
-        }
         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: handleStatus, onInfo: handleInfo, vibrationRequest: vibrationRequest !== null && vibrationRequest !== void 0 ? vibrationRequest : undefined })), [
+    }, [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,
@@ -107,6 +121,7 @@ function useGamepad({ enabled = true, axisThreshold = 0.15, onButton, onAxis, on
         handleDpad,
         handleInfo,
         handleStatus,
+        handleState,
         vibrationRequest,
     ]);
     const isPressed = (0, react_1.useCallback)((key) => pressedRef.current.has(key), []);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-earl-gamepad",
-	"version": "0.6.0",
+	"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",