{"id":11812,"library":"react-native-webrtc","title":"React Native WebRTC Module","description":"react-native-webrtc provides a comprehensive WebRTC implementation for React Native applications across Android, iOS, and tvOS. The library is currently stable at version 124.0.7 and follows a rapid release cadence, frequently updating to new WebRTC M-releases (e.g., M124). Key features include support for audio/video communication, data channels, and screen capture. A significant differentiator is its exclusive adoption of the Unified Plan as of version 106.0.0, requiring users of older Plan B to migrate or remain on previous releases. It also supports Simulcast since version 111.0.0 with software encode/decode factories enabled by default. While not officially supporting macOS or Windows, it offers a web shim for react-native-web and can be integrated into Expo projects via expo-dev-client and config plugins.","status":"active","version":"124.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/react-native-webrtc/react-native-webrtc","tags":["javascript","react-component","react-native","ios","android","webrtc","typescript"],"install":[{"cmd":"npm install react-native-webrtc","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-webrtc","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-webrtc","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the React Native environment.","package":"react-native","optional":false}],"imports":[{"note":"Use ES module imports; CommonJS 'require' is not the standard or recommended approach for this library, especially with TypeScript.","wrong":"const RTCPeerConnection = require('react-native-webrtc').RTCPeerConnection;","symbol":"RTCPeerConnection","correct":"import { RTCPeerConnection } from 'react-native-webrtc';"},{"note":"mediaDevices is a named export, not the default export.","wrong":"import mediaDevices from 'react-native-webrtc';","symbol":"mediaDevices","correct":"import { mediaDevices } from 'react-native-webrtc';"},{"note":"The correct component name for video rendering is RTCView. Ensure native modules are properly linked for this component to render.","wrong":"import RTCVideoView from 'react-native-webrtc';","symbol":"RTCView","correct":"import { RTCView } from 'react-native-webrtc';"}],"quickstart":{"code":"import React, { useEffect, useRef, useState } from 'react';\nimport { View, Text, Button, Platform, PermissionsAndroid, Alert } from 'react-native';\nimport {\n  RTCPeerConnection,\n  RTCIceCandidate,\n  RTCSessionDescription,\n  RTCView,\n  mediaDevices,\n} from 'react-native-webrtc';\n\nconst configuration = { iceServers: [{ url: 'stun:stun.l.google.com:19302' }] };\n\nexport default function App() {\n  const [localStream, setLocalStream] = useState<any>(null);\n  const pc = useRef<RTCPeerConnection | null>(null);\n\n  useEffect(() => {\n    (async () => {\n      if (Platform.OS === 'android') {\n        await PermissionsAndroid.requestMultiple([\n          PermissionsAndroid.PERMISSIONS.CAMERA,\n          PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,\n        ]);\n      }\n\n      try {\n        const stream = await mediaDevices.getUserMedia({\n          audio: true,\n          video: {\n            mandatory: {\n              minWidth: '500',\n              minHeight: '300',\n              minFrameRate: '30',\n            },\n            facingMode: 'user',\n          },\n        });\n        setLocalStream(stream);\n\n        pc.current = new RTCPeerConnection(configuration);\n        pc.current.addStream(stream);\n\n        pc.current.onicecandidate = (event) => {\n          if (event.candidate) {\n            console.log('ICE Candidate:', event.candidate);\n            // In a real app, you would send this candidate to the remote peer\n          }\n        };\n\n        const offer = await pc.current.createOffer();\n        await pc.current.setLocalDescription(offer);\n        console.log('Local Offer:', offer.sdp);\n        // In a real app, you would send this offer to the remote peer\n      } catch (err: any) {\n        Alert.alert('Media Error', err.message);\n      }\n    })();\n\n    return () => {\n      if (localStream) {\n        localStream.release();\n      }\n      if (pc.current) {\n        pc.current.close();\n      }\n    };\n  }, []);\n\n  if (!localStream) {\n    return <Text>Loading local media...</Text>;\n  }\n\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <Text>Local Stream:</Text>\n      <RTCView streamURL={localStream.toURL()} style={{ width: 300, height: 200, backgroundColor: 'black' }} />\n      <Button title=\"Start Call (logic incomplete)\" onPress={() => Alert.alert('Simulated Call', 'Offer sent (check console)')} />\n    </View>\n  );\n}","lang":"typescript","description":"Demonstrates how to obtain local audio/video media, initialize an RTCPeerConnection, and display the local video stream using RTCView, including basic Android permission handling."},"warnings":[{"fix":"Refactor WebRTC signaling and session description handling to comply with Unified Plan specifications. Consult the WebRTC documentation for migration guides.","message":"As of version 106.0.0, 'react-native-webrtc' exclusively supports the Unified Plan. Applications relying on the older Plan B must either migrate to Unified Plan or remain on a version prior to 106.0.0.","severity":"breaking","affected_versions":">=106.0.0"},{"fix":"Developers targeting Android devices with external cameras should verify compatibility or implement alternative camera handling if UVC is critical, potentially by staying on an older version or contributing a new implementation.","message":"UVC camera support for Android was explicitly dropped in version 118.0.5. Devices using UVC cameras will no longer be compatible.","severity":"breaking","affected_versions":">=118.0.5"},{"fix":"Upgrade to version 124.0.5 or newer. If issues persist, ensure your `android/app/build.gradle` `minSdkVersion` is aligned with React Native's recommendations and any specific library requirements.","message":"The `minSdkVersion` set by your app may conflict with the library's internal `minSdkVersion` handling on Android, potentially leading to build issues or unexpected behavior. Version 124.0.5 includes changes to address this by not using the app's `minSdkVersion`.","severity":"gotcha","affected_versions":"<124.0.5"},{"fix":"Update `react-native-webrtc` to version 124.0.3 or later to ensure compatibility with React Native 0.73+ on iOS.","message":"For iOS compatibility with React Native versions 0.73 and above, you must use `react-native-webrtc` version 124.0.3 or higher. Older versions may lead to build errors or runtime instability.","severity":"gotcha","affected_versions":"<124.0.3"},{"fix":"Follow the platform-specific installation guides (Android, iOS) in the documentation to ensure all native modules are correctly linked and permissions are configured. For Expo, use `expo-dev-client` and the `config-plugins/react-native-webrtc` package.","message":"As a native module, `react-native-webrtc` requires proper linking of native components (e.g., for `RTCView`) on bare React Native projects. Skipping this step often results in runtime errors.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"On Android, request `PermissionsAndroid.PERMISSIONS.CAMERA` and `PermissionsAndroid.PERMISSIONS.RECORD_AUDIO`. On iOS, ensure `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` are present in `Info.plist`.","cause":"The application lacks necessary camera or microphone permissions for Android or iOS.","error":"Error: Permission denied"},{"fix":"Ensure `import { mediaDevices } from 'react-native-webrtc';` is present. Verify that you have run `npx react-native link` (if applicable) and followed all platform-specific native installation steps.","cause":"The `mediaDevices` object was not correctly imported or the native module for WebRTC is not properly linked/initialized, preventing access to media devices.","error":"TypeError: Cannot read property 'getUserMedia' of undefined"},{"fix":"Confirm that you have completed all native installation steps for both Android and iOS, including running `pod install` for iOS and rebuilding your Android project after installing the package.","cause":"The native component `RTCView` (internally `RTCVideoView` in some contexts) is not correctly linked or registered with the React Native bridge.","error":"Invariant Violation: requireNativeComponent: 'RTCVideoView' was not found in the UIManager."}],"ecosystem":"npm"}