@daily-co/react-native-daily-js

react-native-daily-js

The Daily.co JavaScript library for React Native.

Minimum OS/SDK versions

This package introduces some constraints on what OS/SDK versions your project can support:

• iOS: Deployment target >= 10.0
• Android: minSdkVersion >= 23

Installation

Install react-native-daily-js along with its peer dependencies:

npm i @daily-co/react-native-daily-js @daily-co/react-native-webrtc @react-native-community/async-storage react-native-background-timer

Then, follow the below steps to set up your native project on each platform. Note that these steps assume you're using a version of React Native that supports autolinking (>= 60).

iOS

Update the platform in your Podfile, since @daily-co/react-native-webrtc only works on iOS 10 and above:

platform :ios, '10.0'

Then run:

npx pod-install

Open Xcode, and in your project's Info.plist file add two new rows with the following keys:

• NSCameraUsageDescription
• NSMicrophoneUsageDescription

For their values, provide user-facing strings explaining why your app is asking for camera and microphone access. Note that, without these, the app will simply crash silently.

Also in Info.plist, add a row with the key UIBackgroundModes. This will resolve to an array. For the first item, specify the value voip. This ensures that audio will continue uninterrupted when your app is sent to the background.

Android

Add the following permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>

<application>
// ...
  <service android:name="com.daily.reactlibrary.DailyOngoingMeetingForegroundService"/>
</application>

Update your minSdkVersion in your top-level build.gradle file:

minSdkVersion = 23

(If you run into any issues, refer to Github issues like these, or the react-native-webrtc installation docs, which walk you through a more complicated process. The simpler process laid out above seems to work in a vanilla modern React Native CLI-based setup).

Usage

react-native-daily-js is the React Native counterpart to daily-js, and can be used in pretty much the same way to add video calls to your apps. Complete documentation for daily-js can be found here.

import Daily from '@daily-co/react-native-daily-js';

// ...

// Start joining a call
const call = Daily.createCallObject();
call.join({ url: 'https://your-team.daily.co/allhands' });

// Listen for events signaling changes to participants or their audio or video.
// This includes the local participant.
const events: DailyEvent[] = [
  'participant-joined',
  'participant-updated',
  'participant-left',
];
for (const event of events) {
  call.on(event, () => {
    for (const participant of Object.values(call.participants())) {
      console.log('---');
      console.log(`participant ${participant.user_id}:`);
      if (participant.local) {
        console.log('is local');
      }
      if (participant.audio) {
        console.log('audio enabled', participant.audioTrack);
      }
      if (participant.video) {
        console.log('video enabled', participant.videoTrack);
      }
    }
  });
}

import { DailyMediaView } from '@daily-co/react-native-daily-js';

// ...

<DailyMediaView
  videoTrack={participant.videoTrack}
  audioTrack={participant.audioTrack}
  mirror={participant.local}
  zOrder={participant.local ? 1 : 0}
  style={someStyle}
/>;

See this blog post for a more thorough walkthrough of structuring a React video-chat app powered by Daily.co. It's focused on React web, but most of it should also apply to your React Native app.