@nativetalkcommunications/react-native-call-sdk 0.1.0

package/lib/commonjs/helpers.js

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.destinationToSipUri = exports.callStatusLabel = exports.regStateName = exports.callStateName = exports.initialsFrom = exports.formatDuration = exports.sanitizeDial = exports.parseSipUser = exports.formatTenantDomain = void 0;
+/**
+ * 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.
+ */
+function formatTenantDomain(domain) {
+    if (!domain)
+        return '';
+    return domain.replace(/^https?:\/\//, '').replace(/\/$/, '');
+}
+exports.formatTenantDomain = formatTenantDomain;
+/**
+ * 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.
+ */
+function parseSipUser(sipUri = '') {
+    const m = /sip:([^@;>]+)/i.exec(sipUri);
+    return m?.[1] ?? sipUri.replace(/^sip:/i, '');
+}
+exports.parseSipUser = parseSipUser;
+// 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.
+function sanitizeDial(input = '') {
+    return input.replace(/[^\d+#*]/g, '');
+}
+exports.sanitizeDial = sanitizeDial;
+/** Format seconds as `M:SS` or `H:MM:SS`. */
+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)}`;
+}
+exports.formatDuration = formatDuration;
+/** Convert two-character initials for avatar placeholders. */
+function initialsFrom(name) {
+    return (name || '??').slice(0, 2).toUpperCase();
+}
+exports.initialsFrom = initialsFrom;
+/**
+ * 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. */
+function callStateName(raw) {
+    if (typeof raw === 'number')
+        return CALL_STATE_BY_INT[raw] ?? String(raw);
+    return String(raw ?? '');
+}
+exports.callStateName = callStateName;
+/** Normalise a raw registration-state value (string or int) to canonical lowercase string. */
+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';
+}
+exports.regStateName = regStateName;
+/**
+ * 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.
+ */
+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';
+    }
+}
+exports.callStatusLabel = callStatusLabel;
+/**
+ * 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.
+ */
+function destinationToSipUri(destination, domain) {
+    if (!destination)
+        return '';
+    if (destination.startsWith('sip:'))
+        return destination;
+    if (destination.includes('@'))
+        return `sip:${destination}`;
+    return `sip:${destination}@${formatTenantDomain(domain)}`;
+}
+exports.destinationToSipUri = destinationToSipUri;

package/lib/commonjs/index.js

@@ -0,0 +1,96 @@
+"use strict";
+/**
+ * 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');
+ * ```
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.callEvents = exports.CallEngine = exports.sanitizeDial = exports.regStateName = exports.parseSipUser = exports.initialsFrom = exports.formatTenantDomain = exports.formatDuration = exports.destinationToSipUri = exports.callStatusLabel = exports.callStateName = exports.useCallSafe = exports.useCall = exports.CallProvider = void 0;
+var CallProvider_1 = require("./CallProvider");
+Object.defineProperty(exports, "CallProvider", { enumerable: true, get: function () { return CallProvider_1.CallProvider; } });
+Object.defineProperty(exports, "useCall", { enumerable: true, get: function () { return CallProvider_1.useCall; } });
+Object.defineProperty(exports, "useCallSafe", { enumerable: true, get: function () { return CallProvider_1.useCallSafe; } });
+var helpers_1 = require("./helpers");
+Object.defineProperty(exports, "callStateName", { enumerable: true, get: function () { return helpers_1.callStateName; } });
+Object.defineProperty(exports, "callStatusLabel", { enumerable: true, get: function () { return helpers_1.callStatusLabel; } });
+Object.defineProperty(exports, "destinationToSipUri", { enumerable: true, get: function () { return helpers_1.destinationToSipUri; } });
+Object.defineProperty(exports, "formatDuration", { enumerable: true, get: function () { return helpers_1.formatDuration; } });
+Object.defineProperty(exports, "formatTenantDomain", { enumerable: true, get: function () { return helpers_1.formatTenantDomain; } });
+Object.defineProperty(exports, "initialsFrom", { enumerable: true, get: function () { return helpers_1.initialsFrom; } });
+Object.defineProperty(exports, "parseSipUser", { enumerable: true, get: function () { return helpers_1.parseSipUser; } });
+Object.defineProperty(exports, "regStateName", { enumerable: true, get: function () { return helpers_1.regStateName; } });
+Object.defineProperty(exports, "sanitizeDial", { enumerable: true, get: function () { return helpers_1.sanitizeDial; } });
+const Native = __importStar(require("./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.
+ */
+exports.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,
+};
+var native_1 = require("./native");
+Object.defineProperty(exports, "callEvents", { enumerable: true, get: function () { return native_1.callEvents; } });

package/lib/commonjs/native.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.on = exports.registerVoipToken = exports.getCallLogs = exports.playKeyTone = exports.sendDtmf = exports.resume = exports.hold = exports.speaker = exports.mute = exports.decline = exports.end = exports.answer = exports.call = exports.getRegistrationStatus = exports.setRegisterEnabled = exports.refreshRegisters = exports.register = exports.stopNativeServices = exports.startNativeServices = exports.init = exports.ensureMicPermission = exports.callEvents = void 0;
+/**
+ * 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`.
+ */
+const react_native_1 = require("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 = react_native_1.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
+exports.callEvents = new react_native_1.NativeEventEmitter(NativetalkCallSdk);
+/** Request microphone permission on Android. Returns true if granted (or platform is iOS). */
+async function ensureMicPermission() {
+    if (react_native_1.Platform.OS !== 'android')
+        return true;
+    const granted = await react_native_1.PermissionsAndroid.request(react_native_1.PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, {
+        title: 'Microphone Permission',
+        message: 'Microphone access is required to make and receive calls.',
+        buttonPositive: 'OK',
+    });
+    return granted === react_native_1.PermissionsAndroid.RESULTS.GRANTED;
+}
+exports.ensureMicPermission = ensureMicPermission;
+// --- Core lifecycle ---
+// Idempotent on the native side, safe to call multiple times.
+function init(cfg) {
+    return NativetalkCallSdk.init(cfg ?? {});
+}
+exports.init = init;
+// Android-only: iOS uses CallKit + VoIP push instead of a background
+// service. Guarding here keeps the JS API symmetric across platforms.
+function startNativeServices() {
+    if (react_native_1.Platform.OS !== 'android')
+        return;
+    NativetalkCallSdk.startNativeServices();
+}
+exports.startNativeServices = startNativeServices;
+function stopNativeServices(logout = false) {
+    if (react_native_1.Platform.OS !== 'android')
+        return;
+    NativetalkCallSdk.stopNativeServices(logout);
+}
+exports.stopNativeServices = stopNativeServices;
+function register(account) {
+    NativetalkCallSdk.register(account);
+}
+exports.register = register;
+// Optional-chained: older native builds may not export this method, and
+// we'd rather no-op than crash on a non-critical refresh.
+function refreshRegisters() {
+    NativetalkCallSdk.refreshRegisters?.();
+}
+exports.refreshRegisters = refreshRegisters;
+function setRegisterEnabled(enabled) {
+    NativetalkCallSdk.setRegisterEnabled(enabled);
+}
+exports.setRegisterEnabled = setRegisterEnabled;
+function getRegistrationStatus() {
+    return NativetalkCallSdk.getRegistrationStatus();
+}
+exports.getRegistrationStatus = getRegistrationStatus;
+// --- Call control ---
+function call(sipUri) {
+    NativetalkCallSdk.call(sipUri);
+}
+exports.call = call;
+function answer() {
+    NativetalkCallSdk.answer();
+}
+exports.answer = answer;
+function end() {
+    NativetalkCallSdk.end();
+}
+exports.end = end;
+function decline(reason = 'declined') {
+    NativetalkCallSdk.decline?.(reason);
+}
+exports.decline = decline;
+function mute(on) {
+    NativetalkCallSdk.mute(on);
+}
+exports.mute = mute;
+function speaker(on) {
+    NativetalkCallSdk.speaker(on);
+}
+exports.speaker = speaker;
+function hold() {
+    NativetalkCallSdk.hold();
+}
+exports.hold = hold;
+function resume() {
+    NativetalkCallSdk.resume();
+}
+exports.resume = resume;
+function sendDtmf(digit) {
+    NativetalkCallSdk.sendDtmf(digit);
+}
+exports.sendDtmf = sendDtmf;
+function playKeyTone(digit) {
+    NativetalkCallSdk.playKeyTone(digit);
+}
+exports.playKeyTone = playKeyTone;
+// --- Call logs ---
+function getCallLogs() {
+    return NativetalkCallSdk.getCallLogs();
+}
+exports.getCallLogs = 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.
+function registerVoipToken(hex) {
+    if (react_native_1.Platform.OS !== 'ios')
+        return;
+    NativetalkCallSdk.registerVoipToken?.(hex);
+}
+exports.registerVoipToken = registerVoipToken;
+exports.on = {
+    RegistrationChanged: (cb) => exports.callEvents.addListener('RegistrationChanged', cb),
+    CallIncoming: (cb) => exports.callEvents.addListener('CallIncoming', cb),
+    CallState: (cb) => exports.callEvents.addListener('CallState', cb),
+    CallEnded: (cb) => exports.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) => exports.callEvents.addListener('TMPhoneCallState', cb),
+    TMPhoneCallInfo: (cb) => exports.callEvents.addListener('TMPhoneCallInfo', cb),
+};

package/lib/commonjs/types.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * 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>`.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/commonjs/ui/Avatar.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+/** Tiny initials-circle used by the bundled call screens. */
+function Avatar({ initials, size = 80, background = '#EEF2FF', color = '#2D6BFF', style, textStyle, }) {
+    return (<react_native_1.View style={[
+            styles.base,
+            { width: size, height: size, borderRadius: size / 2, backgroundColor: background },
+            style,
+        ]}>
+      <react_native_1.Text style={[
+            styles.text,
+            { color, fontSize: Math.floor(size * 0.4) },
+            textStyle,
+        ]}>
+        {(initials || '??').slice(0, 2).toUpperCase()}
+      </react_native_1.Text>
+    </react_native_1.View>);
+}
+exports.Avatar = Avatar;
+const styles = react_native_1.StyleSheet.create({
+    base: { alignItems: 'center', justifyContent: 'center' },
+    text: { fontWeight: '700' },
+});

package/lib/commonjs/ui/Dialer.js

@@ -0,0 +1,189 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialer = void 0;
+/**
+ * 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.
+ */
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const CallProvider_1 = require("../CallProvider");
+const helpers_1 = require("../helpers");
+const theme_1 = require("./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: '' },
+    ],
+];
+function Dialer({ initialValue = '', onDialed, header, renderCallButton, theme, playKeyTones = true, }) {
+    const [input, setInput] = (0, react_1.useState)(initialValue);
+    const { dial, playKeyTone } = (0, CallProvider_1.useCall)();
+    const { width, height } = (0, react_native_1.useWindowDimensions)();
+    const isCompact = height < 760;
+    const buttonSize = Math.min(width / 4.3, isCompact ? 68 : 84);
+    const t = (0, theme_1.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 (<react_native_1.View style={[styles.container, { backgroundColor: t.background }]}>
+      {header}
+      <react_native_1.View style={styles.inputContainer}>
+        <react_native_1.TextInput value={input} placeholder="Enter Number" placeholderTextColor="#ccc" onChangeText={(s) => setInput((0, helpers_1.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 && (<react_native_1.TouchableOpacity style={styles.clearButton} onPress={handleBackspace}>
+            <react_native_1.Text style={{ fontSize: 22, color: '#999' }}>⌫</react_native_1.Text>
+          </react_native_1.TouchableOpacity>)}
+      </react_native_1.View>
+
+      <react_native_1.ScrollView style={styles.padContainer} contentContainerStyle={[
+            styles.padContent,
+            { paddingTop: isCompact ? 16 : 30, paddingBottom: 24 },
+        ]} bounces={false} showsVerticalScrollIndicator={false}>
+        {dialPad.map((row, i) => (<react_native_1.View style={[styles.padRow, { marginBottom: isCompact ? 8 : 10 }]} key={i}>
+            {row.map((item) => (<react_native_1.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}>
+                <react_native_1.Text style={[
+                    styles.padNumber,
+                    { fontSize: isCompact ? 28 : 30, color: t.text },
+                ]}>
+                  {item.number}
+                </react_native_1.Text>
+                {!!item.letters && (<react_native_1.Text style={[styles.padLetters, { color: t.subtext }]}>
+                    {item.letters}
+                  </react_native_1.Text>)}
+              </react_native_1.TouchableOpacity>))}
+          </react_native_1.View>))}
+
+        <react_native_1.View style={{ marginTop: isCompact ? 10 : 15 }}>
+          {renderCallButton ? (renderCallButton({
+            onPress: handleCall,
+            disabled: callDisabled,
+            number: input,
+        })) : (<react_native_1.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,
+                },
+            ]}>
+              <react_native_1.Text style={{ color: '#fff', fontSize: 28 }}>📞</react_native_1.Text>
+            </react_native_1.TouchableOpacity>)}
+        </react_native_1.View>
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+}
+exports.Dialer = Dialer;
+const styles = react_native_1.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' },
+});