Merge pull request #63 from linhvovan29546/docs/update-screenshot

build: update screenshot, passing payload to in-call screen
linhvovan29546 · Nov 11, 2024 · 5a873c8 · 5a873c8
2 parents 438fd0c + 197eb49
commit 5a873c8
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -10,15 +10,13 @@ Starting from Android 12, the incoming call notification UI will resemble the on
 <p align="center">
   <kbd>
     <img
-      src="https://github.com/linhvovan29546/react-native-full-screen-notification-incoming-call/blob/master/docs/background.gif"
-      title="Background Demo"
+      src="https://github.com/linhvovan29546/react-native-full-screen-notification-incoming-call/blob/master/docs/screenshot-basic.gif"
       width="350" height="700"
     >
   </kbd>
   <kbd>
     <img
-      src="https://github.com/linhvovan29546/react-native-full-screen-notification-incoming-call/blob/master/docs/block.gif"
-      title="Block Demo"
+      src="https://github.com/linhvovan29546/react-native-full-screen-notification-incoming-call/blob/master/docs/screenshot-with-customize-ui.gif"
       width="350" height="700"
     >
   </kbd>
@@ -128,7 +126,7 @@ function displayNotification(uid:string, avatar?:string, timeout?:number, foregr
 | `declineText`        | `string`              | Label for the decline button. On Android 12 and above, the incoming call notification displays the declineText from CallStyle instead of this property.                                              | Yes      |
 | `notificationColor`  | `string` (optional)   | Color of the notification.                                                    | No       |
 | `notificationSound`  | `string` (optional)   | Sound for the notification (raw).                                             | No       |
-| `mainComponent`      | `string` (optional)   | Main component name for a custom incoming call screen.                        | No       |
+| `mainComponent`      | `string` (optional)   | Main component name for a custom incoming call screen. Register this component in the index.js file, as shown in [this example](https://github.com/linhvovan29546/react-native-full-screen-notification-incoming-call/blob/master/example/index.js#L6C1-L6C77)                       | No       |
 | `isVideo`            | `boolean` (optional)  | Indicates if the call is a video call (default is `false`).                   | No       |
 | `payload`            | `any` (optional)      | Additional data for the notification.                                         | No       |
 

diff --git a/docs/screenshot-basic.gif b/docs/screenshot-basic.gif
diff --git a/docs/screenshot-with-customize-ui.gif b/docs/screenshot-with-customize-ui.gif
diff --git a/docs/screenshot1.jpeg b/docs/screenshot1.jpeg
diff --git a/docs/screenshot2.jpeg b/docs/screenshot2.jpeg
diff --git a/docs/screenshot3.jpeg b/docs/screenshot3.jpeg
diff --git a/example/src/Detail/index.tsx b/example/src/Detail/index.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { CallKeepService } from '../services/CallKeepService';
 
 export default function InCallScreen() {
   const navigation = useNavigation();
   const [isMuted, setIsMuted] = React.useState(false); // Mute state
   const [isOnHold, setIsOnHold] = React.useState(false); // Hold state
+  const route = useRoute<any>();
+  const { payload } = route.params;
 
   // Handle end call
   const handleEndCall = () => {
@@ -31,7 +33,9 @@ export default function InCallScreen() {
       <View style={styles.inCallContainer}>
         {/* Display the caller's info or call status */}
         <Text style={styles.callStatus}>In Call</Text>
-        <Text style={styles.callerInfo}>Caller: John Doe</Text>
+        <Text style={styles.callerInfo}>
+          Caller: {payload.callerName || 'Unknown'}
+        </Text>
 
         {/* Call Control Buttons */}
         <View style={styles.inCallButtons}>

diff --git a/example/src/services/CallKeepService.ts b/example/src/services/CallKeepService.ts
@@ -30,6 +30,7 @@ export class CallKeepService {
   private static _instance?: CallKeepService;
   static navigation: any;
   private static otherInformation: any;
+  private static payload: any;
   constructor() {
     //setup callkeep
     // this.setupCallKeep();
@@ -130,7 +131,7 @@ export class CallKeepService {
               mainComponent: CallKeepService.otherInformation?.mainComponent,
               notificationSound: CallKeepService.otherInformation?.ringtone,
               payload: {
-                extra: 'extra',
+                callerName: name,
               },
             }
           );
@@ -149,11 +150,11 @@ export class CallKeepService {
       RNNotificationCall.addEventListener(
         'answer',
         (data: AnswerPayload | DeclinePayload) => {
-          const { callUUID } = data;
+          const { callUUID, payload } = data;
+          CallKeepService.payload = JSON.parse(payload || '');
           //open app from quit state
           RNNotificationCall.backToApp();
           //call api answer
-          console.log('answer', callUUID);
           RNCallKeep.answerIncomingCall(callUUID);
         }
       );
@@ -170,7 +171,9 @@ export class CallKeepService {
     // called when the user answer the incoming call
     //navigate to another screen
     //some project need to rehandle with redux state or other state manager refer https://github.com/linhvovan29546/react-native-full-screen-notification-incoming-call/issues/17#issuecomment-1318225574
-    CallKeepService.navigation.navigate('Detail');
+    CallKeepService.navigation.navigate('Detail', {
+      payload: CallKeepService.payload,
+    });
   }
   onCallKeepEndCallAction() {
     // const { callUUID } = answerData;