@nativetalkcommunications/react-native-call-sdk 0.1.0

package/lib/module/helpers.js

@@ -0,0 +1,161 @@
+/**
+ * Strips `http(s)://` and trailing `/` from a tenant domain.
+ *
+ * Multi-tenant backends often hand the SDK an HTTP URL ("https://t1.example.com/")
+ * when what we need is a bare SIP host ("t1.example.com"). Doing this once
+ * here is friendlier than failing the registration with a cryptic error.
+ */
+export function formatTenantDomain(domain) {
+    if (!domain)
+        return '';
+    return domain.replace(/^https?:\/\//, '').replace(/\/$/, '');
+}
+/**
+ * Extract the user-part of `sip:user@domain` (or returns the input unchanged).
+ *
+ * The regex stops at `@`, `;` (URI params like `;transport=tcp`), and `>`
+ * (display-name angle brackets) so it handles all three common SIP URI
+ * formats without separate parsers.
+ */
+export function parseSipUser(sipUri = '') {
+    const m = /sip:([^@;>]+)/i.exec(sipUri);
+    return m?.[1] ?? sipUri.replace(/^sip:/i, '');
+}
+// Allowlist anything dialable: digits plus the three special SIP keys.
+// Notably DROPS letters — PSTN gateways reject them, and the dial-pad
+// converts letters via the standard ABC/DEF mapping before getting here.
+export function sanitizeDial(input = '') {
+    return input.replace(/[^\d+#*]/g, '');
+}
+/** Format seconds as `M:SS` or `H:MM:SS`. */
+export function formatDuration(totalSeconds) {
+    const s = Math.max(0, Math.floor(totalSeconds));
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const sec = s % 60;
+    const pad = (n) => String(n).padStart(2, '0');
+    return h ? `${h}:${pad(m)}:${pad(sec)}` : `${m}:${pad(sec)}`;
+}
+/** Convert two-character initials for avatar placeholders. */
+export function initialsFrom(name) {
+    return (name || '??').slice(0, 2).toUpperCase();
+}
+/**
+ * Linphone numeric-state → string-state mapping.
+ *
+ * The SDK's current native modules emit states as strings ("Connected"),
+ * but older Linphone bindings — and any third party that wires up the
+ * native module directly — may still send the raw enum ordinals. Keeping
+ * this map means a Linphone upgrade or a different binding doesn't break
+ * existing apps.
+ */
+const CALL_STATE_BY_INT = {
+    0: 'Idle',
+    1: 'IncomingReceived',
+    2: 'PushIncomingReceived',
+    3: 'OutgoingInit',
+    4: 'OutgoingProgress',
+    5: 'OutgoingRinging',
+    6: 'OutgoingEarlyMedia',
+    7: 'Connected',
+    8: 'StreamsRunning',
+    9: 'Pausing',
+    10: 'Paused',
+    11: 'Resuming',
+    12: 'Referred',
+    13: 'Error',
+    14: 'End',
+    15: 'PausedByRemote',
+    16: 'UpdatedByRemote',
+    17: 'IncomingEarlyMedia',
+    18: 'Updating',
+    19: 'Released',
+    20: 'EarlyUpdatedByRemote',
+    21: 'EarlyUpdating',
+};
+const REG_STATE_BY_INT = {
+    0: 'none',
+    1: 'progress',
+    2: 'ok',
+    3: 'cleared',
+    4: 'failed',
+};
+/** Normalise a raw call-state value (string or int) to its canonical string form. */
+export function callStateName(raw) {
+    if (typeof raw === 'number')
+        return CALL_STATE_BY_INT[raw] ?? String(raw);
+    return String(raw ?? '');
+}
+/** Normalise a raw registration-state value (string or int) to canonical lowercase string. */
+export function regStateName(raw) {
+    if (typeof raw === 'number') {
+        return REG_STATE_BY_INT[raw] ?? 'unknown';
+    }
+    const s = String(raw ?? '').toLowerCase();
+    if (s === 'none' ||
+        s === 'progress' ||
+        s === 'ok' ||
+        s === 'cleared' ||
+        s === 'failed') {
+        return s;
+    }
+    return 'unknown';
+}
+/**
+ * Map a raw call status to a user-friendly UI label.
+ *
+ * You typically don't need to call this directly — `useCall().callStatus`
+ * already returns the canonical state name, and the bundled
+ * `<OutgoingCallView>` does its own mapping. Use this when building a custom UI.
+ */
+export function callStatusLabel(status) {
+    switch (status) {
+        case 'OutgoingInit':
+        case 'OutgoingProgress':
+        case 'OutgoingEarlyMedia':
+            return 'Calling…';
+        case 'OutgoingRinging':
+            return 'Ringing…';
+        case 'Connected':
+        case 'StreamsRunning':
+            return 'In progress';
+        case 'Pausing':
+            return 'Pausing…';
+        case 'Paused':
+        case 'PausedByRemote':
+            return 'On hold';
+        case 'Resuming':
+            return 'Resuming…';
+        case 'End':
+        case 'Released':
+            return 'Call ended';
+        case 'Error':
+            return 'Call failed';
+        case 'IncomingReceived':
+        case 'PushIncomingReceived':
+        case 'IncomingEarlyMedia':
+            return 'Incoming call';
+        default:
+            return status || 'Idle';
+    }
+}
+/**
+ * Resolve a destination string to a SIP URI.
+ *
+ * Three-case dispatch in order of "most explicit wins":
+ *   1. `sip:100@gw.com`     → already a URI, pass through unchanged.
+ *   2. `100@gw.com`         → caller specified the gateway, just prefix `sip:`.
+ *   3. `100` (bare)         → fill in the configured domain.
+ *
+ * This lets apps mix internal-extension dialling with PSTN gateway URIs
+ * without needing a separate API.
+ */
+export function destinationToSipUri(destination, domain) {
+    if (!destination)
+        return '';
+    if (destination.startsWith('sip:'))
+        return destination;
+    if (destination.includes('@'))
+        return `sip:${destination}`;
+    return `sip:${destination}@${formatTenantDomain(domain)}`;
+}

package/lib/module/index.js

@@ -0,0 +1,57 @@
+/**
+ * Public entry point for `@nativetalk/react-native-call-sdk`.
+ *
+ * Most apps only need:
+ *
+ * ```tsx
+ * import { CallProvider, useCall } from '@nativetalk/react-native-call-sdk';
+ * ```
+ *
+ * Optional UI components are exported from the `/ui` sub-path:
+ *
+ * ```tsx
+ * import { Dialer, IncomingCallView, OutgoingCallView } from '@nativetalk/react-native-call-sdk/ui';
+ * ```
+ *
+ * Power-users can reach the raw native bridge:
+ *
+ * ```ts
+ * import { CallEngine } from '@nativetalk/react-native-call-sdk';
+ * CallEngine.call('sip:100@sip.example.com');
+ * ```
+ */
+export { CallProvider, useCall, useCallSafe } from './CallProvider';
+export { callStateName, callStatusLabel, destinationToSipUri, formatDuration, formatTenantDomain, initialsFrom, parseSipUser, regStateName, sanitizeDial, } from './helpers';
+import * as Native from './native';
+/**
+ * Direct access to the native bridge.
+ *
+ * This is escape-hatch territory — prefer `useCall()` whenever possible. Use
+ * `CallEngine` only when you need to drive the SDK from outside React (e.g.
+ * a headless task) or to wire iOS VoIP push tokens.
+ */
+export const CallEngine = {
+    init: Native.init,
+    register: Native.register,
+    call: Native.call,
+    answer: Native.answer,
+    end: Native.end,
+    hangup: Native.end,
+    decline: Native.decline,
+    mute: Native.mute,
+    speaker: Native.speaker,
+    hold: Native.hold,
+    resume: Native.resume,
+    sendDtmf: Native.sendDtmf,
+    playKeyTone: Native.playKeyTone,
+    refreshRegisters: Native.refreshRegisters,
+    setRegisterEnabled: Native.setRegisterEnabled,
+    getRegistrationStatus: Native.getRegistrationStatus,
+    getCallLogs: Native.getCallLogs,
+    startNativeServices: Native.startNativeServices,
+    stopNativeServices: Native.stopNativeServices,
+    registerVoipToken: Native.registerVoipToken,
+    ensureMicPermission: Native.ensureMicPermission,
+    on: Native.on,
+};
+export { callEvents } from './native';

package/lib/module/native.js

@@ -0,0 +1,123 @@
+/**
+ * Thin bridge to the native `NativetalkCallSdk` module.
+ *
+ * This file is the only place that talks to `NativeModules` and the event
+ * emitter. Everything else in the SDK uses these exports so the JS layer
+ * stays testable.
+ *
+ * If you see "TurboModuleRegistry … was not found" at runtime, the native
+ * library isn't linked. See `docs/installation.md`.
+ */
+import { NativeEventEmitter, NativeModules, PermissionsAndroid, Platform, } from 'react-native';
+const LINKING_ERROR = `The package '@nativetalk/react-native-call-sdk' doesn't seem to be linked. Make sure:\n\n` +
+    `- you rebuilt the app after installing the package\n` +
+    `- you are not using Expo Go (use a dev client or bare workflow)\n` +
+    `- (iOS) you ran 'pod install' inside the ios/ directory\n`;
+// Proxy fallback: if autolinking failed, every method access throws a helpful
+// error instead of a cryptic "undefined is not a function". This means a
+// misconfigured app crashes EARLY with a clear message, not deep inside JS.
+const NativetalkCallSdk = NativeModules.NativetalkCallSdk ??
+    new Proxy({}, {
+        get() {
+            throw new Error(LINKING_ERROR);
+        },
+    });
+// Single shared emitter — re-creating it per subscription wastes native
+// handlers and can drop events during the swap.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const callEvents = new NativeEventEmitter(NativetalkCallSdk);
+/** Request microphone permission on Android. Returns true if granted (or platform is iOS). */
+export async function ensureMicPermission() {
+    if (Platform.OS !== 'android')
+        return true;
+    const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, {
+        title: 'Microphone Permission',
+        message: 'Microphone access is required to make and receive calls.',
+        buttonPositive: 'OK',
+    });
+    return granted === PermissionsAndroid.RESULTS.GRANTED;
+}
+// --- Core lifecycle ---
+// Idempotent on the native side, safe to call multiple times.
+export function init(cfg) {
+    return NativetalkCallSdk.init(cfg ?? {});
+}
+// Android-only: iOS uses CallKit + VoIP push instead of a background
+// service. Guarding here keeps the JS API symmetric across platforms.
+export function startNativeServices() {
+    if (Platform.OS !== 'android')
+        return;
+    NativetalkCallSdk.startNativeServices();
+}
+export function stopNativeServices(logout = false) {
+    if (Platform.OS !== 'android')
+        return;
+    NativetalkCallSdk.stopNativeServices(logout);
+}
+export function register(account) {
+    NativetalkCallSdk.register(account);
+}
+// Optional-chained: older native builds may not export this method, and
+// we'd rather no-op than crash on a non-critical refresh.
+export function refreshRegisters() {
+    NativetalkCallSdk.refreshRegisters?.();
+}
+export function setRegisterEnabled(enabled) {
+    NativetalkCallSdk.setRegisterEnabled(enabled);
+}
+export function getRegistrationStatus() {
+    return NativetalkCallSdk.getRegistrationStatus();
+}
+// --- Call control ---
+export function call(sipUri) {
+    NativetalkCallSdk.call(sipUri);
+}
+export function answer() {
+    NativetalkCallSdk.answer();
+}
+export function end() {
+    NativetalkCallSdk.end();
+}
+export function decline(reason = 'declined') {
+    NativetalkCallSdk.decline?.(reason);
+}
+export function mute(on) {
+    NativetalkCallSdk.mute(on);
+}
+export function speaker(on) {
+    NativetalkCallSdk.speaker(on);
+}
+export function hold() {
+    NativetalkCallSdk.hold();
+}
+export function resume() {
+    NativetalkCallSdk.resume();
+}
+export function sendDtmf(digit) {
+    NativetalkCallSdk.sendDtmf(digit);
+}
+export function playKeyTone(digit) {
+    NativetalkCallSdk.playKeyTone(digit);
+}
+// --- Call logs ---
+export function getCallLogs() {
+    return NativetalkCallSdk.getCallLogs();
+}
+// --- iOS push token (advanced; only used if you wire VoIP push manually) ---
+// Call from the host AppDelegate's PushKit `didUpdate` handler so the token
+// gets attached to the SIP account params. Android FCM uses a different flow.
+export function registerVoipToken(hex) {
+    if (Platform.OS !== 'ios')
+        return;
+    NativetalkCallSdk.registerVoipToken?.(hex);
+}
+export const on = {
+    RegistrationChanged: (cb) => callEvents.addListener('RegistrationChanged', cb),
+    CallIncoming: (cb) => callEvents.addListener('CallIncoming', cb),
+    CallState: (cb) => callEvents.addListener('CallState', cb),
+    CallEnded: (cb) => callEvents.addListener('CallEnded', cb),
+    // The TM* events are Android-only (telephony observer for native GSM
+    // calls). They never fire on iOS but the subscription is harmless.
+    TMPhoneCallState: (cb) => callEvents.addListener('TMPhoneCallState', cb),
+    TMPhoneCallInfo: (cb) => callEvents.addListener('TMPhoneCallInfo', cb),
+};

package/lib/module/types.js

@@ -0,0 +1,7 @@
+/**
+ * Public types for the Nativetalk Call SDK.
+ *
+ * These describe the SIP account configuration, registration state, call
+ * lifecycle events, and the shape of `useCall()` and `<CallProvider>`.
+ */
+export {};

package/lib/module/ui/Avatar.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+/** Tiny initials-circle used by the bundled call screens. */
+export function Avatar({ initials, size = 80, background = '#EEF2FF', color = '#2D6BFF', style, textStyle, }) {
+    return (<View style={[
+            styles.base,
+            { width: size, height: size, borderRadius: size / 2, backgroundColor: background },
+            style,
+        ]}>
+      <Text style={[
+            styles.text,
+            { color, fontSize: Math.floor(size * 0.4) },
+            textStyle,
+        ]}>
+        {(initials || '??').slice(0, 2).toUpperCase()}
+      </Text>
+    </View>);
+}
+const styles = StyleSheet.create({
+    base: { alignItems: 'center', justifyContent: 'center' },
+    text: { fontWeight: '700' },
+});

package/lib/module/ui/Dialer.js

@@ -0,0 +1,162 @@
+/**
+ * Bundled dial-pad component.
+ *
+ * Drop it anywhere inside a `<CallProvider>` and it'll dial through the SDK.
+ * Override almost everything via props if you want to keep the layout but
+ * change the look.
+ */
+import React, { useState } from 'react';
+import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, useWindowDimensions, } from 'react-native';
+import { useCall } from '../CallProvider';
+import { sanitizeDial } from '../helpers';
+import { mergeTheme } from './theme';
+const dialPad = [
+    [
+        { number: '1', letters: '' },
+        { number: '2', letters: 'ABC' },
+        { number: '3', letters: 'DEF' },
+    ],
+    [
+        { number: '4', letters: 'GHI' },
+        { number: '5', letters: 'JKL' },
+        { number: '6', letters: 'MNO' },
+    ],
+    [
+        { number: '7', letters: 'PQRS' },
+        { number: '8', letters: 'TUV' },
+        { number: '9', letters: 'WXYZ' },
+    ],
+    [
+        { number: '*', letters: '' },
+        { number: '0', letters: '+' },
+        { number: '#', letters: '' },
+    ],
+];
+export function Dialer({ initialValue = '', onDialed, header, renderCallButton, theme, playKeyTones = true, }) {
+    const [input, setInput] = useState(initialValue);
+    const { dial, playKeyTone } = useCall();
+    const { width, height } = useWindowDimensions();
+    const isCompact = height < 760;
+    const buttonSize = Math.min(width / 4.3, isCompact ? 68 : 84);
+    const t = mergeTheme(theme);
+    const handlePress = (value) => {
+        if (playKeyTones)
+            playKeyTone(value);
+        setInput((prev) => prev + value);
+    };
+    const handleBackspace = () => setInput((prev) => prev.slice(0, -1));
+    const handleCall = async () => {
+        if (!input)
+            return;
+        try {
+            await dial(input);
+            onDialed?.(input);
+        }
+        catch (err) {
+            // Errors surface via <CallProvider onError>. Swallow here so the dialer
+            // doesn't crash the host app.
+        }
+    };
+    const callDisabled = input.length === 0;
+    return (<View style={[styles.container, { backgroundColor: t.background }]}>
+      {header}
+      <View style={styles.inputContainer}>
+        <TextInput value={input} placeholder="Enter Number" placeholderTextColor="#ccc" onChangeText={(s) => setInput(sanitizeDial(s))} keyboardType="phone-pad" inputMode="tel" autoCorrect={false} autoCapitalize="none" maxLength={64} style={[styles.inputText, { color: t.text }]} returnKeyType="done" onSubmitEditing={handleCall}/>
+        {input.length > 0 && (<TouchableOpacity style={styles.clearButton} onPress={handleBackspace}>
+            <Text style={{ fontSize: 22, color: '#999' }}>⌫</Text>
+          </TouchableOpacity>)}
+      </View>
+
+      <ScrollView style={styles.padContainer} contentContainerStyle={[
+            styles.padContent,
+            { paddingTop: isCompact ? 16 : 30, paddingBottom: 24 },
+        ]} bounces={false} showsVerticalScrollIndicator={false}>
+        {dialPad.map((row, i) => (<View style={[styles.padRow, { marginBottom: isCompact ? 8 : 10 }]} key={i}>
+            {row.map((item) => (<TouchableOpacity key={item.number} style={[
+                    styles.padButton,
+                    {
+                        width: buttonSize,
+                        height: buttonSize,
+                        borderRadius: buttonSize / 2,
+                        marginHorizontal: isCompact ? 6 : 8,
+                    },
+                ]} onPress={() => handlePress(item.number)} activeOpacity={0.8}>
+                <Text style={[
+                    styles.padNumber,
+                    { fontSize: isCompact ? 28 : 30, color: t.text },
+                ]}>
+                  {item.number}
+                </Text>
+                {!!item.letters && (<Text style={[styles.padLetters, { color: t.subtext }]}>
+                    {item.letters}
+                  </Text>)}
+              </TouchableOpacity>))}
+          </View>))}
+
+        <View style={{ marginTop: isCompact ? 10 : 15 }}>
+          {renderCallButton ? (renderCallButton({
+            onPress: handleCall,
+            disabled: callDisabled,
+            number: input,
+        })) : (<TouchableOpacity onPress={handleCall} disabled={callDisabled} style={[
+                styles.callButton,
+                {
+                    backgroundColor: callDisabled ? '#ccc' : t.answer,
+                    width: isCompact ? 62 : 70,
+                    height: isCompact ? 62 : 70,
+                    borderRadius: (isCompact ? 62 : 70) / 2,
+                },
+            ]}>
+              <Text style={{ color: '#fff', fontSize: 28 }}>📞</Text>
+            </TouchableOpacity>)}
+        </View>
+      </ScrollView>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 100,
+        marginTop: 10,
+        marginBottom: 10,
+        paddingHorizontal: 30,
+        position: 'relative',
+    },
+    inputText: {
+        flex: 1,
+        fontSize: 26,
+        textAlign: 'center',
+        fontWeight: '600',
+        letterSpacing: 2,
+        paddingVertical: 12,
+    },
+    clearButton: {
+        position: 'absolute',
+        right: 35,
+        padding: 6,
+        zIndex: 10,
+    },
+    padContainer: {
+        flex: 1,
+        borderTopLeftRadius: 22,
+        borderTopRightRadius: 22,
+    },
+    padContent: { alignItems: 'center' },
+    padRow: { flexDirection: 'row', justifyContent: 'center' },
+    padButton: {
+        backgroundColor: '#fff',
+        justifyContent: 'center',
+        alignItems: 'center',
+        elevation: 1,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.07,
+        shadowRadius: 1.5,
+    },
+    padNumber: { fontWeight: '600', textAlign: 'center' },
+    padLetters: { fontSize: 11, letterSpacing: 2, textAlign: 'center', marginTop: 2 },
+    callButton: { alignItems: 'center', justifyContent: 'center' },
+});

package/lib/module/ui/IncomingCallView.js

@@ -0,0 +1,101 @@
+/**
+ * Drop-in screen rendered when an incoming call is ringing.
+ *
+ * Wire-up:
+ *
+ * ```tsx
+ * <CallProvider
+ *   onIncomingCall={() => navigation.navigate('IncomingCall')}
+ *   config={cfg}
+ * >
+ *   …
+ * </CallProvider>
+ *
+ * // your IncomingCall screen:
+ * <IncomingCallView onAnswered={() => navigation.replace('InCall')} />
+ * ```
+ */
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
+import { useCall } from '../CallProvider';
+import { parseSipUser } from '../helpers';
+import { Avatar } from './Avatar';
+import { mergeTheme } from './theme';
+export function IncomingCallView({ onAnswered, onDeclined, onDismissed, location, title = 'Incoming call', theme, header, style, }) {
+    const { incoming, incomingInfo, answer, decline } = useCall();
+    const t = mergeTheme(theme);
+    // Auto-dismiss if the call ends while this screen is mounted.
+    useEffect(() => {
+        if (!incoming)
+            onDismissed?.();
+    }, [incoming, onDismissed]);
+    const pretty = (s = '') => s.includes('@') ? parseSipUser(s) : s;
+    const name = incomingInfo?.name ?? 'Unknown';
+    const phone = incomingInfo?.phone ?? '';
+    const initials = incomingInfo?.initials ?? '??';
+    const onAnswer = async () => {
+        await answer();
+        onAnswered?.();
+    };
+    const onDecline = async () => {
+        await decline('busy');
+        onDeclined?.();
+    };
+    return (<View style={[styles.container, { backgroundColor: t.background }, style]}>
+      {header}
+      <Text style={[styles.status, { color: t.text }]}>{title}</Text>
+
+      <View style={styles.avatarWrap}>
+        <Avatar initials={initials} size={80} color={t.primary} background="#EEF2FF"/>
+      </View>
+
+      <Text style={[styles.name, { color: t.text }]}>{pretty(name)}</Text>
+      <Text style={[styles.phone, { color: t.text }]}>{pretty(phone)}</Text>
+      {!!location && (<Text style={[styles.location, { color: t.subtext }]}>{location}</Text>)}
+
+      <View style={styles.bottomRow}>
+        <TouchableOpacity onPress={onDecline} activeOpacity={0.85} style={[styles.circleBtn, { backgroundColor: t.decline }]}>
+          <Text style={styles.circleIcon}>✕</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={onAnswer} activeOpacity={0.85} style={[styles.circleBtn, { backgroundColor: t.answer }]}>
+          <Text style={styles.circleIcon}>📞</Text>
+        </TouchableOpacity>
+      </View>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        paddingVertical: 60,
+    },
+    status: { fontSize: 18, marginBottom: 16, marginTop: 8 },
+    avatarWrap: { marginBottom: 22, marginTop: 6 },
+    name: { fontSize: 28, fontWeight: '800', textAlign: 'center' },
+    phone: { fontSize: 18, marginTop: 8 },
+    location: { fontSize: 16, marginTop: 8 },
+    bottomRow: {
+        position: 'absolute',
+        bottom: 60,
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: 40,
+    },
+    circleBtn: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000',
+        shadowOpacity: 0.15,
+        shadowOffset: { width: 0, height: 4 },
+        shadowRadius: 8,
+        elevation: 4,
+    },
+    circleIcon: { fontSize: 32, color: '#fff' },
+});