react-native-earl-gamepad 0.4.1 → 0.5.1

package/README.md

@@ -45,6 +45,50 @@ export function Controls() {
 }
 ```
 
+### Control Logic Example
+
+Here is an example of mapping D-pad events to movement vectors
+
+```tsx
+import { useState, useCallback } from "react";
+import { GamepadBridge, type DpadEvent } from "react-native-earl-gamepad";
+type MoveKey = keyof typeof MOVES;
+
+const MOVES: Record<string, [number, number]> = {
+	up: [1, 0],
+	down: [-1, 0],
+	right: [0, 1],
+	left: [0, -1],
+	stop: [0, 0],
+
+	axis_left_x_neg: [0, -1],
+	axis_left_x_pos: [0, 1],
+	axis_left_y_pos: [1, 0],
+	axis_left_y_neg: [-1, 0],
+
+	// add more
+}; // example only for the control logic
+
+export function Controls() {
+	const [active, setActive] = useState<string | null>(null);
+
+	const handleDpad = useCallback(
+		(event: DpadEvent) => {
+			const key = event.key as MoveKey;
+			if (event.pressed) {
+				if (active !== key) {
+					console.log("Dpad press", key);
+				}
+			} else if (active === key) {
+				// do something
+			}
+		},
+		[active]
+	);
+	return <GamepadBridge enabled onDpad={handleDpad} axisThreshold={0.15} />;
+}
+```
+
 ### Hook for stateful consumption
 
 `useGamepad` keeps pressed state and axes for you. You still need to render the provided `bridge` element once.

package/dist/GamepadBridge.d.ts

@@ -1,5 +1,5 @@
-import { StyleProp, ViewStyle } from 'react-native';
-import type { AxisEvent, ButtonEvent, DpadEvent, StatusEvent } from './types';
+import { StyleProp, ViewStyle } from "react-native";
+import type { AxisEvent, ButtonEvent, DpadEvent, StatusEvent } from "./types";
 type Props = {
     enabled?: boolean;
     axisThreshold?: number;

package/dist/GamepadBridge.js

@@ -100,22 +100,34 @@ const buildBridgeHtml = (axisThreshold) => `
 </script>
 </body></html>`;
 function GamepadBridge({ enabled = true, axisThreshold = 0.15, onDpad, onButton, onAxis, onStatus, style, }) {
+    const webviewRef = (0, react_1.useRef)(null);
     const html = (0, react_1.useMemo)(() => buildBridgeHtml(axisThreshold), [axisThreshold]);
+    const focusBridge = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        // On Android controllers, ensure the WebView is focusable so DPAD events feed navigator.getGamepads
+        const node = webviewRef.current;
+        (_a = node === null || node === void 0 ? void 0 : node.setNativeProps) === null || _a === void 0 ? void 0 : _a.call(node, { focusable: true, focusableInTouchMode: true });
+        (_b = node === null || node === void 0 ? void 0 : node.requestFocus) === null || _b === void 0 ? void 0 : _b.call(node);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (enabled)
+            focusBridge();
+    }, [enabled, focusBridge]);
     if (!enabled)
         return null;
     const handleMessage = (event) => {
         try {
             const data = JSON.parse(event.nativeEvent.data);
-            if (data.type === 'dpad') {
+            if (data.type === "dpad") {
                 onDpad === null || onDpad === void 0 ? void 0 : onDpad(data);
             }
-            else if (data.type === 'button') {
+            else if (data.type === "button") {
                 onButton === null || onButton === void 0 ? void 0 : onButton(data);
             }
-            else if (data.type === 'axis') {
+            else if (data.type === "axis") {
                 onAxis === null || onAxis === void 0 ? void 0 : onAxis(data);
             }
-            else if (data.type === 'status') {
+            else if (data.type === "status") {
                 onStatus === null || onStatus === void 0 ? void 0 : onStatus(data);
             }
         }
@@ -123,5 +135,10 @@ function GamepadBridge({ enabled = true, axisThreshold = 0.15, onDpad, onButton,
             // 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 } }));
+    return ((0, jsx_runtime_1.jsx)(react_native_webview_1.default, { ref: webviewRef, source: { html }, originWhitelist: ["*"], onMessage: handleMessage, javaScriptEnabled: true, onLoad: focusBridge, onLayout: focusBridge, onTouchStart: focusBridge, style: style !== null && style !== void 0 ? style : {
+            width: 1,
+            height: 1,
+            position: "absolute",
+            opacity: 0,
+        } }));
 }

package/package.json

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