docs: re-write example UI

linhvovan29546 · Nov 9, 2024 · 25e419b · 25e419b
1 parent 9b4d9e2
commit 25e419b
Show file tree

Hide file tree

Showing 9 changed files with 426 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -123,9 +123,9 @@ function displayNotification(uid:string, avatar?:string, timeout?:number, foregr
 | `channelName`        | `string`              | Channel name of the notification.                                             | Yes      |
 | `notificationIcon`   | `string`              | Icon of the notification (mipmap).                                            | Yes      |
 | `notificationTitle`  | `string`              | Title of the notification.                                                    | Yes      |
-| `notificationBody`   | `string`              | Body text of the notification.                                                | Yes      |
-| `answerText`         | `string`              | Label for the answer button.                                                  | Yes      |
-| `declineText`        | `string`              | Label for the decline button.                                                 | Yes      |
+| `notificationBody`   | `string`              | Body text of the notification. On Android 12 and above, if the notificationBody is empty, the incoming call notification will display the description from CallStyle instead of this property.                                          | No      |
+| `answerText`         | `string`              | Label for the answer button. On Android 12 and above, the incoming call notification displays the answerText from CallStyle instead of this property.                                             | Yes      |
+| `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       |

diff --git a/example/android/app/src/main/res/raw/skype_ring.mp3 b/example/android/app/src/main/res/raw/skype_ring.mp3
diff --git a/example/package.json b/example/package.json
@@ -10,10 +10,13 @@
     "build:ios": "cd ios && xcodebuild -workspace FullScreenNotificationIncomingCallExample.xcworkspace -scheme FullScreenNotificationIncomingCallExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO"
   },
   "dependencies": {
+    "@react-native-community/checkbox": "^0.5.17",
     "@react-native-community/masked-view": "^0.1.11",
+    "@react-native-picker/picker": "^2.9.0",
     "@react-navigation/native": "^5.8.0",
     "@react-navigation/stack": "^5.10.0",
     "@types/react": "18.3.1",
+    "add": "^2.0.6",
     "react": "18.2.0",
     "react-native": "0.74.1",
     "react-native-background-timer": "^2.4.1",
@@ -22,7 +25,8 @@
     "react-native-permissions": "^3.8.0",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "3.29.0",
-    "uuid-random": "^1.3.2"
+    "uuid-random": "^1.3.2",
+    "yarn": "^1.22.22"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/example/src/CustomIncomingCall/index.tsx b/example/src/CustomIncomingCall/index.tsx
@@ -1,29 +1,46 @@
 import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, 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);
   const payload = JSON.parse(props.payload);
   console.log('payload', payload);
+
   return (
     <View style={styles.container}>
-      <TouchableOpacity
-        style={styles.box}
-        onPress={() => {
-          RNNotificationCall.declineCall(props.uuid, props.payload);
+      {/* Caller Info */}
+      <Text style={styles.callerName}>{props.name || 'Unknown Caller'}</Text>
+      <Image
+        source={{
+          uri:
+            payload.callerImage ||
+            'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKet-b99huP_BtZT_HUqvsaSz32lhrcLtIDQ&s',
         }}
-      >
-        <Text>Decline</Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        style={styles.box}
-        onPress={() => {
-          RNNotificationCall.answerCall(props.uuid, props.payload);
-        }}
-      >
-        <Text>Answer</Text>
-      </TouchableOpacity>
+        style={styles.callerImage}
+      />
+
+      {/* Decline and Answer Buttons */}
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity
+          style={[styles.button, styles.declineButton]}
+          onPress={() => {
+            RNNotificationCall.declineCall(props.uuid, props.payload);
+          }}
+        >
+          <Text style={styles.buttonText}>Decline</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.button, styles.answerButton]}
+          onPress={() => {
+            RNNotificationCall.answerCall(props.uuid, props.payload);
+          }}
+        >
+          <Text style={styles.buttonText}>Answer</Text>
+        </TouchableOpacity>
+      </View>
     </View>
   );
 }
@@ -33,11 +50,43 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'white',
+    backgroundColor: '#f2f2f2',
+    paddingHorizontal: 20,
+  },
+  callerName: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginVertical: 10,
+    color: '#333',
+  },
+  callerImage: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    marginBottom: 30,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '80%',
+    marginTop: 30,
+  },
+  button: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 15,
+    marginHorizontal: 10,
+    borderRadius: 10,
+  },
+  declineButton: {
+    backgroundColor: '#ff4d4d',
+  },
+  answerButton: {
+    backgroundColor: '#4CAF50',
   },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
+  buttonText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: '600',
   },
 });
diff --git a/example/src/Detail/index.tsx b/example/src/Detail/index.tsx
@@ -3,32 +3,111 @@ import { useNavigation } from '@react-navigation/native';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { CallKeepService } from '../services/CallKeepService';
 
-export default function Detail() {
+export default function InCallScreen() {
   const navigation = useNavigation();
+  const [isMuted, setIsMuted] = React.useState(false); // Mute state
+  const [isOnHold, setIsOnHold] = React.useState(false); // Hold state
+
+  // Handle end call
+  const handleEndCall = () => {
+    CallKeepService.instance().endAllCall();
+    navigation.goBack();
+  };
+
+  // Handle mute toggle
+  const handleMute = () => {
+    setIsMuted((prev) => !prev);
+    // Implement mute logic if needed here (e.g., CallKeepService mute call)
+  };
+
+  // Handle hold toggle
+  const handleHold = () => {
+    setIsOnHold((prev) => !prev);
+    // Implement hold logic if needed here
+  };
+
   return (
     <View style={styles.container}>
-      <TouchableOpacity
-        onPress={() => {
-          navigation.goBack();
-          CallKeepService.instance().endAllCall();
-        }}
-      >
-        <Text>Go back</Text>
-      </TouchableOpacity>
+      <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>
+
+        {/* Call Control Buttons */}
+        <View style={styles.inCallButtons}>
+          <TouchableOpacity
+            style={[styles.button, styles.muteButton]}
+            onPress={handleMute}
+          >
+            <Text style={styles.buttonText}>{isMuted ? 'Unmute' : 'Mute'}</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={[styles.button, styles.holdButton]}
+            onPress={handleHold}
+          >
+            <Text style={styles.buttonText}>
+              {isOnHold ? 'Resume' : 'Hold'}
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={[styles.button, styles.endCallButton]}
+            onPress={handleEndCall}
+          >
+            <Text style={styles.buttonText}>End Call</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#333',
+  },
+  inCallContainer: {
     justifyContent: 'center',
-    backgroundColor: 'blue',
+    alignItems: 'center',
+  },
+  callStatus: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: 'white',
+    marginBottom: 20,
+  },
+  callerInfo: {
+    fontSize: 18,
+    color: 'white',
+    marginBottom: 40,
+  },
+  inCallButtons: {
+    flexDirection: 'row', // Use row to align buttons horizontally
+    justifyContent: 'space-around', // Space between buttons
+    width: '80%', // Give enough space for buttons to fit
+  },
+  button: {
+    width: 80, // Give each button a fixed width
+    paddingVertical: 15,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  muteButton: {
+    backgroundColor: '#FFC107', // Yellow for mute
+  },
+  holdButton: {
+    backgroundColor: '#2196F3', // Blue for hold
+  },
+  endCallButton: {
+    backgroundColor: '#FF5722', // Red for end call
   },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
+  buttonText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: 'bold',
   },
 });