react-native-earl-gamepad 0.4.0 → 0.5.0

package/README.md

@@ -16,9 +16,9 @@ WebView-based gamepad bridge for React Native. Polls `navigator.getGamepads()` i
 ## Install
 
 ```sh
-npm install react-native-earl-gamepad react-native-webview
+npm install react-native-earl-gamepad
 # or
-yarn add react-native-earl-gamepad react-native-webview
+yarn add react-native-earl-gamepad
 ```
 
 ## Usage
@@ -153,6 +153,11 @@ npm install
 npm run build
 ```
 
+## 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

package/dist/GamepadBridge.js

@@ -100,7 +100,19 @@ 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) => {
@@ -123,5 +135,5 @@ 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/dist/GamepadDebug.js

@@ -129,7 +129,8 @@ function ControllerVisual({ pressed, axis, value }) {
                                 ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                         styles.psRollInIn,
                                         { backgroundColor: stickInner(leftMag) },
-                                        pressed("ls") && styles.psStickCenterPressed,
+                                        pressed("ls") &&
+                                            styles.psStickCenterPressed,
                                     ] }) }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                 styles.psPsButton,
                                 pressed("home") && styles.psActiveButton,
@@ -149,7 +150,8 @@ function ControllerVisual({ pressed, axis, value }) {
                                 ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                         styles.psRollInIn,
                                         { backgroundColor: stickInner(rightMag) },
-                                        pressed("rs") && styles.psStickCenterPressed,
+                                        pressed("rs") &&
+                                            styles.psStickCenterPressed,
                                     ] }) }) })] })] }) }));
 }
 function GamepadDebug({ enabled = true, axisThreshold = 0.15, }) {

package/package.json

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