Android notification full screen incoming call for React Native
React Native Full Screen Notification Incoming Call For Android This library works based on android display time-sensitive notifications For more information about Display time-sensitive notifications (https://developer.android.com/training/notify-user/time-sensitive).
⚠️ This library only work for Android .
Android full screen notification incoming call for React Native
To use this library you need to ensure you match up with the correct version of React Native you are using.
lib version | React Native Version |
---|---|
react-native-full-screen-notification-incoming-call >= 0.1.8 |
>= 0.61.0 |
react-native-full-screen-notification-incoming-call <= 0.1.7 |
< 0.61.0 |
npm install react-native-full-screen-notification-incoming-call
In android/app/build.gradle
Add a line compile project(':react-native-full-screen-notification-incoming-call')
in dependencies {}
section.
In android/settings.gradle
Add:
include ':react-native-full-screen-notification-incoming-call'
project(':react-native-full-screen-notification-incoming-call').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-full-screen-notification-incoming-call/android')
android/app/src/main/java/.../MainApplication.java
:import com.reactnativefullscreennotificationincomingcall.FullScreenNotificationIncomingCallPackage; // Add this import line
//...
private static List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new FullScreenNotificationIncomingCallModule() // Add this line
);
}
In styles.xml
:
<style name="incomingCall" parent="Theme.AppCompat.Light.NoActionBar">color
<!-- Customize status bar color -->
<item name="colorPrimaryDark">#000000</item>
</style>
In AndroidManifest.xml
:
// ...
<uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
<application ....>
<activity android:name="com.reactnativefullscreennotificationincomingcall.IncomingCallActivity"
android:theme="@style/incomingCall"
android:launchMode="singleTask"
android:excludeFromRecents="true"
android:exported="true"
android:showWhenLocked="true"
android:turnScreenOn="true"
/>
<activity android:name="com.reactnativefullscreennotificationincomingcall.NotificationReceiverActivity"
android:theme="@style/incomingCall"
android:launchMode="singleTask"
android:excludeFromRecents="true"
android:exported="true"
android:showWhenLocked="true"
android:turnScreenOn="true"
/>
<service
android:name="com.reactnativefullscreennotificationincomingcall.IncomingCallService"
android:enabled="true"
android:stopWithTask="false"
android:exported="true" />
.....
</application>
import RNNotificationCall from 'react-native-full-screen-notification-incoming-call';
function displayNotification(uid:string, avatar?:string, timeout?:number, foregroundOptions:foregroundOptionsModel):void
// uid: String required(Call UUID v4)
// - avatar: String optional(Avatar URL)
// - timeout: Number optional ex 20000(Timeout for end call after 20s)
type foregroundOptionsModel ={
channelId: string; // string channel id of notification
channelName: string;// channel name of notification
notificationIcon: string;//mipmap channel icon of notification
notificationTitle: string;//tile of notification
notificationBody: string;//body of notification
answerText: string;// answer button label
declineText: string;//decline button label
notificationColor?: string;//color of notification
notificationSound?: string;//raw file sound of notification
mainComponent?: string;//appKey (optional) to the custom incoming call screen. To understand the details you can check the [example](https://github.com/linhvovan29546/react-native-full-screen-notification-incoming-call/blob/master/example/index.tsx)
payload?:any//any Object (optional) pass whatever data you want to get when custom incomingcall screen or receive action/decline event
}
``` |
```js
//example
RNNotificationCall.displayNotification(
'22221a97-8eb4-4ac2-b2cf-0a3c0b9100ad',
null,
30000,
{
channelId: 'com.abc.incomingcall',
channelName: 'Incoming video call',
notificationIcon: 'ic_launcher', //mipmap
notificationTitle: 'Linh Vo',
notificationBody: 'Incoming video call',
answerText: 'Answer',
declineText: 'Decline',
notificationColor: 'colorAccent',
notificationSound: null, //raw
//mainComponent:'MyReactNativeApp',//AppRegistry.registerComponent('MyReactNativeApp', () => CustomIncomingCall);
// payload:{name:'Test',Body:'test'}
}
);
function hideNotification(): void;
//example
RNNotificationCall.hideNotification();
function addEventListener(eventName: 'answer',handler(payload:answerPayload): void): void;
export interface answerPayload {
callUUID: string; //call id
payload?: string; // jsonString
}
//example
RNNotificationCall.addEventListener('answer', (data) => {
RNNotificationCall.backToApp();
const { callUUID, payload } = data;
console.log('press answer', callUUID);
});
function addEventListener(eventName: 'endCall',handler(payload:declinePayload): void): void;
type declinePayload {
callUUID: string;// call id
payload?: string; // jsonString
endAction: 'ACTION_REJECTED_CALL' | 'ACTION_HIDE_CALL';
}
//ACTION_REJECTED_CALL => press button decline or call function declineCall
//ACTION_HIDE_CALL => action name when notification auto hide by timeout
// Example
RNNotificationCall.addEventListener('endCall', (data) => {
const { callUUID, endAction, payload } = data;
console.log('press endCall', callUUID);
});
function removeEventListener(eventName: 'answer' | 'endCall'): void;
// Example
RNNotificationCall.removeEventListener('answer');
RNNotificationCall.removeEventListener('endCall');
function backToApp(): void;
// Example
RNNotificationCall.backToApp();
function declineCall(uuid: string, payload?: string): void;
// payload(optinal) : json string
// Example
RNNotificationCall.declineCall(22221a97-8eb4-4ac2-b2cf-0a3c0b9100ad, JSON.stringify({name:'Test',Body:'test'}));
function answerCall(uuid: string, payload?: string): void;
// payload(optinal) : json string
// Example
RNNotificationCall.answerCall(22221a97-8eb4-4ac2-b2cf-0a3c0b9100ad, JSON.stringify({name:'Test',Body:'test'}));
Custom Android notification sound:
Android target 31 or higher: android.app.BackgroundServiceStartNotAllowedException: Not allowed to start service Intent (android.app.BackgroundServiceStartNotAllowedException: Not allowed to start service Intent) https://github.com/linhvovan29546/react-native-full-screen-notification-incoming-call/issues/38
On Android 13: Make sure enable notification permission relate https://github.com/linhvovan29546/react-native-full-screen-notification-incoming-call/issues/42
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT