Incoming call Notifications for React Native apps
Are you looking to integrate whatsapp like incoming call feature into your react native based application. Then you are in the right place. Recently I have encountered a challenge where I have to implement whatsapp like incoming call feature for a ReactNative application. There are no npm modules available out there to implement this feature except react-native-callkeep which is straight forward for iOS app. And for android react-native-callkeep wont help much if you want to implement VoIP incoming call features and another drawback is ReactNative based applications won’t work when app is in background or closed state. And the main challenge here is how to trigger incoming call when your ReactNative app is in background or closed state or when your device is locked.
So, how do we overcome these challenges?
Let’s get started…!
The first step of the incoming call is a notification. We’re using Firebase to send push notifications to the device, and there is a npm package for React Native (https://www.npmjs.com/package/react-native-firebase) to manage that. Our goal was to build an app to make VoIP calls.
With the VoIP push notifications iOS users will be able to receive calls even if device is locked or app is in closed state. Which is possible by PushKit and does all the work for you. In this case an open source library is saving us once again i.e react-native-callkeep.
But there is no straight forward solution for android. Most of the android developers suggest use of connection service to implement the incoming call feature. But this helps only for telecom related calls. And android doesn’t have system to handle VoIP call notifications and there is no PushKit kind of library like iOS has. So the only way to solve this challenge is to write some Java code from scratch. And other challenge is whole application is in ReactNative and the calling feature needs to be written on native side of android and need to figure to how pass the native events(Accept Call/ Reject Call) to the ReactNative application.
In-order to wake android application from closed state/background state sender has to send data only payload fcm message
And setting android permissions
Receiving Push notifications when app is not live
The first step is writing a service which receives push notifications even if the app is not alive. onMessageReceived receives data only messages when device locked or app is in background state or closed state.
showIncomingCall function gets called when “incomingcall” type notification is triggered and is responsible for starting the incoming call screen activity.
isAppRunning checks if app is in closed state or background state or active state.
Now we need to show our activity over the lock screen and send the user choice (receive or decline the call) to the app.
The below steps are for the applications that are using react-native-naviagtion. If you are not then ignore MainApplication.java changes.
Based on this package, we need to extend the NavigationApplication class. This way, we get access to the lifecycle methods of our activities where we can set some flags and start our IncomingCallScreenActivity.
It’s really important to add the flag on the NavigationActivity, which is the activity generated by react-native-navigation that will be the container of our app. We need to put it over the lock screen, otherwise if you put it only on your “IncomingCallScreenActivity”.
Last but not least, our IncomingCallScreenActivity
And below code is for Native UI you can modify the stylings according to your needs
In IncomingCallScreenActivity we are handling call accept and reject scenarios. And we are sending events to the ReactNative using RCTDeviceEmitter.
Connecting android native module to the ReactNative application.
The native events are captured by “DeviceEventEmitter” on the ReactNative side.
That’s all folks the now fire up your application and see whatsapp like incoming call screen in your application.
If you feel I deserve a follow on my github please do which motivates me to write useful content and also motivates me to contribute to open-source or for more interesting stuff follow me on github and twitter
On readers request I have created a demo project with banner and full screen intent notifications checkout here please do follow me GitHub
