Merge pull request #24 from linhvovan29546/dev/custom-component-js

allow customization of incoming call UI

Author: linhvovan29546

README.md

@@ -128,7 +128,8 @@ import RNNotificationCall from "react-native-full-screen-notification-incoming-c
         answerText: "Answer",
         declineText: "Decline",
         notificationColor:"colorAccent",
-        notificationSound: 'skype_ring'//raw 
+        notificationSound: 'skype_ring',//raw 
+        mainComponent:'MyReactNativeApp'//AppRegistry.registerComponent('MyReactNativeApp', () => CustomIncomingCall);
       }
     )
 ```
@@ -148,6 +149,8 @@ import RNNotificationCall from "react-native-full-screen-notification-incoming-c
     - `declineText`: string (required) decline button label
     - `notificationColor`: string (optional) color of notification 
     - `notificationSound`: raw file (optional) sound of notification
+    - `mainComponent`:string appKey when custom incomingcall screen 
+    - `payload`:any(optional) pass whatever data you want to get when custom incomingcall screen
 
 #### hide notification
 
@@ -182,6 +185,14 @@ import RNNotificationCall from "react-native-full-screen-notification-incoming-c
 ```js
     RNNotificationCall.backToApp()
 ```
+#### decline call
+```js
+     RNNotificationCall.declineCall(uuid)
+```
+#### answer call
+```js
+     RNNotificationCall.answerCall(uuid)
+```
 
 #### Known issue
 - Custom Android notification sound :

android/src/main/java/com/reactnativefullscreennotificationincomingcall/FullScreenNotificationIncomingCallModule.java

@@ -56,6 +56,8 @@ public void displayNotification(String uuid, @Nullable String avatar,@Nullable i
       intent.putExtra("declineText",foregroundOptions.getString("declineText"));
       intent.putExtra("notificationColor",foregroundOptions.getString("notificationColor"));
       intent.putExtra("notificationSound",foregroundOptions.getString("notificationSound"));
+      intent.putExtra("mainComponent",foregroundOptions.getString("mainComponent"));
+      intent.putExtra("payload",foregroundOptions.getString("payload"));
       intent.setAction(Constants.ACTION_SHOW_INCOMING_CALL);
       getReactApplicationContext().startService(intent);
     }

android/src/main/java/com/reactnativefullscreennotificationincomingcall/IncomingCallActivity.java

@@ -1,6 +1,6 @@
 package com.reactnativefullscreennotificationincomingcall;
 
-import android.app.Activity;
+
 import android.app.KeyguardManager;
 import android.content.Context;
 import android.content.Intent;
@@ -14,12 +14,16 @@
 import android.widget.TextView;
 import com.airbnb.lottie.LottieAnimationView;
 import androidx.appcompat.app.AppCompatActivity;
+import androidx.fragment.app.Fragment;
 
+import com.facebook.react.ReactFragment;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
 import com.squareup.picasso.Picasso;
 
-public class IncomingCallActivity extends AppCompatActivity {
+public class IncomingCallActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
+
   private static final String TAG = "MessagingService";
   private static final String TAG_KEYGUARD = "Incoming:unLock";
   private TextView tvName;
@@ -72,21 +76,38 @@ protected void onCreate(Bundle savedInstanceState) {
         keyguardLock.disableKeyguard();
       }
     }
-    setContentView(R.layout.activity_call_incoming);
     getWindow().addFlags(
       WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED
         | WindowManager.LayoutParams.FLAG_DISMISS_KEYGUARD
         | WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
         | WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON
         | WindowManager.LayoutParams.FLAG_ALLOW_LOCK_WHILE_SCREEN_ON);
+    Bundle bundle = getIntent().getExtras();
+
+    if (bundle.containsKey("mainComponent")) {
+      setContentView(R.layout.custom_ingcoming_call_rn);
+       Fragment reactNativeFragment = new ReactFragment.Builder()
+      .setComponentName(bundle.getString("mainComponent"))
+         .setLaunchOptions(bundle)
+      .build();
+    getSupportFragmentManager()
+      .beginTransaction()
+      .add(R.id.reactNativeFragment, reactNativeFragment)
+      .commit();
+      if (bundle.containsKey("uuid")) {
+        uuid = bundle.getString("uuid");
+      }
+    return;
+    }else{
+      setContentView(R.layout.activity_call_incoming);
+    }
     tvName = findViewById(R.id.tvName);
     tvInfo = findViewById(R.id.tvInfo);
     ivAvatar = findViewById(R.id.ivAvatar);
     tvDecline=findViewById(R.id.tvDecline);
     tvAccept=findViewById(R.id.tvAccept);
     lnDeclineCall = findViewById(R.id.lnDeclineCall);
     lnAcceptCall = findViewById(R.id.lnAcceptCall);
-    Bundle bundle = getIntent().getExtras();
     if (bundle != null) {
       if (bundle.containsKey("uuid")) {
         uuid = bundle.getString("uuid");
@@ -183,4 +204,8 @@ private void dismissDialing(String action) {
     }
   }
 
+  @Override
+  public void invokeDefaultOnBackPressed() {
+    super.onBackPressed();
+  }
 }

android/src/main/res/layout/custom_ingcoming_call_rn.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  android:id="@+id/reactNativeFragment"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent">
+
+</FrameLayout>

example/index.tsx

@@ -1,5 +1,7 @@
 import { AppRegistry } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';
+import CustomIncomingCall from './src/CustomIncomingCall';
 
+AppRegistry.registerComponent('MyReactNativeApp', () => CustomIncomingCall);
 AppRegistry.registerComponent(appName, () => App);

example/src/App.tsx

@@ -45,7 +45,8 @@ export default function App() {
           answerText: "Answer",
           declineText: "Decline",
           notificationColor: 'colorAccent',//path color in android
-          notificationSound: 'skype_ring'//raw 
+          notificationSound: 'skype_ring',//raw 
+          mainComponent: "MyReactNativeApp"
         }
       )
       // Cancel the timeout if necessary

example/src/CustomIncomingCall/index.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { customIncomingActivityProps } from 'react-native-full-screen-notification-incoming-call';
+import RNNotificationCall from '../../../src/index'
+export default function CustomIncomingCall(props: customIncomingActivityProps) {
+  console.log('props===', props)
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.box} onPress={() => {
+        RNNotificationCall.declineCall(props.uuid)
+      }}>
+        <Text>Decline</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.box}
+        onPress={() => {
+          RNNotificationCall.answerCall(props.uuid)
+        }}
+      >
+        <Text>Answer</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white'
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});

src/index.tsx

@@ -1,4 +1,4 @@
-import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
+import { DeviceEventEmitter, NativeEventEmitter, NativeModules, Platform } from 'react-native';
 const isAndroid = Platform.OS === 'android';
 const RNNotificationIncomingCall = NativeModules.FullScreenNotificationIncomingCall;
 let eventEmitter: any
@@ -9,6 +9,16 @@ enum RNNotificationEvent {
   RNNotificationAnswerAction = 'RNNotificationAnswerAction',
   RNNotificationEndCallAction = 'RNNotificationEndCallAction'
 }
+enum CallAction {
+  ACTION_END_CALL = "ACTION_END_CALL",
+  ACTION_REJECTED_CALL = "ACTION_REJECTED_CALL",
+  ACTION_HIDE_CALL = "ACTION_HIDE_CALL",
+  ACTION_SHOW_INCOMING_CALL = "ACTION_SHOW_INCOMING_CALL",
+  HIDE_NOTIFICATION_INCOMING_CALL = "HIDE_NOTIFICATION_INCOMING_CALL",
+  ACTION_PRESS_ANSWER_CALL = "ACTION_PRESS_ANSWER_CALL",
+  ACTION_PRESS_DECLINE_CALL = "ACTION_PRESS_DECLINE_CALL",
+  ACTION_START_ACTIVITY = "ACTION_START_ACTIVITY",
+}
 
 interface foregroundOptionsModel {
   channelId: string;
@@ -19,7 +29,15 @@ interface foregroundOptionsModel {
   answerText: string;
   declineText: string;
   notificationColor?: string;
-  notificationSound?: string//raw
+  notificationSound?: string;//raw
+  mainComponent?: string;
+  payload?: any//more info
+}
+export interface customIncomingActivityProps {
+  avatar?: string;
+  info?: string;
+  uuid: string;
+  payload?: any
 }
 class RNNotificationCall {
   private _notificationEventHandlers;
@@ -77,6 +95,19 @@ class RNNotificationCall {
     listener.remove();
     this._notificationEventHandlers.delete(type);
   };
+  declineCall = (uuid: string) => {
+    this.hideNotification()
+    const payload = {
+      callUUID: uuid,
+      endAction: CallAction.ACTION_REJECTED_CALL
+    }
+    DeviceEventEmitter.emit(RNNotificationEvent.RNNotificationEndCallAction, payload)
+  }
+  answerCall = (uuid: string) => {
+    this.hideNotification()
+    const payload = { callUUID: uuid }
+    DeviceEventEmitter.emit(RNNotificationEvent.RNNotificationAnswerAction, payload)
+  }
 }
 
 export default new RNNotificationCall();