Add webViewRef to YoutubeIframe

index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
-import {WebViewProps} from 'react-native-webview';
+import WebView, {WebViewProps} from 'react-native-webview';
 
 export enum PLAYER_STATES {
   ENDED = 'ended',
@@ -100,6 +100,10 @@ export interface YoutubeIframeProps {
    * Props that are supplied to the underlying webview (react-native-webview). A full list of props can be found [here](https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#props-index)
    */
   webViewProps?: WebViewProps;
+  /**
+   * A React ref object that provides direct access to the underlying WebView instance.
+   */
+  webViewRef?: React.RefObject<WebView>;
   /**
    * This sets the suggested playback rate for the current video. If the playback rate changes, it will only change for the video that is already cued or being played.
    */

package.json

@@ -2,7 +2,7 @@
   "name": "react-native-youtube-iframe",
   "version": "2.3.0",
   "description": "A simple wrapper around the youtube iframe js API for react native",
-  "main": "dist/index.js",
+  "main": "src/index.js",
   "types": "index.d.ts",
   "scripts": {
     "lint": "eslint src",

src/YoutubeIframe.js

@@ -29,6 +29,7 @@ const YoutubeIframe = (props, ref) => {
     mute = false,
     volume = 100,
     viewContainerStyle,
+    webViewRef,
     webViewStyle,
     webViewProps,
     useLocalHTML,
@@ -52,17 +53,19 @@ const YoutubeIframe = (props, ref) => {
   const lastPlayListRef = useRef(playList);
   const initialPlayerParamsRef = useRef(initialPlayerParams || {});
 
-  const webViewRef = useRef(null);
+  const internalWebViewRef = useRef(null);
   const eventEmitter = useRef(new EventEmitter());
 
+  const wbRef = webViewRef || internalWebViewRef;
+
   const sendPostMessage = useCallback(
     (eventName, meta) => {
       if (!playerReady) {
         return;
       }
 
       const message = JSON.stringify({eventName, meta});
-      webViewRef.current.postMessage(message);
+      wbRef.current.postMessage(message);
     },
     [playerReady],
   );
@@ -71,53 +74,53 @@ const YoutubeIframe = (props, ref) => {
     ref,
     () => ({
       getVideoUrl: () => {
-        webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.getVideoUrlScript);
+        wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.getVideoUrlScript);
         return new Promise(resolve => {
           eventEmitter.current.once('getVideoUrl', resolve);
         });
       },
       getDuration: () => {
-        webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.durationScript);
+        wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.durationScript);
         return new Promise(resolve => {
           eventEmitter.current.once('getDuration', resolve);
         });
       },
       getCurrentTime: () => {
-        webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.currentTimeScript);
+        wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.currentTimeScript);
         return new Promise(resolve => {
           eventEmitter.current.once('getCurrentTime', resolve);
         });
       },
       isMuted: () => {
-        webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.isMutedScript);
+        wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.isMutedScript);
         return new Promise(resolve => {
           eventEmitter.current.once('isMuted', resolve);
         });
       },
       getVolume: () => {
-        webViewRef.current.injectJavaScript(PLAYER_FUNCTIONS.getVolumeScript);
+        wbRef.current.injectJavaScript(PLAYER_FUNCTIONS.getVolumeScript);
         return new Promise(resolve => {
           eventEmitter.current.once('getVolume', resolve);
         });
       },
       getPlaybackRate: () => {
-        webViewRef.current.injectJavaScript(
+        wbRef.current.injectJavaScript(
           PLAYER_FUNCTIONS.getPlaybackRateScript,
         );
         return new Promise(resolve => {
           eventEmitter.current.once('getPlaybackRate', resolve);
         });
       },
       getAvailablePlaybackRates: () => {
-        webViewRef.current.injectJavaScript(
+        wbRef.current.injectJavaScript(
           PLAYER_FUNCTIONS.getAvailablePlaybackRatesScript,
         );
         return new Promise(resolve => {
           eventEmitter.current.once('getAvailablePlaybackRates', resolve);
         });
       },
       seekTo: (seconds, allowSeekAhead) => {
-        webViewRef.current.injectJavaScript(
+        wbRef.current.injectJavaScript(
           PLAYER_FUNCTIONS.seekToScript(seconds, allowSeekAhead),
         );
       },
@@ -158,7 +161,7 @@ const YoutubeIframe = (props, ref) => {
 
     lastVideoIdRef.current = videoId;
 
-    webViewRef.current.injectJavaScript(
+    wbRef.current.injectJavaScript(
       PLAYER_FUNCTIONS.loadVideoById(videoId, play),
     );
   }, [videoId, play, playerReady]);
@@ -177,7 +180,7 @@ const YoutubeIframe = (props, ref) => {
 
     lastPlayListRef.current = playList;
 
-    webViewRef.current.injectJavaScript(
+    wbRef.current.injectJavaScript(
       PLAYER_FUNCTIONS.loadPlaylist(playList, playListStartIndex, play),
     );
   }, [playList, play, playListStartIndex, playerReady]);
@@ -300,7 +303,7 @@ const YoutubeIframe = (props, ref) => {
 
         // add props that should not be allowed to be overridden below
         source={source}
-        ref={webViewRef}
+        ref={wbRef}
         onMessage={onWebMessage}
       />
     </View>