react-native-earl-gamepad 0.5.1 → 0.6.0

package/README.md

@@ -1,11 +1,24 @@
 # 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.
 
 -   Components: `GamepadBridge`, `useGamepad`, and `GamepadDebug`.
 -   Deadzone handling (default `0.15`) with auto-clear on disconnect.
 -   Typed events for buttons, axes, d-pad, and status.
 
+### 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
 
 -   React Native `>=0.72`
@@ -119,7 +132,7 @@ 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.
 
 ```tsx
 import { GamepadDebug } from "react-native-earl-gamepad";
@@ -129,9 +142,9 @@ export function DebugScreen() {
 }
 ```
 
-![Gamepad visual idle](https://github.com/user-attachments/assets/dfebd8c5-7d9a-42c7-802b-2773ec8c8ae9)
-
+![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)
 
 ## API
 
@@ -160,6 +173,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`
 
@@ -197,13 +213,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, 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,9 @@ type Props = {
     onButton?: (event: ButtonEvent) => void;
     onAxis?: (event: AxisEvent) => void;
     onStatus?: (event: StatusEvent) => void;
+    onInfo?: (event: InfoEvent) => 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, vibrationRequest, style, }: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/GamepadBridge.js

@@ -20,10 +20,69 @@ const buildBridgeHtml = (axisThreshold) => `
   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;
 
   function poll(){
     const pads = (navigator.getGamepads && navigator.getGamepads()) || [];
     const gp = pads[0];
+    sendInfo(gp);
     if (gp) {
       // Buttons
       gp.buttons?.forEach((btn, index) => {
@@ -52,6 +111,8 @@ const buildBridgeHtml = (axisThreshold) => `
         prevAxes[index] = value;
       });
     } else {
+      // If no pad, send a single disconnected info payload
+      sendInfo(null);
       if (prevButtons.length) {
         prevButtons.forEach((btn, index) => {
           if (btn?.pressed) {
@@ -99,7 +160,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, 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 +174,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 +204,9 @@ 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);
+            }
         }
         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.8 }] }
+        : 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,
@@ -155,7 +160,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 +169,45 @@ 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 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 })] }), (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))) })] })] })] }) }));
 }
 const styles = react_native_1.StyleSheet.create({
     container: {
@@ -279,6 +323,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 +389,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 +496,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 +506,7 @@ const styles = react_native_1.StyleSheet.create({
         width: 150,
         height: 80,
         backgroundColor: "#333",
-        marginLeft: 147,
+        marginLeft: 170,
         borderRadius: 7,
         position: "absolute",
         zIndex: 10,
@@ -375,7 +522,7 @@ const styles = react_native_1.StyleSheet.create({
         height: 25,
         position: "absolute",
         backgroundColor: "#95a5a6",
-        marginLeft: 125,
+        marginLeft: 148,
         marginTop: 85,
         borderRadius: 5,
         zIndex: 10,
@@ -390,7 +537,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 +552,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 +573,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 +595,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 +661,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,41 @@
-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" | `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 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;

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,20 @@ 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);
     (0, react_1.useEffect)(() => {
         pressedRef.current = pressedButtons;
     }, [pressedButtons]);
@@ -43,6 +57,34 @@ 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]);
+    const handleInfo = (0, react_1.useCallback)((event) => {
+        setInfo(event);
+        onInfo === null || onInfo === void 0 ? void 0 : onInfo(event);
+    }, [onInfo]);
+    const handleStatus = (0, react_1.useCallback)((event) => {
+        if (event.state === "disconnected") {
+            setInfo((prev) => ({
+                ...prev,
+                connected: false,
+            }));
+        }
+        onStatus === null || onStatus === void 0 ? void 0 : onStatus(event);
+    }, [onStatus]);
+    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 && pressedRef.current.size) {
             pressedRef.current = new Set();
@@ -51,9 +93,31 @@ function useGamepad({ enabled = true, axisThreshold = 0.15, onButton, onAxis, on
         if (!enabled) {
             setAxes({ leftX: 0, leftY: 0, rightX: 0, rightY: 0 });
             setButtonValues({});
+            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]);
+    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,
+        axisThreshold,
+        handleAxis,
+        handleButton,
+        handleDpad,
+        handleInfo,
+        handleStatus,
+        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.1",
+	"version": "0.6.0",
 	"description": "React Native gamepad bridge via WebView (buttons, sticks, d-pad, status).",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",