fix: requireNativeComponent missing in react-native-web (#3958)

Author: lucas-zimerman

CHANGELOG.md

@@ -12,6 +12,7 @@
   - Fixes possible missing TTID measurements and spans
 - Fix crash when passing array as data to `Sentry.addBreadcrumb({ data: [] })` ([#4021](https://github.com/getsentry/sentry-react-native/pull/4021))
   - The expected `data` type is plain JS object, otherwise the data might be lost.
+- Fix requireNativeComponent missing in react-native-web #3823 ([#3958](https://github.com/getsentry/sentry-react-native/pull/3958))
 
 ### Dependencies
 

src/js/tracing/timetodisplaynative.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { HostComponent} from 'react-native';
-import { requireNativeComponent, UIManager, View } from 'react-native';
+import type { HostComponent } from 'react-native';
+import { UIManager, View } from 'react-native';
 
+import { ReactNativeLibraries } from '../utils/rnlibraries';
 import type { RNSentryOnDrawReporterProps } from './timetodisplaynative.types';
 
 const RNSentryOnDrawReporterClass = 'RNSentryOnDrawReporter';
@@ -28,8 +29,8 @@ let RNSentryOnDrawReporter: HostComponent<RNSentryOnDrawReporterProps> | typeof
  */
 export const getRNSentryOnDrawReporter = (): typeof RNSentryOnDrawReporter => {
   if (!RNSentryOnDrawReporter) {
-    RNSentryOnDrawReporter = nativeComponentExists
-      ? requireNativeComponent(RNSentryOnDrawReporterClass)
+    RNSentryOnDrawReporter = nativeComponentExists && ReactNativeLibraries.ReactNative?.requireNativeComponent
+      ? ReactNativeLibraries.ReactNative.requireNativeComponent(RNSentryOnDrawReporterClass)
       : RNSentryOnDrawReporterNoop;
   }
   return RNSentryOnDrawReporter;

src/js/utils/rnlibraries.ts

@@ -34,4 +34,10 @@ export const ReactNativeLibraries: Required<ReactNativeLibrariesInterface> = {
     version: Platform.constants?.reactNativeVersion,
   },
   TurboModuleRegistry,
+  ReactNative: {
+    requireNativeComponent: <T>(viewName: string): ReactNative.HostComponent<T> => {
+      const { requireNativeComponent } = require('react-native');
+      return requireNativeComponent(viewName);
+    },
+  },
 };

src/js/utils/rnlibrariesinterface.ts

@@ -25,4 +25,7 @@ export interface ReactNativeLibrariesInterface {
   Promise?: typeof Promise;
   ReactNativeVersion?: ReactNative.ReactNativeVersion;
   TurboModuleRegistry?: ReactNative.TurboModuleRegistry;
+  ReactNative?: {
+    requireNativeComponent?: <T>(viewName: string) => ReactNative.HostComponent<T>;
+  };
 }

src/js/vendor/react-native/index.ts

@@ -65,6 +65,11 @@ export type TurboModuleRegistry = {
   getEnforcing<T extends TurboModule>(name: string): T;
 };
 
+// Adapted from https://github.com/facebook/react-native/blob/3f8340975b35767b192e3118f05d2b039676052e/packages/react-native/types/public/ReactNativeTypes.d.ts#L137
+export interface HostComponent<P> extends Pick<React.ComponentClass<P>, Exclude<keyof React.ComponentClass<P>, 'new'>> {
+  new (props: P, context?: any): React.Component<P> & Readonly<unknown>;
+}
+
 // Adapted from https://github.com/facebook/react-native/blob/575ab7862553d7ad7bc753951ed19dcd50d59b95/packages/react-native/Libraries/Utilities/Platform.d.ts#L23-L28
 export type ReactNativeVersion = {
   version: {

test/tracing/timetodisplaynative.web.test.tsx

@@ -0,0 +1,28 @@
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+  RN.UIManager = {};
+  return RN;
+});
+
+jest.mock('../../src/js/utils/rnlibraries', () => {
+  const webLibrary = jest.requireActual('../../src/js/utils/rnlibraries.web');
+  return {
+    ...webLibrary,
+  };
+});
+
+import { getRNSentryOnDrawReporter } from '../../src/js/tracing/timetodisplaynative';
+import { ReactNativeLibraries } from '../../src/js/utils/rnlibraries';
+
+describe('timetodisplaynative', () => {
+  test('requireNativeComponent to be undefined', () => {
+    expect(ReactNativeLibraries).toBeDefined();
+    expect(ReactNativeLibraries.ReactNative?.requireNativeComponent).not.toBeDefined();
+  });
+
+  test('getRNSentryOnDrawReporter returns Noop', () => {
+    const drawReported = getRNSentryOnDrawReporter();
+
+    expect(drawReported.name).toBe('RNSentryOnDrawReporterNoop');
+    });
+});