fix: android newArch & app to webview send message

.github/actions/setup/action.yml

@@ -24,11 +24,9 @@ runs:
           ~/.bun/install/cache
         key: ${{ runner.os }}-bun-${{ inputs.working-directory }}-${{ hashFiles(format('{0}/bun.lock', inputs.working-directory)) }}-${{ hashFiles(format('{0}/package.json', inputs.working-directory)) }}
         restore-keys: |
-          ${{ runner.os }}-bun-${{ inputs.working-directory }}-${{ hashFiles(format('{0}/bun.lock', inputs.working-directory)) }}
-          ${{ runner.os }}-bun-${{ inputs.working-directory }}-
+          ${{ runner.os }}-bun-${{ inputs.working-directory }}-${{ hashFiles(format('{0}/bun.lock', inputs.working-directory)) }}-
 
     - name: Install dependencies
-      if: steps.bun-cache.outputs.cache-hit != 'true'
       run: bun install --frozen-lockfile
       working-directory: ${{ inputs.working-directory }}
       shell: bash

.gitignore

@@ -79,3 +79,7 @@ nitrogen/
 
 # build
 dist/
+
+# expo native
+example/ios/
+example/android/

example/package.json

@@ -4,8 +4,8 @@
   "main": "index.js",
   "scripts": {
     "start": "expo start --clear",
-    "android": "expo start --android --clear",
-    "ios": "expo start --ios --clear",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
     "web": "expo start --web --clear",
     "web:build": "expo export --platform web"
   },
@@ -17,11 +17,11 @@
     "react-dom": "19.0.0",
     "react-native": "0.79.3",
     "react-native-web": "~0.20.0",
-    "react-native-webview": "^13.15.0"
+    "react-native-webview": "13.13.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "react-native-builder-bob": "^0.40.11"
+    "react-native-builder-bob": "^0.40.12"
   },
   "private": true
 }

package.json

@@ -76,7 +76,7 @@
     "jest": "^29.7.0",
     "react": "19.0.0",
     "react-native": "0.79.3",
-    "react-native-builder-bob": "^0.40.11",
+    "react-native-builder-bob": "^0.40.12",
     "react-native-webview": "^13.15.0",
     "typescript": "^5.8.3"
   },

src/YoutubePlayer.tsx

@@ -1,5 +1,5 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Dimensions, StyleSheet } from 'react-native';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { type DataDetectorTypes, Dimensions, StyleSheet } from 'react-native';
 import WebView, { type WebViewMessageEvent } from 'react-native-webview';
 import YoutubePlayerWrapper from './YoutubePlayerWrapper';
 import useCreateLocalPlayerHtml from './hooks/useCreateLocalPlayerHtml';
@@ -43,6 +43,8 @@ const YoutubePlayer = forwardRef<PlayerControls, YoutubePlayerProps>(
     const commandIdRef = useRef(0);
     const pendingCommandsRef = useRef<Map<string, (result: unknown) => void>>(new Map());
 
+    const dataDetectorTypes = useMemo(() => ['none'] as DataDetectorTypes[], []);
+
     const createPlayerHTML = useCreateLocalPlayerHtml({ videoId, ...playerVars });
 
     const handleMessage = useCallback(
@@ -132,6 +134,7 @@ const YoutubePlayer = forwardRef<PlayerControls, YoutubePlayerProps>(
           if (needsResult && messageId) {
             const timeout = setTimeout(() => {
               pendingCommandsRef.current.delete(messageId);
+              console.warn('Command timeout:', command, messageId);
               resolve(null);
             }, 5000);
 
@@ -141,15 +144,19 @@ const YoutubePlayer = forwardRef<PlayerControls, YoutubePlayerProps>(
             });
           }
 
-          const message = JSON.stringify({
+          const commandData = {
             command,
             args,
-            id: messageId,
-          });
+            ...(messageId && { id: messageId }),
+          };
+
+          const injectedJS = /*js*/ `
+            window.__execCommand && window.__execCommand(${JSON.stringify(commandData)}); true;
+          `;
 
-          console.log('sendCommand', message);
+          console.log('Sending command:', command, injectedJS);
 
-          webViewRef.current?.postMessage(message);
+          webViewRef.current?.injectJavaScript(injectedJS);
 
           if (!needsResult) {
             resolve(null);
@@ -237,7 +244,7 @@ const YoutubePlayer = forwardRef<PlayerControls, YoutubePlayerProps>(
           }}
           // iOS specific props
           allowsLinkPreview={false}
-          dataDetectorTypes="none"
+          dataDetectorTypes={dataDetectorTypes}
           // Android specific props
           mixedContentMode="compatibility"
           thirdPartyCookiesEnabled={false}

src/YoutubePlayerWrapper.tsx

@@ -9,7 +9,9 @@ type YoutubePlayerWrapperProps = {
 };
 
 function YoutubePlayerWrapper({ children, width, height, style }: YoutubePlayerWrapperProps) {
-  return <View style={[styles.container, { width, height }, style]}>{children}</View>;
+  const safeStyles = StyleSheet.flatten([styles.container, { width, height }, style]);
+
+  return <View style={safeStyles}>{children}</View>;
 }
 
 const styles = StyleSheet.create({

src/hooks/useCreateLocalPlayerHtml.ts

@@ -72,6 +72,8 @@ const useCreateLocalPlayerHtml = ({
             var progressInterval;
             var isDestroyed = false;
 
+            ${youtubeIframeScripts.receiveMessage}
+
             function cleanup() {
               isDestroyed = true;
               if (progressInterval) {

src/hooks/youtubeIframeScripts.ts

@@ -163,9 +163,72 @@ const onAutoplayBlocked = /* js */ `
   }
 `;
 
+const receiveMessage = /* js */ `
+  window.__execCommand = function(commandData) {
+    if (isDestroyed) {
+      return;
+    }
+
+    try {
+      const { command, args = [], id } = commandData;
+
+      if (window.playerCommands && typeof window.playerCommands[command] === 'function') {
+        const result = window.playerCommands[command](...args);
+
+        if (result instanceof Promise) {
+          return result
+            .then(r =>
+              id &&
+              window.ReactNativeWebView?.postMessage(
+                JSON.stringify({ type: 'commandResult', id, result: r })
+              )
+            )
+            .catch(err =>
+              id &&
+              window.ReactNativeWebView?.postMessage(
+                JSON.stringify({
+                  type: 'error',
+                  id,
+                  error: { code: -5, message: err?.message || String(err) }
+                })
+              )
+            );
+        }
+
+        if (id && window.ReactNativeWebView) {
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'commandResult',
+            id: id,
+            result: result
+          }));
+        }
+
+        return result;
+      } else {
+        if (id && window.ReactNativeWebView) {
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'error',
+            id: id,
+            error: { code: -4, message: 'Command not found: ' + command }
+          }));
+        }
+      }
+    } catch (error) {
+      if (commandData.id && window.ReactNativeWebView) {
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          type: 'error',
+          id: commandData.id,
+          error: { code: -5, message: 'Execution failed: ' + error.message }
+        }));
+      }
+    }
+  };
+`;
+
 export const youtubeIframeScripts = {
   startProgressTracking,
   stopProgressTracking,
+  receiveMessage,
   onPlayerReady,
   onPlayerStateChange,
   onPlayerError,