react-native-earl-gamepad 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Rin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,116 @@
+# react-native-earl-gamepad
+
+Lightweight, WebView-based Gamepad bridge for React Native that surfaces all common buttons, sticks, d-pad, and connect/disconnect events.
+
+## Features
+
+- Hidden WebView polling `navigator.getGamepads()` (index 0) and emitting button/axis/status events.
+- `GamepadBridge` component, `useGamepad` hook, and `GamepadDebug` visual tester.
+- Deadzone handling for sticks (default 0.15) and auto-clear on disconnect.
+
+## Install
+
+```sh
+npm install react-native-earl-gamepad react-native-webview
+# or
+yarn add react-native-earl-gamepad react-native-webview
+```
+
+## Quick start
+
+```tsx
+import { GamepadBridge } from 'react-native-earl-gamepad';
+
+export function Controls() {
+    return (
+        <GamepadBridge
+            enabled
+            onButton={(e) => console.log('button', e.button, e.pressed, e.value)}
+            onAxis={(e) => console.log('axis', e.axis, e.value)}
+            onDpad={(e) => console.log('dpad', e.key, e.pressed)}
+            onStatus={(s) => console.log('status', s.state)}
+        />
+    );
+}
+```
+
+### Using the hook
+
+```tsx
+import { useGamepad } from 'react-native-earl-gamepad';
+
+export function HUD() {
+    const { pressedButtons, axes, isPressed, bridge } = useGamepad({ enabled: true });
+
+    return (
+        <>
+            {bridge}
+            <Text>Pressed: {Array.from(pressedButtons).join(', ') || 'none'}</Text>
+            <Text>
+                Left stick: x {axes.leftX?.toFixed(2)} / y {axes.leftY?.toFixed(2)}
+            </Text>
+            <Text>A held? {isPressed('a') ? 'yes' : 'no'}</Text>
+        </>
+    );
+}
+```
+
+### Visual debugger
+
+```tsx
+import { GamepadDebug } from 'react-native-earl-gamepad';
+
+export function DebugScreen() {
+    return <GamepadDebug />;
+}
+```
+
+`GamepadDebug` renders a controller diagram that lights up buttons, shows stick offsets, and lists pressed/axes values.
+
+## API
+
+### `GamepadBridge` props
+
+- `enabled?: boolean` — mount/unmount the hidden WebView. Default `true`.
+- `axisThreshold?: number` — deadzone for axes. Default `0.15`.
+- `onButton?: (event)` — `{ type:'button', button, index, pressed, value }`.
+- `onAxis?: (event)` — `{ type:'axis', axis, index, value }`.
+- `onDpad?: (event)` — `{ type:'dpad', key, pressed }` convenience mapped from buttons 12–15.
+- `onStatus?: (event)` — `{ type:'status', state:'connected'|'disconnected' }`.
+- `style?: StyleProp<ViewStyle>` — optional override; default is a 1×1 transparent view.
+
+### `useGamepad` return
+
+- `pressedButtons: Set<GamepadButtonName>` — current pressed buttons (named or `button-N`).
+- `axes: Partial<Record<StickAxisName, number>>` — stick/axis values with deadzone applied.
+- `isPressed(key)` — helper to query a button.
+- `bridge: JSX.Element | null` — render once in your tree to enable polling.
+
+### `GamepadDebug`
+
+Drop-in component to visualize inputs. Accepts the same `enabled` and `axisThreshold` props as the hook/bridge.
+
+### Types
+
+- `GamepadButtonName`: `a | b | x | y | lb | rb | lt | rt | back | start | ls | rs | dpadUp | dpadDown | dpadLeft | dpadRight | home | button-N`
+- `StickAxisName`: `leftX | leftY | rightX | rightY | axis-N`
+
+## Notes
+
+- Reads only the first connected pad (`navigator.getGamepads()[0]`).
+- D-pad events are emitted from buttons 12–15; sticks pass through as axes with deadzone applied.
+- On disconnect, all pressed states are cleared and release events are emitted.
+- The WebView must stay mounted; avoid remounting each render to prevent losing state.
+
+## Development
+
+```sh
+npm install
+npm run build
+```
+
+Outputs to `dist/` with type declarations.
+
+## License
+
+MIT

package/dist/GamepadBridge.d.ts

@@ -0,0 +1,13 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import type { AxisEvent, ButtonEvent, DpadEvent, StatusEvent } from './types';
+type Props = {
+    enabled?: boolean;
+    axisThreshold?: number;
+    onDpad?: (event: DpadEvent) => void;
+    onButton?: (event: ButtonEvent) => void;
+    onAxis?: (event: AxisEvent) => void;
+    onStatus?: (event: StatusEvent) => void;
+    style?: StyleProp<ViewStyle>;
+};
+export default function GamepadBridge({ enabled, axisThreshold, onDpad, onButton, onAxis, onStatus, style, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/GamepadBridge.js

@@ -0,0 +1,127 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = GamepadBridge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_webview_1 = __importDefault(require("react-native-webview"));
+// Minimal HTML bridge that polls navigator.getGamepads and posts button/axis changes.
+const buildBridgeHtml = (axisThreshold) => `
+<!doctype html>
+<html><head><meta name="viewport" content="width=device-width,initial-scale=1" /></head>
+<body style="margin:0;padding:0;background:#000">
+<script>
+(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 axisNames = ['leftX','leftY','rightX','rightY'];
+  let prevButtons = [];
+  let prevAxes = [];
+
+  function poll(){
+    const pads = (navigator.getGamepads && navigator.getGamepads()) || [];
+    const gp = pads[0];
+    if (gp) {
+      // Buttons
+      gp.buttons?.forEach((btn, index) => {
+        const name = buttonNames[index] || ('button-' + 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) {
+          send({ type:'button', button:name, index, pressed: !!btn.pressed, value: btn.value ?? 0 });
+          // Also surface d-pad convenience events for the standard indices
+          if (index === 12) send({ type:'dpad', key:'up', pressed: !!btn.pressed });
+          if (index === 13) send({ type:'dpad', key:'down', pressed: !!btn.pressed });
+          if (index === 14) send({ type:'dpad', key:'left', pressed: !!btn.pressed });
+          if (index === 15) send({ type:'dpad', key:'right', pressed: !!btn.pressed });
+        }
+        prevButtons[index] = { pressed: !!btn.pressed, value: btn.value ?? 0 };
+      });
+
+      // Axes
+      gp.axes?.forEach((raw, index) => {
+        const name = axisNames[index] || ('axis-' + index);
+        const value = Math.abs(raw) < deadzone ? 0 : raw;
+        const prevVal = prevAxes[index] ?? 0;
+        if (Math.abs(prevVal - value) > 0.01) {
+          send({ type:'axis', axis:name, index, value });
+        }
+        prevAxes[index] = value;
+      });
+    } else {
+      if (prevButtons.length) {
+        prevButtons.forEach((btn, index) => {
+          if (btn?.pressed) {
+            const name = buttonNames[index] || ('button-' + 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 });
+            if (index === 14) send({ type:'dpad', key:'left', pressed:false });
+            if (index === 15) send({ type:'dpad', key:'right', pressed:false });
+          }
+        });
+        prevButtons = [];
+      }
+      if (prevAxes.length) {
+        prevAxes.forEach((prevVal, index) => {
+          if (prevVal !== 0) {
+            const name = axisNames[index] || ('axis-' + index);
+            send({ type:'axis', axis:name, index, value:0 });
+          }
+        });
+        prevAxes = [];
+      }
+    }
+    requestAnimationFrame(poll);
+  }
+
+  window.addEventListener('gamepadconnected', () => send({ type:'status', state:'connected' }));
+  window.addEventListener('gamepaddisconnected', () => {
+    // Clear previously pressed states so consumers do not get stuck buttons.
+    prevButtons.forEach((btn, index) => {
+      if (btn?.pressed) {
+        const name = buttonNames[index] || ('button-' + 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 });
+        if (index === 14) send({ type:'dpad', key:'left', pressed:false });
+        if (index === 15) send({ type:'dpad', key:'right', pressed:false });
+      }
+    });
+    prevButtons = [];
+    prevAxes = [];
+    send({ type:'status', state:'disconnected' });
+  });
+  poll();
+})();
+</script>
+</body></html>`;
+function GamepadBridge({ enabled = true, axisThreshold = 0.15, onDpad, onButton, onAxis, onStatus, style, }) {
+    const html = (0, react_1.useMemo)(() => buildBridgeHtml(axisThreshold), [axisThreshold]);
+    if (!enabled)
+        return null;
+    const handleMessage = (event) => {
+        try {
+            const data = JSON.parse(event.nativeEvent.data);
+            if (data.type === 'dpad') {
+                onDpad === null || onDpad === void 0 ? void 0 : onDpad(data);
+            }
+            else if (data.type === 'button') {
+                onButton === null || onButton === void 0 ? void 0 : onButton(data);
+            }
+            else if (data.type === 'axis') {
+                onAxis === null || onAxis === void 0 ? void 0 : onAxis(data);
+            }
+            else if (data.type === 'status') {
+                onStatus === null || onStatus === void 0 ? void 0 : onStatus(data);
+            }
+        }
+        catch {
+            // ignore malformed messages
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_webview_1.default, { source: { html }, originWhitelist: ['*'], onMessage: handleMessage, javaScriptEnabled: true, style: style !== null && style !== void 0 ? style : { width: 1, height: 1, position: 'absolute', opacity: 0 } }));
+}

package/dist/GamepadDebug.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    enabled?: boolean;
+    axisThreshold?: number;
+};
+export default function GamepadDebug({ enabled, axisThreshold }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/GamepadDebug.js

@@ -0,0 +1,279 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = GamepadDebug;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const useGamepad_1 = __importDefault(require("./useGamepad"));
+const trackedAxes = ['leftX', 'leftY', 'rightX', 'rightY'];
+const format = (value) => (value !== null && value !== void 0 ? value : 0).toFixed(2);
+function GamepadDebug({ enabled = true, axisThreshold = 0.15 }) {
+    const { bridge, pressedButtons, axes } = (0, useGamepad_1.default)({ enabled, axisThreshold });
+    const pressedList = (0, react_1.useMemo)(() => Array.from(pressedButtons).sort(), [pressedButtons]);
+    const pressed = (key) => pressedButtons.has(key);
+    const axis = (key) => { var _a; return (_a = axes[key]) !== null && _a !== void 0 ? _a : 0; };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [bridge, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, children: "Gamepad Debug" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.controller, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.shoulders, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.bumper, pressed('lb') && styles.active], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "LB" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.bumper, pressed('rb') && styles.active], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "RB" }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.triggers, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.trigger, pressed('lt') && styles.active], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "LT" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.trigger, pressed('rt') && styles.active], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "RT" }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.midRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.stickZone, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.stickRing, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                                styles.stick,
+                                                {
+                                                    transform: [
+                                                        { translateX: axis('leftX') * 20 },
+                                                        { translateY: axis('leftY') * -20 },
+                                                    ],
+                                                },
+                                                pressed('ls') && styles.active,
+                                            ] }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.smallLabel, children: "LS" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.centerCluster, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.smallKey, pressed('back') && styles.active], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "Back" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.smallKey, pressed('start') && styles.active], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "Start" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.smallKey, pressed('home') && styles.active], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.label, children: "Home" }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.faceCluster, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.faceRow, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.faceButton, pressed('y') && styles.faceActive], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faceText, children: "Y" }) }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.faceRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.faceButton, pressed('x') && styles.faceActive], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faceText, children: "X" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.faceButton, pressed('b') && styles.faceActive], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faceText, children: "B" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.faceRow, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.faceButton, pressed('a') && styles.faceActive], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.faceText, children: "A" }) }) })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.bottomRow, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.dpad, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.dpadKey,
+                                            styles.dpadVertical,
+                                            styles.dpadUp,
+                                            pressed('dpadUp') && styles.active,
+                                        ] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.dpadKey,
+                                            styles.dpadVertical,
+                                            styles.dpadDown,
+                                            pressed('dpadDown') && styles.active,
+                                        ] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.dpadKey,
+                                            styles.dpadHorizontal,
+                                            styles.dpadLeft,
+                                            pressed('dpadLeft') && styles.active,
+                                        ] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.dpadKey,
+                                            styles.dpadHorizontal,
+                                            styles.dpadRight,
+                                            pressed('dpadRight') && styles.active,
+                                        ] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.stickZone, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.stickRing, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                                styles.stick,
+                                                {
+                                                    transform: [
+                                                        { translateX: axis('rightX') * 20 },
+                                                        { translateY: axis('rightY') * -20 },
+                                                    ],
+                                                },
+                                                pressed('rs') && styles.active,
+                                            ] }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.smallLabel, children: "RS" })] })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.subtitle, children: ["Pressed (", pressedList.length, ")"] }), (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.subtitle, children: "Axes" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.axesGrid, children: trackedAxes.map((axis) => ((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: axis }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.axisValue, children: format(axes[axis]) })] }, axis))) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        padding: 12,
+        gap: 12,
+        backgroundColor: '#0b1220',
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: '#1f2a3d',
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#e5e7eb',
+    },
+    subtitle: {
+        marginTop: 4,
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#cbd5e1',
+    },
+    muted: {
+        color: '#9ca3af',
+        fontSize: 13,
+    },
+    badgeRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 6,
+    },
+    badge: {
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+        borderRadius: 12,
+        backgroundColor: '#1f2937',
+        borderWidth: 1,
+        borderColor: '#374151',
+    },
+    badgeText: {
+        color: '#e5e7eb',
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    axisItem: {
+        padding: 8,
+        borderRadius: 8,
+        backgroundColor: '#111827',
+        borderWidth: 1,
+        borderColor: '#1f2937',
+        minWidth: 90,
+    },
+    axisLabel: {
+        color: '#cbd5e1',
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    axisValue: {
+        color: '#f8fafc',
+        fontSize: 16,
+        fontVariant: ['tabular-nums'],
+    },
+    controller: {
+        backgroundColor: '#0f172a',
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: '#1f2a3d',
+        padding: 12,
+        gap: 12,
+    },
+    shoulders: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    triggers: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    bumper: {
+        flex: 1,
+        paddingVertical: 8,
+        borderRadius: 10,
+        backgroundColor: '#111827',
+        borderWidth: 1,
+        borderColor: '#1f2937',
+        alignItems: 'center',
+    },
+    trigger: {
+        flex: 1,
+        paddingVertical: 8,
+        borderRadius: 10,
+        backgroundColor: '#111827',
+        borderWidth: 1,
+        borderColor: '#1f2937',
+        alignItems: 'center',
+    },
+    label: {
+        color: '#d1d5db',
+        fontSize: 12,
+        fontWeight: '700',
+    },
+    smallLabel: {
+        color: '#9ca3af',
+        fontSize: 11,
+        marginTop: 4,
+        textAlign: 'center',
+    },
+    midRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+    },
+    centerCluster: {
+        alignItems: 'center',
+        gap: 6,
+    },
+    smallKey: {
+        paddingVertical: 6,
+        paddingHorizontal: 10,
+        borderRadius: 8,
+        backgroundColor: '#111827',
+        borderWidth: 1,
+        borderColor: '#1f2937',
+    },
+    faceCluster: {
+        alignItems: 'center',
+        gap: 4,
+    },
+    faceRow: {
+        flexDirection: 'row',
+        gap: 8,
+        justifyContent: 'center',
+    },
+    faceButton: {
+        width: 42,
+        height: 42,
+        borderRadius: 21,
+        backgroundColor: '#162032',
+        borderWidth: 1,
+        borderColor: '#1f2a3d',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    faceText: {
+        color: '#e5e7eb',
+        fontWeight: '800',
+    },
+    faceActive: {
+        backgroundColor: '#0ea5e9',
+        borderColor: '#38bdf8',
+        shadowColor: '#38bdf8',
+        shadowOpacity: 0.6,
+        shadowRadius: 6,
+    },
+    stickZone: {
+        width: 96,
+        alignItems: 'center',
+        gap: 6,
+    },
+    stickRing: {
+        width: 84,
+        height: 84,
+        borderRadius: 42,
+        borderWidth: 1,
+        borderColor: '#1f2937',
+        backgroundColor: '#0c1426',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stick: {
+        width: 38,
+        height: 38,
+        borderRadius: 19,
+        backgroundColor: '#1f2937',
+        borderWidth: 2,
+        borderColor: '#111827',
+    },
+    bottomRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 12,
+    },
+    dpad: {
+        width: 120,
+        height: 120,
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+    },
+    dpadKey: {
+        position: 'absolute',
+        backgroundColor: '#111827',
+        borderColor: '#1f2937',
+        borderWidth: 1,
+        borderRadius: 6,
+    },
+    dpadVertical: {
+        width: 28,
+        height: 46,
+    },
+    dpadHorizontal: {
+        width: 46,
+        height: 28,
+    },
+    active: {
+        borderColor: '#22d3ee',
+        backgroundColor: '#0ea5e9',
+        shadowColor: '#22d3ee',
+        shadowOpacity: 0.5,
+        shadowRadius: 4,
+    },
+    dpadUp: { top: 6, left: 46 },
+    dpadDown: { bottom: 6, left: 46 },
+    dpadLeft: { left: 6, top: 46 },
+    dpadRight: { right: 6, top: 46 },
+    axesGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as GamepadBridge } from './GamepadBridge';
+export { default as GamepadDebug } from './GamepadDebug';
+export { default as useGamepad } from './useGamepad';
+export * from './types';

package/dist/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGamepad = exports.GamepadDebug = exports.GamepadBridge = void 0;
+var GamepadBridge_1 = require("./GamepadBridge");
+Object.defineProperty(exports, "GamepadBridge", { enumerable: true, get: function () { return __importDefault(GamepadBridge_1).default; } });
+var GamepadDebug_1 = require("./GamepadDebug");
+Object.defineProperty(exports, "GamepadDebug", { enumerable: true, get: function () { return __importDefault(GamepadDebug_1).default; } });
+var useGamepad_1 = require("./useGamepad");
+Object.defineProperty(exports, "useGamepad", { enumerable: true, get: function () { return __importDefault(useGamepad_1).default; } });
+__exportStar(require("./types"), exports);

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+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 DpadEvent = {
+    type: 'dpad';
+    key: DpadKey;
+    pressed: boolean;
+};
+export type ButtonEvent = {
+    type: 'button';
+    button: GamepadButtonName;
+    index: number;
+    pressed: boolean;
+    value: number;
+};
+export type AxisEvent = {
+    type: 'axis';
+    axis: StickAxisName;
+    index: number;
+    value: number;
+};
+export type StatusEvent = {
+    type: 'status';
+    state: 'connected' | 'disconnected';
+};
+export type GamepadMessage = DpadEvent | ButtonEvent | AxisEvent | StatusEvent;

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/useGamepad.d.ts

@@ -0,0 +1,18 @@
+import { type JSX } from 'react';
+import type { AxisEvent, ButtonEvent, DpadEvent, GamepadButtonName, StickAxisName, StatusEvent } from './types';
+type Options = {
+    enabled?: boolean;
+    axisThreshold?: number;
+    onButton?: (event: ButtonEvent) => void;
+    onAxis?: (event: AxisEvent) => void;
+    onDpad?: (event: DpadEvent) => void;
+    onStatus?: (event: StatusEvent) => void;
+};
+type Return = {
+    pressedButtons: Set<GamepadButtonName>;
+    axes: Partial<Record<StickAxisName, number>>;
+    isPressed: (key: GamepadButtonName) => boolean;
+    bridge: JSX.Element | null;
+};
+export default function useGamepad({ enabled, axisThreshold, onButton, onAxis, onDpad, onStatus, }?: Options): Return;
+export {};

package/dist/useGamepad.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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, } = {}) {
+    const [pressedButtons, setPressedButtons] = (0, react_1.useState)(new Set());
+    const pressedRef = (0, react_1.useRef)(new Set());
+    const [axes, setAxes] = (0, react_1.useState)({
+        leftX: 0,
+        leftY: 0,
+        rightX: 0,
+        rightY: 0,
+    });
+    (0, react_1.useEffect)(() => {
+        pressedRef.current = pressedButtons;
+    }, [pressedButtons]);
+    const handleButton = (0, react_1.useCallback)((event) => {
+        const next = new Set(pressedRef.current);
+        if (event.pressed) {
+            next.add(event.button);
+        }
+        else {
+            next.delete(event.button);
+        }
+        pressedRef.current = next;
+        setPressedButtons(next);
+        onButton === null || onButton === void 0 ? void 0 : onButton(event);
+    }, [onButton]);
+    const handleAxis = (0, react_1.useCallback)((event) => {
+        setAxes((prev) => ({ ...prev, [event.axis]: event.value }));
+        onAxis === null || onAxis === void 0 ? void 0 : onAxis(event);
+    }, [onAxis]);
+    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());
+        }
+        if (!enabled) {
+            setAxes({ leftX: 0, leftY: 0, rightX: 0, rightY: 0 });
+        }
+    }, [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]);
+    const isPressed = (0, react_1.useCallback)((key) => pressedRef.current.has(key), []);
+    return { pressedButtons, axes, isPressed, bridge };
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "react-native-earl-gamepad",
+    "version": "0.1.0",
+    "description": "React Native gamepad bridge via WebView (buttons, sticks, d-pad, status).",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsc -p .",
+        "clean": "rimraf dist"
+    },
+    "peerDependencies": {
+        "react": ">=18",
+        "react-native": ">=0.72",
+        "react-native-webview": ">=13"
+    },
+    "devDependencies": {
+        "@types/react": "^19.0.0",
+        "react": "^19.0.0",
+        "react-native": "^0.81.5",
+        "react-native-webview": "^13.12.2",
+        "typescript": "^5.3.3"
+    },
+    "keywords": [
+        "react-native",
+        "gamepad",
+        "webview",
+        "controller"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/earlo/react-native-earl-gamepad.git"
+    },
+    "bugs": {
+        "url": "https://github.com/earlo/react-native-earl-gamepad/issues"
+    },
+    "homepage": "https://github.com/earlo/react-native-earl-gamepad#readme",
+    "author": "Ordovez, Earl Romeo",
+    "license": "MIT"
+}