fix(react-native): add missing commonjs support (#1075)

packages/react-native-sdk/.gitignore

@@ -63,5 +63,3 @@ buck-out/
 # Ruby / CocoaPods
 /ios/Pods/
 /vendor/bundle/
-
-version.ts

packages/react-native-sdk/__tests__/components/CallParticipantsGrid.test.tsx

@@ -77,19 +77,19 @@ describe('CallParticipantsGrid', () => {
       }),
       mockParticipant({
         publishedTracks: [SfuModels.TrackType.AUDIO],
-        videoStream: null,
+        videoStream: undefined,
         sessionId: P_IDS.REMOTE_1,
         userId: P_IDS.REMOTE_1,
       }),
       mockParticipant({
         publishedTracks: [SfuModels.TrackType.VIDEO],
-        audioStream: null,
+        audioStream: undefined,
         sessionId: P_IDS.REMOTE_2,
         userId: P_IDS.REMOTE_2,
       }),
       mockParticipant({
         publishedTracks: [SfuModels.TrackType.VIDEO],
-        audioStream: null,
+        audioStream: undefined,
         sessionId: P_IDS.REMOTE_3,
         userId: P_IDS.REMOTE_3,
       }),

packages/react-native-sdk/__tests__/components/CallParticipantsSpotlight.test.tsx

@@ -39,6 +39,7 @@ describe('CallParticipantsSpotlight', () => {
         sessionId: P_IDS.REMOTE_1,
         userId: P_IDS.REMOTE_1,
         screenShareStream: {
+          // @ts-expect-error due to dom event type not being compatible with RN
           toURL: () => 'screen-share-url',
         },
       }),
@@ -77,6 +78,7 @@ describe('CallParticipantsSpotlight', () => {
         sessionId: P_IDS.REMOTE_1,
         userId: P_IDS.REMOTE_1,
         screenShareStream: {
+          // @ts-expect-error due to dom event type not being compatible with RN
           toURL: () => 'screen-share-url',
         },
       }),

packages/react-native-sdk/__tests__/components/ParticipantView.test.tsx

@@ -56,6 +56,7 @@ describe('Participant', () => {
       image: undefined,
       publishedTracks: [SfuModels.TrackType.SCREEN_SHARE],
       screenShareStream: {
+        // @ts-expect-error due to dom event type not being compatible with RN
         toURL: () => 'test-url',
       },
     });

packages/react-native-sdk/__tests__/mocks/participant.ts

@@ -17,10 +17,12 @@ const mockParticipant = (
   publishedTracks: [SfuModels.TrackType.VIDEO],
   videoStream: {
     toURL: () => 'video-test-url',
+    // @ts-expect-error due to dom event type not being compatible with RN
     getVideoTracks: jest.fn(() => [trackMock]),
   },
   audioStream: {
     toURL: () => 'audio-test-url',
+    // @ts-expect-error due to dom event type not being compatible with RN
     getAudioTracks: jest.fn(() => [trackMock]),
   },
   roles: [],

packages/react-native-sdk/expo-config-plugin/tsconfig.json

@@ -1,8 +1,10 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "@tsconfig/node14/tsconfig.json",
   "compilerOptions": {
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "src",
+    "sourceMap": false,
+    "declaration": true
   },
   "include": ["./src"],
   "exclude": ["**/__mocks__/*", "**/__tests__/*"]

packages/react-native-sdk/jest-setup.ts

@@ -34,8 +34,8 @@ jest.mock('react-native-reanimated', () => {
 });
 
 // When mocking we implement only the needed navigator APIs, hence the suppression rule
-// @ts-ignore
 global.navigator = {
+  // @ts-expect-error due to dom typing incompatible with RN
   mediaDevices: {
     getUserMedia: jest.fn().mockResolvedValue(mockedMedia),
     enumerateDevices: jest.fn().mockResolvedValue(mockedDevices),

packages/react-native-sdk/jest.config.ts

@@ -9,8 +9,8 @@ const config: Config = {
   testPathIgnorePatterns: [
     '<rootDir>/__tests__/mocks/',
     '<rootDir>/__tests__/utils/',
-    '<rootDir>/dist/',
   ],
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
   transformIgnorePatterns: [
     // added as per the README in https://github.com/invertase/notifee/tree/main/packages/react-native
     'node_modules/(?!(jest-)?react-native|@react-native|@notifee)',

packages/react-native-sdk/package.json

@@ -2,8 +2,10 @@
   "name": "@stream-io/video-react-native-sdk",
   "version": "0.0.10",
   "packageManager": "[email protected]",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "dist/commonjs/index.js",
+  "module": "dist/module/index.js",
+  "react-native": "src/index.ts",
+  "types": "dist/typescript/index.d.ts",
   "description": "Stream Video SDK for React Native",
   "author": "https://getstream.io",
   "homepage": "https://github.com/GetStream/stream-video-js/tree/main/packages/react-native-sdk#readme",
@@ -13,18 +15,17 @@
     "clean": "rimraf dist && rimraf expo-config-plugin/dist",
     "start": "yarn copy-version && tsc --project tsconfig.json --watch",
     "build:expo-plugin": "rimraf plugin/dist && tsc --project expo-config-plugin/tsconfig.json",
-    "build": "yarn clean && yarn copy-version && tsc --project tsconfig.json && yarn build:expo-plugin",
+    "build": "yarn clean && yarn copy-version && bob build && yarn build:expo-plugin",
     "test:expo-plugin": "jest expo-config-plugin --coverage",
     "test": "jest --coverage && yarn test:expo-plugin",
-    "copy-version": "echo \"export const version = '$npm_package_version';\" > ./version.ts"
+    "copy-version": "echo \"export const version = '$npm_package_version';\" > ./src/version.ts"
   },
   "files": [
     "dist",
     "src",
     "android",
     "ios",
     "cpp",
-    "index.ts",
     "stream-video-react-native.podspec",
     "package.json",
     "app.plugin.js",
@@ -98,6 +99,7 @@
     "@stream-io/react-native-webrtc": "104.0.1",
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^12.1.2",
+    "@tsconfig/node14": "14.1.0",
     "@types/jest": "^29.5.1",
     "@types/lodash.merge": "^4",
     "@types/react": "18.0.26",
@@ -107,6 +109,7 @@
     "@types/rimraf": "^3.0.2",
     "jest": "^29.5.0",
     "react-native": "0.71.8",
+    "react-native-builder-bob": "^0.21.3",
     "react-native-callkeep": "4.3.11",
     "react-native-gesture-handler": "2.8.0",
     "react-native-incall-manager": "^4.0.0",
@@ -118,5 +121,14 @@
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
   }
 }

packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx

@@ -18,6 +18,7 @@ import {
 } from './JoinCallButton';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { useCallMediaStreamCleanup } from '../../../hooks/internal/useCallMediaStreamCleanup';
+import type { MediaStream } from '@stream-io/react-native-webrtc';
 
 /**
  * Props for the Lobby Component.
@@ -54,7 +55,9 @@ export const Lobby = ({
   const call = useCall();
   const session = useCallSession();
   const { t } = useI18n();
-  const localVideoStream = call?.camera.state.mediaStream;
+  const localVideoStream = call?.camera.state.mediaStream as unknown as
+    | MediaStream
+    | undefined;
   const participantsCount = session?.participants.length;
 
   useCallMediaStreamCleanup();
@@ -102,10 +105,10 @@ export const Lobby = ({
             ]}
           >
             <View style={styles.topView} />
-            {cameraStatus === 'enabled' ? (
+            {cameraStatus === 'enabled' && localVideoStream ? (
               <RTCView
                 mirror={true}
-                streamURL={localVideoStream?.toURL()}
+                streamURL={localVideoStream.toURL()}
                 objectFit="cover"
                 style={StyleSheet.absoluteFillObject}
               />

packages/react-native-sdk/src/components/Call/RingingCallContent/OutgoingCall.tsx

@@ -7,7 +7,7 @@ import {
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
-import { RTCView } from '@stream-io/react-native-webrtc';
+import { MediaStream, RTCView } from '@stream-io/react-native-webrtc';
 import { useTheme } from '../../../contexts/ThemeContext';
 import {
   OutgoingCallControls as DefaultOutgoingCallControls,
@@ -90,7 +90,9 @@ const Background = () => {
   const call = useCall();
   const { useCameraState } = useCallStateHooks();
   const { status } = useCameraState();
-  const localVideoStream = call?.camera.state.mediaStream;
+  const localVideoStream = call?.camera.state.mediaStream as unknown as
+    | MediaStream
+    | undefined;
 
   useCallMediaStreamCleanup();
 
@@ -114,7 +116,7 @@ const Background = () => {
       ]}
     >
       <RTCView
-        streamURL={localVideoStream?.toURL()}
+        streamURL={localVideoStream.toURL()}
         zOrder={Z_INDEX.IN_BACK}
         style={StyleSheet.absoluteFill}
         mirror

packages/react-native-sdk/src/components/Participant/ParticipantView/VideoRenderer.tsx

@@ -11,6 +11,7 @@ import {
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { ParticipantVideoFallback as DefaultParticipantVideoFallback } from './ParticipantVideoFallback';
 import { useTheme } from '../../../contexts/ThemeContext';
+import type { MediaStream } from '@stream-io/react-native-webrtc';
 
 const DEFAULT_VIEWPORT_VISIBILITY_STATE: Record<
   VideoTrackType,
@@ -70,7 +71,9 @@ export const VideoRenderer = ({
   );
   const hasJoinedCall = callingState === CallingState.JOINED;
   const canShowVideo = !!videoStream && isVisible && isPublishingVideoTrack;
-  const videoStreamToRender = isScreenSharing ? screenShareStream : videoStream;
+  const videoStreamToRender = (isScreenSharing
+    ? screenShareStream
+    : videoStream) as unknown as MediaStream | undefined;
   const mirror = isLocalParticipant && direction === 'front';
 
   /**
@@ -196,10 +199,10 @@ export const VideoRenderer = ({
       onLayout={onLayout}
       style={[styles.container, videoRenderer.container]}
     >
-      {canShowVideo ? (
+      {canShowVideo && videoStreamToRender ? (
         <RTCView
           style={[styles.videoStream, videoRenderer.videoStream]}
-          streamURL={videoStreamToRender?.toURL()}
+          streamURL={videoStreamToRender.toURL()}
           mirror={mirror}
           objectFit={isScreenSharing ? 'contain' : 'cover'}
           zOrder={videoZOrder}

packages/react-native-sdk/src/hooks/internal/useCallMediaStreamCleanup.ts

@@ -26,6 +26,7 @@ export const useCallMediaStreamCleanup = () => {
         )
       ) {
         // we cleanup media stream only if call is not joined or joining
+        // @ts-expect-error Due to DOM typing incompatible with RN
         disposeOfMediaStream(mediaStream);
       }
     };

packages/react-native-sdk/index.ts → packages/react-native-sdk/src/index.ts

@@ -1,4 +1,4 @@
-import { setClientDetails } from './src/utils/setClientDetails';
+import { setClientDetails } from './utils/setClientDetails';
 /** Initialize text encoder/decoder polyfill */
 import 'text-encoding-polyfill';
 /** Initialize URL polyfill */
@@ -22,12 +22,12 @@ Logger.enable(`${Logger.ROOT_PREFIX}:(WARN|ERROR)`);
 export * from '@stream-io/i18n';
 export * from '@stream-io/video-client';
 export * from '@stream-io/video-react-bindings';
-export * from './src/components';
-export * from './src/contexts';
-export * from './src/hooks';
-export * from './src/theme';
-export * from './src/utils';
-export * from './src/translations';
+export * from './components';
+export * from './contexts';
+export * from './hooks';
+export * from './theme';
+export * from './utils';
+export * from './translations';
 
 // Overriding 'StreamVideo' from '@stream-io/video-react-bindings'
 // Explicitly re-exporting to resolve ambiguity.
@@ -36,6 +36,6 @@ export {
   StreamCall,
   MediaStreamManagement,
   useMediaStreamManagement,
-} from './src/providers';
+} from './providers';
 
 setClientDetails();

packages/react-native-sdk/src/providers/MediaDevices.tsx

@@ -25,6 +25,7 @@ export const MediaDevices = (): React.ReactElement | null => {
 
     const subscription = subscribeToDevicesWhenPermissionGranted(
       isMicPermissionGranted$,
+      // @ts-expect-error Due to DOM typing incompatible with RN
       getAudioDevices,
       setAudioDevices,
     );
@@ -49,6 +50,7 @@ export const MediaDevices = (): React.ReactElement | null => {
     };
     const subscription = subscribeToDevicesWhenPermissionGranted(
       isCameraPermissionGranted$,
+      // @ts-expect-error Due to DOM typing incompatible with RN
       getVideoDevices,
       setVideoDevices,
     );

packages/react-native-sdk/src/utils/setClientDetails.ts

@@ -5,7 +5,7 @@ import {
   SfuModels,
 } from '@stream-io/video-client';
 import { Platform } from 'react-native';
-import { version } from '../../version';
+import { version } from '../version';
 
 const [major, minor, patch] = version.split('.');
 

packages/react-native-sdk/tsconfig.json

@@ -1,28 +1,18 @@
 {
   "compilerOptions": {
-    "outDir": "./dist",
-    "target": "esnext",
-    "types": ["react-native", "jest"],
+    "target": "ES6",
     "declaration": true,
-    "lib": ["esnext"],
     "module": "esnext",
     "moduleResolution": "node",
+    "lib": ["es6", "dom"],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "skipLibCheck": true,
     "strict": true,
     "strictNullChecks": true,
-    "sourceMap": true,
     "jsx": "react"
   },
-  "include": [
-    "./src",
-    "index.ts",
-    "__tests__",
-    "./jest-setup.ts",
-    "version.ts"
-  ],
-  "exclude": ["./dist", "node_modules"]
+  "include": ["src"]
 }