@bob.hardcoder/react-native-incoming-call NPM

RN Incoming Call Version 2

React Native module to display custom incoming call activity, best result when using with firebase background messaging. Only for Android since iOS we have VoIP.

Fork note

It's a fork of the most supported version of react-native-incoming-call originally created by bkdev98 and improved by icc-guerrero created to introduce some customizations and make the latest version available on npm since the author has no enough time to release the changes. Later, when it is good enough, it could be merged into the original repo.

Yes I heard you could use self managed ConnectionService thing. But since I'm not an Android expert, this is a solution I found acceptable.

You could also wait for this feature request from react-native-callkeep to be resolved and have an easier life.

Version 2 Breaking Changes

Hello there! It's been a while since I first public version 1 of this library, which contains some bugs that I don't have much time to fix.

Luckily I got a client project which needs this feature again and now I have time to improve it and make sure all major features work. So here is most of it I guess:

More generic incoming call UI.
Work nicely with all application state (foreground, background, killed, locked).
More flexible APIs.

Thanks to jpudysz's folk of react-native-callkeep, version 2 is heavily depended on it.

Migrate from v1

getLaunchParameters() & clearLaunchParameters() is now replaced by openAppFromHeadlessMode() & getExtrasFromHeadlessMode().
Answer calls from background / killed state no longer open app and send launchParams, you need to listen to answerCall event from headless job and trigger backToForeground or openAppFromHeadlessMode manually.

Getting started

$ npm install @bob.hardcoder/react-native-incoming-call --save

$ yarn add @bob.hardcoder/react-native-incoming-call

Addition installation step

In AndroidManifest.xml:

Add <activity android:name="com.incomingcall.UnlockScreenActivity" /> line between <application> tag.
Add <uses-permission android:name="android.permission.VIBRATE" /> permission.
Also, it's recommend to put android:launchMode="singleInstance" in <activity android:name=".MainActivity"... tag to prevent duplicate activities.

For RN >= 0.60, it's done. Otherwise:

$ react-native link @bob.hardcoder/react-native-incoming-call

Usage

In App.js:

import {useEffect} from 'react';
import {DeviceEventEmitter, Platform} from 'react-native';
import IncomingCall from '@bob.hardcoder/react-native-incoming-call';

// Listen to cancel and answer call events
useEffect(() => {
  if (Platform.OS === "android") {
    /**
     * App open from killed state (headless mode)
    */
    const payload = await IncomingCall.getExtrasFromHeadlessMode();
    console.log('launchParameters', payload);
    if (payload) {
      // Start call action here. You probably want to navigate to some CallRoom screen with the payload.uuid.
    }

    /**
     * App in foreground / background: listen to call events and determine what to do next
    */
    DeviceEventEmitter.addListener("endCall", payload => {
      // End call action here
    });
    DeviceEventEmitter.addListener("answerCall", payload => {
      // Start call action here. You probably want to navigate to some CallRoom screen with the payload.uuid.
    });
  }
}, []);

In index.js or anywhere firebase background handler lies:

import messaging from '@react-native-firebase/messaging';
import {DeviceEventEmitter} from 'react-native';
import IncomingCall from '@bob.hardcoder/react-native-incoming-call';

messaging().setBackgroundMessageHandler(async remoteMessage => {
  // Receive remote message
  if (remoteMessage?.notification?.title === 'Incoming Call') {
    // Display incoming call activity.
    IncomingCall.display(
      'callUUIDv4', // Call UUID v4
      'Quocs', // Username
      'https://avatars3.githubusercontent.com/u/16166195', // Avatar URL
      'Incomming Call', // Info text
      20000 // Timeout for end call after 20s
    );
  } else if (remoteMessage?.notification?.title === 'Missed Call') {
    // Terminate incoming activity. Should be called when call expired.
    IncomingCall.dismiss();
  }

  // Listen to headless action events
  DeviceEventEmitter.addListener("endCall", payload => {
    // End call action here
  });
  DeviceEventEmitter.addListener("answerCall", (payload) => {
    console.log('answerCall', payload);
    if (payload.isHeadless) {
      // Called from killed state
      IncomingCall.openAppFromHeadlessMode(payload.uuid);
    } else {
      // Called from background state
      IncomingCall.backToForeground();
    }
  });
});