Allow customising of styles bkdev98#36

Geraint White · Geraint White · commit 353b2beb8f41 · 2022-06-14T16:11:08.000+01:00
diff --git a/README.md b/README.md
@@ -84,7 +84,7 @@ useEffect(() => {
 }, []);
 ```
 
-In `index.js` or anywhere firebase background handler lies: 
+In `index.js` or anywhere firebase background handler lies:
 
 ```javascript
 import messaging from '@react-native-firebase/messaging';
@@ -95,13 +95,13 @@ messaging().setBackgroundMessageHandler(async remoteMessage => {
   // Receive remote message
   if (remoteMessage?.notification?.title === 'Incoming Call') {
     // Display incoming call activity.
-    IncomingCall.display(
-      'callUUIDv4', // Call UUID v4
-      'Quocs', // Username
-      'https://avatars3.githubusercontent.com/u/16166195', // Avatar URL
-      'Incomming Call', // Info text
-      20000 // Timeout for end call after 20s
-    );
+    IncomingCall.display({
+      uuid: 'callUUIDv4', // Call UUID v4
+      name: 'Quocs', // Username
+      avatar: 'https://avatars3.githubusercontent.com/u/16166195', // Avatar URL
+      info: 'Incomming Call', // Info text
+      timeout: 20000 // Timeout for end call after 20s
+    });
   } else if (remoteMessage?.notification?.title === 'Missed Call') {
     // Terminate incoming activity. Should be called when call expired.
     IncomingCall.dismiss();
diff --git a/android/src/main/java/com/incomingcall/IncomingCallModule.java b/android/src/main/java/com/incomingcall/IncomingCallModule.java
@@ -11,6 +11,7 @@
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.Callback;
 import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
 
@@ -34,25 +35,27 @@ public String getName() {
     }
 
     @ReactMethod
-    public void display(String uuid, String name, String avatar, String info, int timeout) {
+    public void display(ReadableMap options) {
         if (UnlockScreenActivity.active) {
             return;
         }
         if (reactContext != null) {
             Bundle bundle = new Bundle();
-            bundle.putString("uuid", uuid);
-            bundle.putString("name", name);
-            bundle.putString("avatar", avatar);
-            bundle.putString("info", info);
-            bundle.putInt("timeout", timeout);
+            bundle.putString("uuid", options.getString("uuid"));
+            bundle.putString("name", options.getString("name"));
+            bundle.putString("avatar", options.getString("avatar"));
+            bundle.putString("info", options.getString("info"));
+            bundle.putString("font", options.getString("font"));
+            bundle.putInt("timeout", options.getInt("timeout"));
             Intent i = new Intent(reactContext, UnlockScreenActivity.class);
             i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_REORDER_TO_FRONT | Intent.FLAG_ACTIVITY_SINGLE_TOP);
             i.addFlags(WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED +
             WindowManager.LayoutParams.FLAG_DISMISS_KEYGUARD +
             WindowManager.LayoutParams.FLAG_TURN_SCREEN_ON);
+
             i.putExtras(bundle);
             reactContext.startActivity(i);
-            
+
         }
     }
 
diff --git a/android/src/main/java/com/incomingcall/UnlockScreenActivity.java b/android/src/main/java/com/incomingcall/UnlockScreenActivity.java
@@ -16,6 +16,7 @@
 import android.content.Context;
 import android.media.MediaPlayer;
 import android.provider.Settings;
+import android.graphics.Typeface;
 import java.util.List;
 import java.util.Timer;
 import java.util.TimerTask;
@@ -97,6 +98,12 @@ protected void onCreate(Bundle savedInstanceState) {
                 String info = bundle.getString("info");
                 tvInfo.setText(info);
             }
+            if (bundle.containsKey("font")) {
+                String font = bundle.getString("font");
+                Typeface tf = Typeface.createFromAsset(getAssets(), font);
+                tvName.setTypeface(tf);
+                tvInfo.setTypeface(tf);
+            }
             if (bundle.containsKey("avatar")) {
                 String avatar = bundle.getString("avatar");
                 if (avatar != null) {
diff --git a/android/src/main/res/layout/activity_call_incoming.xml b/android/src/main/res/layout/activity_call_incoming.xml
@@ -17,8 +17,7 @@
     >
 
         <RelativeLayout
-            android:layout_width="170dp"
-            android:layout_height="170dp"
+            style="@style/avatarWrapper"
         >
             <ImageView
                 android:id="@+id/ivAvatar"
@@ -58,19 +57,15 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="20dp"
-            android:textSize="22sp"
-            android:fontFamily="sans-serif"
-            android:textColor="#FFFFFF"
+            style="@style/tvName"
         />
 
         <TextView
             android:id="@+id/tvInfo"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="10dp"
-            android:textSize="14sp"
-            android:fontFamily="sans-serif"
-            android:textColor="#ADADAD"
+            style="@style/tvInfo"
         />
 
     </LinearLayout>
@@ -81,7 +76,7 @@
         android:orientation="horizontal"
         android:layout_alignParentBottom="true"
         android:layout_centerHorizontal="true"
-        android:layout_marginBottom="60dp"
+        style="@style/buttonWrapper"
     >
 
         <LinearLayout
@@ -95,10 +90,9 @@
         >
             <com.incomingcall.AnimateImage
                 android:id="@+id/ivDeclineCall"
-                android:layout_width="60dp"
-                android:layout_height="60dp"
                 android:scaleType="centerInside"
                 android:src="@drawable/ic_decline_call"
+                style="@style/ivDeclineCall"
             />
             <TextView
                 android:id="@+id/tvDecline"
@@ -123,10 +117,9 @@
         >
             <com.incomingcall.AnimateImage
                 android:id="@+id/ivAcceptCall"
-                android:layout_width="60dp"
-                android:layout_height="60dp"
                 android:scaleType="centerInside"
                 android:src="@drawable/ic_accept_call"
+                style="@style/ivAcceptCall"
             />
             <TextView
                 android:id="@+id/tvAccept"
@@ -142,4 +135,4 @@
         </LinearLayout>
 
     </LinearLayout>
-</RelativeLayout>
+</RelativeLayout>
diff --git a/android/src/main/res/values/styles.xml b/android/src/main/res/values/styles.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="avatarWrapper">
+        <item name="android:layout_width">170dp</item>
+        <item name="android:layout_height">170dp</item>
+    </style>
+    <style name="buttonWrapper">
+        <item name="android:layout_marginBottom">60dp</item>
+    </style>
+    <style name="tvName">
+        <item name="android:textSize">22sp</item>
+        <item name="android:fontFamily">sans-serif</item>
+        <item name="android:textColor">#FFFFFF</item>
+    </style>
+    <style name="tvInfo">
+        <item name="android:textSize">14sp</item>
+        <item name="android:fontFamily">sans-serif</item>
+        <item name="android:textColor">#ADADAD</item>
+    </style>
+    <style name="ivAcceptCall">
+        <item name="android:layout_width">60sp</item>
+        <item name="android:layout_height">60sp</item>
+    </style>
+    <style name="ivDeclineCall">
+        <item name="android:layout_width">60sp</item>
+        <item name="android:layout_height">60sp</item>
+    </style>
+</resources>
diff --git a/example/App.js b/example/App.js
@@ -68,12 +68,12 @@ export function handleRemoteMessage(remoteMessage, isHeadless) {
         }
       });
     } else {
-      IncomingCall.display(
-        callUUID,
-        'Quocs',
-        'https://avatars3.githubusercontent.com/u/16166195',
-        'Incomming Call'
-      );
+      IncomingCall.display({
+        uuid: callUUID,
+        name: 'Quocs',
+        avatar: 'https://avatars3.githubusercontent.com/u/16166195',
+        info: 'Incomming Call'
+      });
       DeviceEventEmitter.addListener('endCall', payload => {
         // End call action here
         console.log('endCall', payload);
