npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

v1.0.4

Published

Fork of improved version of react-native-incoming-call by bkdev98 and icc-guerrero

Downloads

8

Readme

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:

  • [x] More generic incoming call UI.

  • [x] Work nicely with all application state (foreground, background, killed, locked).

  • [x] 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

or

$ 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();
    }
  });
});

Well-known issues

Incoming screen not show on android > 9:

You need to turn on autostart and display pop-up windows permissions manually. I'm searching for a better solution.

No vibration when screen locked:

PR is welcomed! 😂

License

This project is licensed under the MIT License.

[email protected]