🚀 Building a React Native WebRTC App in 2025 (Part 1): Setup and First Test

“If it doesn’t crash, it’s halfway working.” — Every React Native dev, ever.

WebRTC (Web Real-Time Communication) has always been a bit tricky when it comes to mobile development, especially with React Native. Compatibility issues, native module quirks, and version mismatches are just a few of the traps developers run into.

After hours of debugging and research, I finally found a working combination that allows you to set up a React Native 0.74.1 project with **react-native-webrtc v124.0.5** — no crashes, and camera access works!

This is Part 1 of my journey into building a full-fledged video calling app using WebRTC and React Native in 2025.

✅ What You’ll Build in Part 1

• A React Native app using WebRTC
• Successfully linking the camera/microphone API via mediaDevices.getUserMedia
• Verifying that everything is wired up without crashing

🧱 Prerequisites

• Node.js ≥ 18.x
• Android Studio with an emulator or a physical Android device
• JDK 17 or compatible
• React Native CLI (npx @react-native-community/cli)

📦 Step 1: Create the React Native Project

Use the CLI to initialise your app using the compatible version:

npx @react-native-community/cli init WebRTCApp --version 0.74.1

🔧 Step 2: Install the Working WebRTC Package

npm install react-native-webrtc@^124.0.5

This version works smoothly with React Native 0.74.1 as of 2025.

🛠️ Step 3: Set the Android minSdkVersion

In android/build.gradleSet this value:

buildscript {
  ext {
    minSdkVersion = 24
    // ...
  }
}

This is required for react-native-webrtc to work correctly on Android.

🧪 Step 4: Add a Simple WebRTC Test in App.tsx

import React, {useEffect} from 'react';
import {View, Text, Alert} from 'react-native';
import {mediaDevices} from 'react-native-webrtc';

const App = () => {
  useEffect(() => {
    try {
      console.log('[TEST] WebRTC ready:', typeof mediaDevices.getUserMedia);
    } catch (e) {
      Alert.alert('WebRTC crash!', e.message);
    }
  }, []);

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Testing WebRTC loading</Text>
    </View>
  );
};

export default App;

When you launch the app on an emulator or device, you should see the console log:

[TEST] WebRTC ready: function

If it doesn’t crash, congrats! Your environment is set up properly.

🧭 What’s Next (Part 2 Teaser)

In Part 2, we’ll:

• Request camera and microphone permissions
• Capture a local video stream and render it
• Start preparing for peer-to-peer connections

💡 Final Thoughts

Setting up WebRTC in React Native has never been a plug-and-play process. But with the right combination of tools and versions, it’s doable. This post marks the beginning of a journey toward building a fully functional video chat app in 2025, powered by open-source and your passion for learning.

If you’re facing crashes with other versions, try this combo, and let me know how it goes!