react-native-telecom 0.0.0-stage → 0.1.0

package/android/src/main/java/com/telecom/TelecomPushBridge.kt

@@ -0,0 +1,82 @@
+package com.telecom
+
+import android.content.Context
+import android.util.Log
+
+/**
+ * Native entry for FCM / push data messages when the JS runtime may be dead.
+ *
+ * Expected data keys (string values):
+ * - `uuid` or `callUUID` (required)
+ * - `handle` or `number` (required)
+ * - `callerName` or `name` (optional)
+ * - `hasVideo` ("true"/"1")
+ * - `autoAnswer` ("true"/"1")
+ * - `avatarUrl` or `avatar` (optional https/file url)
+ *
+ * Call from your `FirebaseMessagingService.onMessageReceived` for high-priority
+ * data messages with `type=incoming_call` (or always if your payload is call-only).
+ */
+object TelecomPushBridge {
+  private const val TAG = "RNTelecomPush"
+
+  @JvmStatic
+  fun isIncomingCallPayload(data: Map<String, String>): Boolean {
+    val type = data["type"] ?: data["callType"] ?: ""
+    if (type.equals("incoming_call", ignoreCase = true) ||
+      type.equals("call", ignoreCase = true)
+    ) {
+      return true
+    }
+    val uuid = data["uuid"] ?: data["callUUID"]
+    val handle = data["handle"] ?: data["number"]
+    return !uuid.isNullOrBlank() && !handle.isNullOrBlank()
+  }
+
+  /**
+   * @return true if an incoming call UI was started
+   */
+  @JvmStatic
+  fun handleIncomingCall(context: Context, data: Map<String, String>): Boolean {
+    if (!isIncomingCallPayload(data)) {
+      Log.i(TAG, "payload ignored — not an incoming call")
+      return false
+    }
+
+    val uuid = (data["uuid"] ?: data["callUUID"]).orEmpty()
+    val handle = (data["handle"] ?: data["number"]).orEmpty()
+    if (uuid.isBlank() || handle.isBlank()) {
+      Log.w(TAG, "payload missing uuid/handle")
+      return false
+    }
+
+    val callerName = data["callerName"] ?: data["name"] ?: handle
+    val hasVideo = truthy(data["hasVideo"])
+    val autoAnswer = truthy(data["autoAnswer"])
+    val avatarUrl = data["avatarUrl"] ?: data["avatar"] ?: ""
+
+    val appContext = context.applicationContext
+    val manager =
+      CallSessionManager.instance
+        ?: CallSessionManager(appContext) { _, _ ->
+          // JS may be dead; events are no-op until module binds.
+        }.also {
+          it.setup(supportsVideo = true)
+        }
+
+    Log.i(TAG, "push → displayIncomingCall uuid=$uuid handle=$handle")
+    manager.displayIncomingCall(
+      uuid = uuid,
+      handle = handle,
+      callerName = callerName,
+      hasVideo = hasVideo,
+      autoAnswer = autoAnswer,
+      avatarUrl = avatarUrl,
+    )
+    return true
+  }
+
+  private fun truthy(value: String?): Boolean {
+    return value.equals("true", ignoreCase = true) || value == "1" || value.equals("yes", ignoreCase = true)
+  }
+}

package/android/src/main/java/com/telecom/TelecomRingtonePlayer.kt

@@ -0,0 +1,109 @@
+package com.telecom
+
+import android.content.Context
+import android.media.AudioAttributes
+import android.media.AudioManager
+import android.media.Ringtone
+import android.media.RingtoneManager
+import android.os.Build
+import android.os.VibrationEffect
+import android.os.Vibrator
+import android.os.VibratorManager
+import android.util.Log
+
+/**
+ * Plays the **user's default ringtone + vibration** from system settings.
+ * Notification-channel sound alone is often silenced by OEMs while the app is
+ * foreground / showing a full-screen Activity — so we ring ourselves.
+ */
+internal object TelecomRingtonePlayer {
+  private const val TAG = "RNTelecomRingtone"
+  private var ringtone: Ringtone? = null
+  private var vibrator: Vibrator? = null
+
+  @Synchronized
+  fun start(context: Context) {
+    stop()
+
+    try {
+      val uri =
+        RingtoneManager.getActualDefaultRingtoneUri(context, RingtoneManager.TYPE_RINGTONE)
+          ?: RingtoneManager.getDefaultUri(RingtoneManager.TYPE_RINGTONE)
+
+      val tone = RingtoneManager.getRingtone(context, uri)
+      if (tone != null) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+          tone.isLooping = true
+        }
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+          tone.audioAttributes =
+            AudioAttributes.Builder()
+              .setUsage(AudioAttributes.USAGE_NOTIFICATION_RINGTONE)
+              .setContentType(AudioAttributes.CONTENT_TYPE_SONIFICATION)
+              .build()
+        }
+        // Respect silent / vibrate modes via ringer mode.
+        val am = context.getSystemService(Context.AUDIO_SERVICE) as AudioManager
+        when (am.ringerMode) {
+          AudioManager.RINGER_MODE_SILENT -> {
+            Log.i(TAG, "ringerMode=SILENT — no sound")
+          }
+          AudioManager.RINGER_MODE_VIBRATE -> {
+            Log.i(TAG, "ringerMode=VIBRATE — vibrate only")
+            startVibrate(context)
+          }
+          else -> {
+            tone.play()
+            ringtone = tone
+            startVibrate(context)
+            Log.i(TAG, "playing default ringtone uri=$uri")
+          }
+        }
+      }
+    } catch (error: Exception) {
+      Log.e(TAG, "start failed: ${error.message}", error)
+    }
+  }
+
+  @Synchronized
+  fun stop() {
+    val tone = ringtone
+    ringtone = null
+    try {
+      if (tone?.isPlaying == true) {
+        tone.stop()
+      } else {
+        tone?.stop()
+      }
+    } catch (_: Exception) {
+    }
+    val vib = vibrator
+    vibrator = null
+    try {
+      vib?.cancel()
+    } catch (_: Exception) {
+    }
+    Log.i(TAG, "ringtone + vibrate stopped")
+  }
+
+  private fun startVibrate(context: Context) {
+    val vib =
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+        val vm = context.getSystemService(Context.VIBRATOR_MANAGER_SERVICE) as VibratorManager
+        vm.defaultVibrator
+      } else {
+        @Suppress("DEPRECATION")
+        context.getSystemService(Context.VIBRATOR_SERVICE) as Vibrator
+      }
+
+    vibrator = vib
+    // Classic ring pattern: wait, buzz, wait, buzz...
+    val pattern = longArrayOf(0, 1000, 1000, 1000)
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+      vib.vibrate(VibrationEffect.createWaveform(pattern, 0))
+    } else {
+      @Suppress("DEPRECATION")
+      vib.vibrate(pattern, 0)
+    }
+  }
+}

package/android/src/main/java/com/telecom/TelecomUiConfig.kt

@@ -0,0 +1,27 @@
+package com.telecom
+
+/**
+ * Appearance / behavior knobs for the incoming full-screen host Activity.
+ * Apps can change these at runtime via [TelecomModule.setup] / JS `setup({ ui: ... })`.
+ * Layout resource `R.layout.rn_telecom_incoming_call` can also be overridden by the host app.
+ */
+data class TelecomUiConfig(
+  val incomingTitle: String = "Incoming call",
+  val answerLabel: String = "Answer",
+  val declineLabel: String = "Decline",
+  val messageLabel: String = "Message",
+  /** Light Material You cream — matches stock Android incoming UI. */
+  val backgroundColor: Int = 0xFFF7F4EF.toInt(),
+  val titleColor: Int = 0xFF79747E.toInt(),
+  val nameColor: Int = 0xFF1C1B1F.toInt(),
+  val handleColor: Int = 0xFF49454F.toInt(),
+  val answerColor: Int = 0xFF1B5E20.toInt(),
+  val declineColor: Int = 0xFF1C1B1F.toInt(),
+  /** When false, only the native CallStyle notification is shown (no Activity). */
+  val launchFullScreenOnIncoming: Boolean = true,
+) {
+  companion object {
+    @Volatile
+    var current: TelecomUiConfig = TelecomUiConfig()
+  }
+}

package/android/src/main/res/drawable/rn_telecom_action_pill.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="rectangle">
+  <solid android:color="#FFE8E4DE" />
+  <corners android:radius="48dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_answer_circle.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="oval">
+  <solid android:color="#FFFFFFFF" />
+  <size
+    android:width="64dp"
+    android:height="64dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_answer_circle_green.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="oval">
+  <solid android:color="#FF1B5E20" />
+  <size
+    android:width="72dp"
+    android:height="72dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_avatar_bg.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="oval">
+  <solid android:color="#1F2937" />
+  <size android:width="88dp" android:height="88dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_avatar_circle.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="oval">
+  <gradient
+    android:angle="135"
+    android:endColor="#FF69F0AE"
+    android:startColor="#FF1B5E20"
+    android:type="linear" />
+  <size
+    android:width="168dp"
+    android:height="168dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_btn_answer.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="rectangle">
+  <solid android:color="#43A047" />
+  <corners android:radius="28dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_btn_decline.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="rectangle">
+  <solid android:color="#E53935" />
+  <corners android:radius="28dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_btn_message.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="rectangle">
+  <solid android:color="#00FFFFFF" />
+  <stroke
+    android:width="1.5dp"
+    android:color="#FFCAC4D0" />
+  <corners android:radius="24dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_btn_secondary.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="rectangle">
+  <solid android:color="#2A2A2A" />
+  <corners android:radius="28dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_control_circle.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="oval">
+  <solid android:color="#FFE8E4DE" />
+  <size
+    android:width="60dp"
+    android:height="60dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_control_circle_on.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="oval">
+  <solid android:color="#FF1C1B1F" />
+  <size
+    android:width="60dp"
+    android:height="60dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_decline_circle.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+  android:shape="oval">
+  <solid android:color="#FFE53935" />
+  <size
+    android:width="72dp"
+    android:height="72dp" />
+</shape>

package/android/src/main/res/drawable/rn_telecom_ic_call.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#FF1B5E20"
+    android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z" />
+</vector>

package/android/src/main/res/drawable/rn_telecom_ic_call_end.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <!-- Hang-up style: phone rotated -->
+  <group
+    android:pivotX="12"
+    android:pivotY="12"
+    android:rotation="135">
+    <path
+      android:fillColor="#FFFFFFFF"
+      android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z" />
+  </group>
+</vector>

package/android/src/main/res/drawable/rn_telecom_ic_call_white.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#FFFFFFFF"
+    android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z" />
+</vector>

package/android/src/main/res/drawable/rn_telecom_ic_dialpad.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#FF1C1B1F"
+    android:pathData="M12,19c0.83,0 1.5,-0.67 1.5,-1.5h-3c0,0.83 0.67,1.5 1.5,1.5zM17.25,16.5H6.75v-1.5h10.5v1.5zM19,4H5C3.9,4 3,4.9 3,6v8c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2V6c0,-1.1 -0.9,-2 -2,-2zM19,14H5V6h14v8z" />
+  <path
+    android:fillColor="#FF1C1B1F"
+    android:pathData="M8,8h2v2H8zM11,8h2v2h-2zM14,8h2v2h-2zM8,11h2v2H8zM11,11h2v2h-2zM14,11h2v2h-2z" />
+</vector>

package/android/src/main/res/drawable/rn_telecom_ic_hold.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#FF1C1B1F"
+    android:pathData="M6,19h4V5H6v14zM14,5v14h4V5h-4z" />
+</vector>

package/android/src/main/res/drawable/rn_telecom_ic_message.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="18dp"
+  android:height="18dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#FF49454F"
+    android:pathData="M20,2H4c-1.1,0 -2,0.9 -2,2v18l4,-4h14c1.1,0 2,-0.9 2,-2V4c0,-1.1 -0.9,-2 -2,-2zM20,16H5.17L4,17.17V4h16v12z" />
+</vector>

package/android/src/main/res/drawable/rn_telecom_ic_mic.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#FF1C1B1F"
+    android:pathData="M12,14c1.66,0 2.99,-1.34 2.99,-3L15,5c0,-1.66 -1.34,-3 -3,-3S9,3.34 9,5v6c0,1.66 1.34,3 3,3zM17.3,11c0,3 -2.54,5.1 -5.3,5.1S6.7,14 6.7,11H5c0,3.41 2.72,6.23 6,6.72V21h2v-3.28c3.28,-0.48 6,-3.3 6,-6.72h-1.7z" />
+</vector>

package/android/src/main/res/drawable/rn_telecom_ic_mic_off.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#FF1C1B1F"
+    android:pathData="M19,11h-1.7c0,0.74 -0.16,1.43 -0.43,2.05l1.23,1.23c0.56,-0.98 0.9,-2.09 0.9,-3.28zM14.98,11.17c0,-0.06 0.02,-0.11 0.02,-0.17V5c0,-1.66 -1.34,-3 -3,-3S9,3.34 9,5v0.18l5.98,5.99zM4.27,3L3,4.27l6.01,6.01V11c0,1.66 1.33,3 2.99,3 0.22,0 0.44,-0.03 0.65,-0.08l1.66,1.66c-0.71,0.33 -1.5,0.52 -2.31,0.52 -2.76,0 -5.3,-2.1 -5.3,-5.1H5c0,3.41 2.72,6.23 6,6.72V21h2v-3.28c0.91,-0.13 1.77,-0.45 2.54,-0.9L19.73,21 21,19.73 4.27,3z" />
+</vector>

package/android/src/main/res/drawable/rn_telecom_ic_speaker.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#FF1C1B1F"
+    android:pathData="M3,9v6h4l5,5V4L7,9H3zM16.5,12c0,-1.77 -1.02,-3.29 -2.5,-4.03v8.05c1.48,-0.73 2.5,-2.25 2.5,-4.02zM14,3.23v2.06c2.89,0.86 5,3.54 5,6.71s-2.11,5.85 -5,6.71v2.06c4.01,-0.91 7,-4.49 7,-8.77s-2.99,-7.86 -7,-8.77z" />
+</vector>

package/android/src/main/res/layout/rn_telecom_control_item.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  android:layout_width="match_parent"
+  android:layout_height="wrap_content"
+  android:gravity="center"
+  android:orientation="vertical"
+  android:clickable="true"
+  android:focusable="true"
+  android:background="?android:attr/selectableItemBackgroundBorderless"
+  android:paddingTop="4dp"
+  android:paddingBottom="4dp">
+
+  <FrameLayout
+    android:id="@+id/rn_telecom_control_icon_bg"
+    android:layout_width="60dp"
+    android:layout_height="60dp"
+    android:background="@drawable/rn_telecom_control_circle">
+
+    <ImageView
+      android:id="@+id/rn_telecom_control_icon"
+      android:layout_width="26dp"
+      android:layout_height="26dp"
+      android:layout_gravity="center"
+      android:contentDescription="@null"
+      android:importantForAccessibility="no" />
+  </FrameLayout>
+
+  <TextView
+    android:id="@+id/rn_telecom_control_label"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="8dp"
+    android:gravity="center"
+    android:textColor="#FF1C1B1F"
+    android:textSize="12sp" />
+</LinearLayout>

package/android/src/main/res/layout/rn_telecom_incall.xml

@@ -0,0 +1,168 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Outgoing + in-call screen (Material You / Pixel style).
+  Host apps can override via res/layout/rn_telecom_incall.xml
+-->
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  android:id="@+id/rn_telecom_incall_root"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:background="#FFF7F4EF"
+  android:fitsSystemWindows="true">
+
+  <LinearLayout
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:gravity="center_horizontal"
+    android:orientation="vertical"
+    android:paddingLeft="28dp"
+    android:paddingRight="28dp"
+    android:paddingTop="64dp"
+    android:paddingBottom="32dp">
+
+    <TextView
+      android:id="@+id/rn_telecom_incall_status"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:text="Calling…"
+      android:textColor="#FF79747E"
+      android:textSize="14sp"
+      android:letterSpacing="0.02" />
+
+    <TextView
+      android:id="@+id/rn_telecom_incall_name"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_marginTop="12dp"
+      android:gravity="center"
+      android:textColor="#FF1C1B1F"
+      android:textSize="32sp"
+      android:textStyle="bold"
+      android:maxLines="2"
+      android:ellipsize="end" />
+
+    <TextView
+      android:id="@+id/rn_telecom_incall_handle"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_marginTop="6dp"
+      android:gravity="center"
+      android:textColor="#FF49454F"
+      android:textSize="16sp" />
+
+    <View
+      android:layout_width="match_parent"
+      android:layout_height="0dp"
+      android:layout_weight="1" />
+
+    <FrameLayout
+      android:id="@+id/rn_telecom_incall_avatar"
+      android:layout_width="140dp"
+      android:layout_height="140dp"
+      android:background="@drawable/rn_telecom_avatar_circle"
+      android:clipToOutline="true">
+
+      <TextView
+        android:id="@+id/rn_telecom_incall_initials"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:gravity="center"
+        android:textColor="#FFFFFFFF"
+        android:textSize="48sp"
+        android:textStyle="bold" />
+
+      <ImageView
+        android:id="@+id/rn_telecom_incall_avatar_image"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:contentDescription="@null"
+        android:scaleType="centerCrop"
+        android:visibility="gone" />
+    </FrameLayout>
+
+    <View
+      android:layout_width="match_parent"
+      android:layout_height="0dp"
+      android:layout_weight="1" />
+
+    <!-- Keypad (hidden until toggled) -->
+    <GridLayout
+      android:id="@+id/rn_telecom_keypad"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_marginBottom="16dp"
+      android:columnCount="3"
+      android:visibility="gone" />
+
+    <!-- Control row -->
+    <LinearLayout
+      android:id="@+id/rn_telecom_controls"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:gravity="center"
+      android:orientation="horizontal">
+
+      <include
+        android:id="@+id/rn_telecom_btn_mute"
+        layout="@layout/rn_telecom_control_item"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_weight="1" />
+
+      <include
+        android:id="@+id/rn_telecom_btn_keypad"
+        layout="@layout/rn_telecom_control_item"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_weight="1" />
+
+      <include
+        android:id="@+id/rn_telecom_btn_speaker"
+        layout="@layout/rn_telecom_control_item"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_weight="1" />
+
+      <include
+        android:id="@+id/rn_telecom_btn_hold"
+        layout="@layout/rn_telecom_control_item"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_weight="1" />
+    </LinearLayout>
+
+    <LinearLayout
+      android:id="@+id/rn_telecom_btn_end"
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_marginTop="28dp"
+      android:gravity="center"
+      android:orientation="vertical"
+      android:clickable="true"
+      android:focusable="true"
+      android:background="?android:attr/selectableItemBackgroundBorderless">
+
+      <FrameLayout
+        android:layout_width="72dp"
+        android:layout_height="72dp"
+        android:background="@drawable/rn_telecom_decline_circle">
+
+        <ImageView
+          android:layout_width="32dp"
+          android:layout_height="32dp"
+          android:layout_gravity="center"
+          android:contentDescription="@null"
+          android:src="@drawable/rn_telecom_ic_call_end"
+          android:importantForAccessibility="no" />
+      </FrameLayout>
+
+      <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="8dp"
+        android:text="End"
+        android:textColor="#FF1C1B1F"
+        android:textSize="14sp" />
+    </LinearLayout>
+  </LinearLayout>
+</FrameLayout>