@nativetalkcommunications/react-native-call-sdk 0.1.0

package/lib/module/ui/OutgoingCallView.js

@@ -0,0 +1,110 @@
+/**
+ * In-call screen used for both outgoing calls and after answering an incoming
+ * call. Shows the caller, status, timer, and mute/speaker/end controls.
+ *
+ * Pure presentation — all state comes from `useCall()`.
+ */
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
+import { useCall } from '../CallProvider';
+import { callStatusLabel, parseSipUser } from '../helpers';
+import { Avatar } from './Avatar';
+import { mergeTheme } from './theme';
+export function OutgoingCallView({ name, phone, location, initials, onEnded, theme, header, style, }) {
+    const { callStatus, hangup, toggleMute, toggleSpeaker, formattedDuration, isMuted, isSpeaker, } = useCall();
+    const t = mergeTheme(theme);
+    const status = callStatusLabel(callStatus);
+    const showTimer = ['In progress', 'On hold', 'Call ended'].includes(status);
+    const ended = status === 'Call ended';
+    const pretty = (s = '') => (s.includes('@') ? parseSipUser(s) : s);
+    const handleEnd = async () => {
+        if (!ended)
+            await hangup();
+        onEnded?.();
+    };
+    return (<View style={[styles.container, { backgroundColor: t.background }, style]}>
+      {header}
+      <Text style={[styles.status, ended && { color: t.decline }, !ended && { color: t.text }]}>
+        {status}
+      </Text>
+      {showTimer && (<Text style={[styles.duration, { color: t.text }]}>{formattedDuration}</Text>)}
+
+      <View style={styles.avatarWrap}>
+        <Avatar initials={initials ?? (name || '??').slice(0, 2)} size={80} color={t.primary} background="#EEF2FF"/>
+      </View>
+
+      {!!name && <Text style={[styles.name, { color: t.text }]}>{pretty(name)}</Text>}
+      {!!phone && <Text style={[styles.phone, { color: t.text }]}>{pretty(phone)}</Text>}
+      {!!location && (<Text style={[styles.location, { color: t.subtext }]}>{location}</Text>)}
+
+      <View style={styles.controlsGrid}>
+        <CallControl label={isMuted ? 'Unmute' : 'Mute'} icon="🎙" active={isMuted} disabled={ended} onPress={toggleMute} theme={t}/>
+        <CallControl label={isSpeaker ? 'Earpiece' : 'Speaker'} icon="🔊" active={isSpeaker} disabled={ended} onPress={toggleSpeaker} theme={t}/>
+        <View style={styles.controlPlaceholder}/>
+      </View>
+
+      <TouchableOpacity style={[styles.endBtn, { backgroundColor: t.decline }]} onPress={handleEnd}>
+        <Text style={{ color: '#fff', fontSize: 28 }}>✕</Text>
+      </TouchableOpacity>
+    </View>);
+}
+function CallControl({ label, icon, active, disabled, onPress, theme }) {
+    const bg = active ? theme.controlOnBg : theme.controlOffBg;
+    const iconColor = active
+        ? theme.controlIconOn
+        : disabled
+            ? '#ccc'
+            : theme.controlIconOff;
+    return (<TouchableOpacity style={[styles.control, disabled && styles.controlDisabled]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+      <View style={[styles.controlCircle, { backgroundColor: bg }]}>
+        <Text style={{ fontSize: 24, color: iconColor }}>{icon}</Text>
+      </View>
+      <Text style={[styles.controlLabel, disabled && { color: '#aaa' }]}>
+        {label}
+      </Text>
+    </TouchableOpacity>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        paddingVertical: 60,
+    },
+    status: { fontSize: 15, marginBottom: 6, marginTop: 10 },
+    duration: { fontSize: 16, fontWeight: '600', marginBottom: 10 },
+    avatarWrap: { marginBottom: 10, marginTop: 15 },
+    name: { fontSize: 22, fontWeight: '700', textAlign: 'center' },
+    phone: { fontSize: 18, marginTop: 6, marginBottom: 6 },
+    location: { fontSize: 15, marginBottom: 16 },
+    controlsGrid: {
+        width: '88%',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        alignSelf: 'center',
+        marginTop: 30,
+        marginBottom: 18,
+    },
+    control: { width: '30%', alignItems: 'center', marginVertical: 16 },
+    controlPlaceholder: { width: '30%' },
+    controlDisabled: { opacity: 0.48 },
+    controlCircle: {
+        width: 65,
+        height: 65,
+        borderRadius: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 7,
+    },
+    controlLabel: { fontSize: 15, color: '#222', textAlign: 'center' },
+    endBtn: {
+        position: 'absolute',
+        bottom: 60,
+        width: 70,
+        height: 70,
+        borderRadius: 35,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/lib/module/ui/index.js

@@ -0,0 +1,13 @@
+/**
+ * Optional UI components for the Nativetalk Call SDK.
+ *
+ * These are entirely opt-in — the core hook (`useCall()`) gives you everything
+ * you need to roll your own UI. The components here are kept deliberately
+ * minimal (no external icon packs, no navigation library) so they work in
+ * any RN project.
+ */
+export { Dialer } from './Dialer';
+export { IncomingCallView } from './IncomingCallView';
+export { OutgoingCallView } from './OutgoingCallView';
+export { Avatar } from './Avatar';
+export { defaultTheme, mergeTheme } from './theme';

package/lib/module/ui/theme.js

@@ -0,0 +1,17 @@
+export const defaultTheme = {
+    primary: '#2D6BFF',
+    background: '#fafafa',
+    text: '#111',
+    subtext: '#555',
+    answer: '#33c124',
+    decline: '#ff2d2d',
+    controlOnBg: '#111',
+    controlOffBg: '#fff',
+    controlIconOn: '#fff',
+    controlIconOff: '#111',
+};
+export function mergeTheme(override) {
+    if (!override)
+        return defaultTheme;
+    return { ...defaultTheme, ...override };
+}

package/lib/typescript/CallProvider.d.ts

@@ -0,0 +1,46 @@
+/**
+ * <CallProvider> — the single React component the host app mounts to enable
+ * calling. It wires the native event stream into React state and exposes
+ * everything through `useCall()`.
+ *
+ * ──────────────────────────────────────────────────────────────────────────
+ *  Mental model
+ * ──────────────────────────────────────────────────────────────────────────
+ *
+ *   Linphone Core  ──events──►  Native module  ──RN bridge──►  CallProvider
+ *        ▲                                                          │
+ *        │                                                          ▼
+ *        └────── method calls (dial/answer/end) ────────────  useCall() hook
+ *
+ *  - The Linphone `Core` is the single source of truth for "what state is the
+ *    call in". CallProvider just mirrors that state into React.
+ *  - Provider → native flows via plain method calls. Native → provider flows
+ *    via NativeEventEmitter events (RegistrationChanged, CallIncoming, etc.).
+ *
+ * ──────────────────────────────────────────────────────────────────────────
+ *  Design rules
+ * ──────────────────────────────────────────────────────────────────────────
+ *  - No coupling to auth, navigation, or any specific HTTP client. SIP config
+ *    is passed in as a prop; lifecycle events (incoming, ended) are exposed as
+ *    callbacks so the host app decides how to navigate / display screens.
+ *  - Safe to mount with `config={null}` while you fetch credentials — the SDK
+ *    simply idles until a real config arrives, then auto-registers (unless
+ *    `autoRegister={false}`).
+ *  - All event callbacks are read through refs (see `*Ref` block) so the host
+ *    app can pass fresh closures on every render WITHOUT re-subscribing the
+ *    native events — that would drop in-flight calls during a re-render.
+ */
+import React from 'react';
+import { callStatusLabel, formatDuration } from './helpers';
+import type { CallApi, CallProviderProps } from './types';
+export declare function CallProvider(props: CallProviderProps): React.JSX.Element;
+/**
+ * Access the call API from any descendant of `<CallProvider>`.
+ *
+ * Throws if used outside the provider.
+ */
+export declare function useCall(): CallApi;
+/** Internal — exported for power users who want to read the context without throwing. */
+export declare function useCallSafe(): CallApi | null;
+/** Re-export to allow `formatDuration`, `callStatusLabel`, etc. to be imported from the main entry too. */
+export { callStatusLabel, formatDuration };

package/lib/typescript/helpers.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Pure helpers used by the provider and UI components.
+ *
+ * Kept here (not in `native.ts` or `CallProvider.tsx`) so they can be
+ * unit-tested without touching React or native modules.
+ */
+import type { CallState, RegistrationState } from './types';
+/**
+ * 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 declare function formatTenantDomain(domain: string | undefined | null): string;
+/**
+ * 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 declare function parseSipUser(sipUri?: string): string;
+export declare function sanitizeDial(input?: string): string;
+/** Format seconds as `M:SS` or `H:MM:SS`. */
+export declare function formatDuration(totalSeconds: number): string;
+/** Convert two-character initials for avatar placeholders. */
+export declare function initialsFrom(name: string | undefined | null): string;
+/** Normalise a raw call-state value (string or int) to its canonical string form. */
+export declare function callStateName(raw: unknown): CallState;
+/** Normalise a raw registration-state value (string or int) to canonical lowercase string. */
+export declare function regStateName(raw: unknown): RegistrationState;
+/**
+ * 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 declare function callStatusLabel(status: CallState): string;
+/**
+ * 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 declare function destinationToSipUri(destination: string, domain: string): string;

package/lib/typescript/index.d.ts

@@ -0,0 +1,77 @@
+/**
+ * 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 type { CallApi, CallLogEntry, CallProviderEvents, CallProviderProps, CallState, DeclineReason, IncomingCallInfo, RegistrationEvent, RegistrationState, SipConfig, SipTransport, } from './types';
+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 declare const CallEngine: {
+    init: typeof Native.init;
+    register: typeof Native.register;
+    call: typeof Native.call;
+    answer: typeof Native.answer;
+    end: typeof Native.end;
+    hangup: typeof Native.end;
+    decline: typeof Native.decline;
+    mute: typeof Native.mute;
+    speaker: typeof Native.speaker;
+    hold: typeof Native.hold;
+    resume: typeof Native.resume;
+    sendDtmf: typeof Native.sendDtmf;
+    playKeyTone: typeof Native.playKeyTone;
+    refreshRegisters: typeof Native.refreshRegisters;
+    setRegisterEnabled: typeof Native.setRegisterEnabled;
+    getRegistrationStatus: typeof Native.getRegistrationStatus;
+    getCallLogs: typeof Native.getCallLogs;
+    startNativeServices: typeof Native.startNativeServices;
+    stopNativeServices: typeof Native.stopNativeServices;
+    registerVoipToken: typeof Native.registerVoipToken;
+    ensureMicPermission: typeof Native.ensureMicPermission;
+    on: {
+        RegistrationChanged: (cb: (event: any) => void) => {
+            remove: () => void;
+        };
+        CallIncoming: (cb: (event: any) => void) => {
+            remove: () => void;
+        };
+        CallState: (cb: (event: any) => void) => {
+            remove: () => void;
+        };
+        CallEnded: (cb: (event: any) => void) => {
+            remove: () => void;
+        };
+        TMPhoneCallState: (cb: (event: any) => void) => {
+            remove: () => void;
+        };
+        TMPhoneCallInfo: (cb: (event: any) => void) => {
+            remove: () => void;
+        };
+    };
+};
+export { callEvents } from './native';

package/lib/typescript/native.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 } from 'react-native';
+import type { CallLogEntry, RegistrationEvent, SipTransport } from './types';
+export declare const callEvents: NativeEventEmitter;
+/** Request microphone permission on Android. Returns true if granted (or platform is iOS). */
+export declare function ensureMicPermission(): Promise<boolean>;
+export declare function init(cfg?: Record<string, unknown>): Promise<void>;
+export declare function startNativeServices(): void;
+export declare function stopNativeServices(logout?: boolean): void;
+export interface RegisterArgs {
+    username: string;
+    password: string;
+    domain: string;
+    transport?: SipTransport;
+}
+export declare function register(account: RegisterArgs): void;
+export declare function refreshRegisters(): void;
+export declare function setRegisterEnabled(enabled: boolean): void;
+export declare function getRegistrationStatus(): Promise<RegistrationEvent>;
+export declare function call(sipUri: string): void;
+export declare function answer(): void;
+export declare function end(): void;
+export declare function decline(reason?: string): void;
+export declare function mute(on: boolean): void;
+export declare function speaker(on: boolean): void;
+export declare function hold(): void;
+export declare function resume(): void;
+export declare function sendDtmf(digit: string): void;
+export declare function playKeyTone(digit: string): void;
+export declare function getCallLogs(): Promise<CallLogEntry[]>;
+export declare function registerVoipToken(hex: string): void;
+type Listener<T> = (event: T) => void;
+type Sub = {
+    remove: () => void;
+};
+export declare const on: {
+    RegistrationChanged: (cb: Listener<any>) => Sub;
+    CallIncoming: (cb: Listener<any>) => Sub;
+    CallState: (cb: Listener<any>) => Sub;
+    CallEnded: (cb: Listener<any>) => Sub;
+    TMPhoneCallState: (cb: Listener<any>) => Sub;
+    TMPhoneCallInfo: (cb: Listener<any>) => Sub;
+};
+export {};

package/lib/typescript/types.d.ts

@@ -0,0 +1,155 @@
+/**
+ * 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>`.
+ */
+/// <reference types="react" />
+/** Transport used for SIP signalling. Most providers support `tcp`; use `tls` for encrypted signalling. */
+export type SipTransport = 'udp' | 'tcp' | 'tls';
+/**
+ * SIP account credentials.
+ *
+ * `domain` should be the SIP server hostname (and optionally `:port`). Do NOT
+ * include `sip:` or `http(s)://` — the SDK strips those automatically, but it's
+ * cleaner not to send them.
+ */
+export interface SipConfig {
+    username: string;
+    password: string;
+    domain: string;
+    transport?: SipTransport;
+}
+/** Registration lifecycle states reported by the underlying SIP stack. */
+export type RegistrationState = 'none' | 'progress' | 'ok' | 'cleared' | 'failed' | 'unknown';
+/** Registration state event payload. */
+export interface RegistrationEvent {
+    state: RegistrationState;
+    message?: string;
+    username?: string;
+    domain?: string;
+    displayName?: string;
+    /** Human-readable form of `state` (e.g. `"Ok"`, `"Failed"`). */
+    pretty?: string;
+}
+/**
+ * Linphone-derived call lifecycle states. Use the string forms in your UI.
+ *
+ * The numeric mapping is preserved internally for backwards compatibility with
+ * raw Linphone state values, but `useCall().callStatus` always returns the
+ * string form.
+ */
+export type CallState = 'Idle' | 'IncomingReceived' | 'PushIncomingReceived' | 'OutgoingInit' | 'OutgoingProgress' | 'OutgoingRinging' | 'OutgoingEarlyMedia' | 'Connected' | 'StreamsRunning' | 'Pausing' | 'Paused' | 'Resuming' | 'Referred' | 'Error' | 'End' | 'PausedByRemote' | 'UpdatedByRemote' | 'IncomingEarlyMedia' | 'Updating' | 'Released' | 'EarlyUpdatedByRemote' | 'EarlyUpdating' | string;
+/** Reason passed to `decline()`. Maps to standard SIP response codes. */
+export type DeclineReason = 'declined' | 'busy' | 'notacceptable' | 'temporarilyunavailable';
+/** Information about an incoming call, surfaced via `useCall().incomingInfo`. */
+export interface IncomingCallInfo {
+    /** Best-effort display name: display-name → username → SIP user-part → `"Unknown"`. */
+    name: string;
+    /** Phone number or SIP identifier the call came from. */
+    phone: string;
+    /** Two-character initials for avatar placeholders. */
+    initials: string;
+    /** SIP call ID. May be missing on push-initiated calls before media flows. */
+    callId?: string;
+    /** Raw SIP URI of the remote party (`sip:user@domain`). */
+    uri?: string;
+}
+/** A single call history entry, normalised across platforms. */
+export interface CallLogEntry {
+    id: number;
+    /** ISO-8601 timestamp (UTC). */
+    call_start: string;
+    call_type: 'LOCAL' | 'DID' | 'STANDARD' | string;
+    caller_id: string;
+    call_direction: 'inbound' | 'outbound' | string;
+    called_number: string;
+    /** Platform-specific shape — Android returns `{ text, code }`, iOS returns a string. */
+    disposition: {
+        text: string;
+        code: number;
+    } | string;
+    debit: string;
+    /** `MM:SS` or `HH:MM:SS`. */
+    duration: string;
+    destination: string;
+    sip_user: string;
+    created_at: string;
+    updated_at: string;
+}
+/** Optional callbacks the host app can supply to `<CallProvider>`. */
+export interface CallProviderEvents {
+    /** Fired when a new incoming call arrives. Use this to navigate to your incoming-call screen. */
+    onIncomingCall?: (info: IncomingCallInfo) => void;
+    /** Fired when an outgoing call has been initiated via `dial()`. */
+    onOutgoingCall?: (info: {
+        phone: string;
+        initials: string;
+    }) => void;
+    /** Fired when the active call ends (any reason). */
+    onCallEnded?: () => void;
+    /** Fired on every call state transition. */
+    onCallStateChanged?: (state: CallState) => void;
+    /** Fired on every registration state transition. */
+    onRegistrationStateChanged?: (event: RegistrationEvent) => void;
+    /** Fired when an error occurs (e.g. registration failure). */
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+}
+/** Props for `<CallProvider>`. */
+export interface CallProviderProps extends CallProviderEvents {
+    children: React.ReactNode;
+    /**
+     * SIP credentials. Pass `null` or omit while you load them from your backend —
+     * the SDK will idle until a valid config arrives.
+     */
+    config?: SipConfig | null;
+    /**
+     * If true (default), the SDK calls `register()` automatically whenever
+     * `config` changes. Set to false if you want manual control via the
+     * `register()` action.
+     */
+    autoRegister?: boolean;
+    /**
+     * If true (default on Android), the SDK starts the background/foreground
+     * service so calls can still arrive when the app is backgrounded. Has no
+     * effect on iOS — there CallKit + VoIP push handles backgrounding.
+     */
+    enableNativeServices?: boolean;
+    /**
+     * If true, the SDK requests `RECORD_AUDIO` permission on Android during
+     * provider mount. Default true. Disable if you handle permissions yourself.
+     */
+    requestMicPermission?: boolean;
+}
+/** Public API returned by `useCall()`. */
+export interface CallApi {
+    config: SipConfig | null;
+    registration: RegistrationEvent | null;
+    callStatus: CallState;
+    durationSec: number;
+    formattedDuration: string;
+    incoming: boolean;
+    incomingInfo: IncomingCallInfo | null;
+    isMuted: boolean;
+    isSpeaker: boolean;
+    isHeld: boolean;
+    dial: (destination: string) => Promise<void>;
+    answer: () => Promise<void>;
+    hangup: () => Promise<void>;
+    decline: (reason?: DeclineReason) => Promise<void>;
+    toggleMute: () => void;
+    toggleSpeaker: () => void;
+    toggleHold: () => void;
+    sendDtmf: (digit: string) => void;
+    playKeyTone: (digit: string) => void;
+    register: (config?: SipConfig) => Promise<void>;
+    refreshRegistration: () => Promise<void>;
+    unregister: () => Promise<void>;
+    getCallLogs: () => Promise<CallLogEntry[]>;
+    getRegistrationStatus: () => Promise<RegistrationEvent>;
+    startNativeServices: () => void;
+    stopNativeServices: (logout?: boolean) => void;
+}

package/lib/typescript/ui/Avatar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+interface AvatarProps {
+    initials: string;
+    size?: number;
+    background?: string;
+    color?: string;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+/** Tiny initials-circle used by the bundled call screens. */
+export declare function Avatar({ initials, size, background, color, style, textStyle, }: AvatarProps): React.JSX.Element;
+export {};

package/lib/typescript/ui/Dialer.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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 from 'react';
+import { type CallTheme } from './theme';
+interface DialerProps {
+    /** Initial value of the input. */
+    initialValue?: string;
+    /** Called whenever the user submits a number (presses the call button or hits return). */
+    onDialed?: (number: string) => void;
+    /** Header rendered above the input. Pass `null` to hide. */
+    header?: React.ReactNode | null;
+    /** Custom call button. Receives an `onPress` and the current number. */
+    renderCallButton?: (props: {
+        onPress: () => void;
+        disabled: boolean;
+        number: string;
+    }) => React.ReactNode;
+    /** Theme overrides. */
+    theme?: Partial<CallTheme>;
+    /** If true (default) the dial-pad plays a DTMF UI tone on each key press. */
+    playKeyTones?: boolean;
+}
+export declare function Dialer({ initialValue, onDialed, header, renderCallButton, theme, playKeyTones, }: DialerProps): React.JSX.Element;
+export {};

package/lib/typescript/ui/IncomingCallView.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type CallTheme } from './theme';
+interface IncomingCallViewProps {
+    /** Called once `answer()` resolves — typically you navigate to the in-call screen here. */
+    onAnswered?: () => void;
+    /** Called after `decline()` completes. */
+    onDeclined?: () => void;
+    /** Called when there's no live incoming call (e.g. caller hung up first). */
+    onDismissed?: () => void;
+    /** Override the location string under the caller name. */
+    location?: string;
+    /** Custom title — defaults to "Incoming call". */
+    title?: string;
+    /** Theme overrides. */
+    theme?: Partial<CallTheme>;
+    /** Optional top-of-screen element (e.g. a logo). */
+    header?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function IncomingCallView({ onAnswered, onDeclined, onDismissed, location, title, theme, header, style, }: IncomingCallViewProps): React.JSX.Element;
+export {};

package/lib/typescript/ui/OutgoingCallView.d.ts

@@ -0,0 +1,28 @@
+/**
+ * In-call screen used for both outgoing calls and after answering an incoming
+ * call. Shows the caller, status, timer, and mute/speaker/end controls.
+ *
+ * Pure presentation — all state comes from `useCall()`.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type CallTheme } from './theme';
+interface OutgoingCallViewProps {
+    /** Caller name to display. Falls back to the SIP user-part. */
+    name?: string;
+    /** Phone number to display under the name. */
+    phone?: string;
+    /** Free-form location string (e.g. "Lagos, Nigeria"). Optional. */
+    location?: string;
+    /** Two-character avatar initials. */
+    initials?: string;
+    /** Called after hangup completes. Usually you `navigation.goBack()`. */
+    onEnded?: () => void;
+    /** Theme overrides. */
+    theme?: Partial<CallTheme>;
+    /** Optional top-of-screen element (e.g. a logo). */
+    header?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function OutgoingCallView({ name, phone, location, initials, onEnded, theme, header, style, }: OutgoingCallViewProps): React.JSX.Element;
+export {};

package/lib/typescript/ui/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Optional UI components for the Nativetalk Call SDK.
+ *
+ * These are entirely opt-in — the core hook (`useCall()`) gives you everything
+ * you need to roll your own UI. The components here are kept deliberately
+ * minimal (no external icon packs, no navigation library) so they work in
+ * any RN project.
+ */
+export { Dialer } from './Dialer';
+export { IncomingCallView } from './IncomingCallView';
+export { OutgoingCallView } from './OutgoingCallView';
+export { Avatar } from './Avatar';
+export { defaultTheme, mergeTheme, type CallTheme } from './theme';