Merge pull request #500 from DataDog/louiszawadzki/fix-webview-ref

Forward webview ref

packages/react-native-webview/src/__tests__/WebviewDatadog.test.tsx

@@ -4,6 +4,7 @@
  * Copyright 2016-Present Datadog, Inc.
  */
 import { fireEvent, render } from '@testing-library/react-native';
+import type { WebView as RNWebView } from 'react-native-webview';
 import { NativeModules } from 'react-native';
 import React from 'react';
 
@@ -51,4 +52,13 @@ describe('WebView', () => {
             DdMessage
         );
     });
+    it('forwards ref to the actual RN Webview component', async () => {
+        const ref = React.createRef<RNWebView>();
+
+        const { findByTestId } = render(
+            <WebView testID="webView" allowedHosts={[]} ref={ref} />
+        );
+        await findByTestId('webView');
+        expect(ref.current?.injectJavaScript).toBeDefined();
+    });
 });

packages/react-native-webview/src/index.tsx

@@ -7,7 +7,7 @@ import type { WebViewMessageEvent, WebViewProps } from 'react-native-webview';
 import { WebView as RNWebView } from 'react-native-webview';
 import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
-import React, { useCallback } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 
 import {
     DATADOG_MESSAGE_PREFIX,
@@ -19,7 +19,7 @@ type Props = WebViewProps & {
     injectedJavaScriptBeforeContentLoaded?: string;
 };
 
-export const WebView = (props: Props) => {
+const WebViewComponent = (props: Props, ref: React.Ref<RNWebView<Props>>) => {
     const userDefinedOnMessage = props.onMessage;
     const onMessage = useCallback(
         (event: WebViewMessageEvent) => {
@@ -42,10 +42,13 @@ export const WebView = (props: Props) => {
                 props.allowedHosts,
                 props.injectedJavaScriptBeforeContentLoaded
             )}
+            ref={ref}
         />
     );
 };
 
+export const WebView = forwardRef(WebViewComponent);
+
 export default WebView;
 
 /**