@nativetalkcommunications/react-native-call-sdk 0.1.0

package/src/ui/Dialer.tsx

@@ -0,0 +1,248 @@
+/**
+ * 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, 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;
+}
+
+const dialPad: Array<Array<{ number: string; letters: string }>> = [
+  [
+    { 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,
+}: DialerProps) {
+  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: string) => {
+    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: any) {
+      // 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/src/ui/IncomingCallView.tsx

@@ -0,0 +1,161 @@
+/**
+ * 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,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { useCall } from '../CallProvider';
+import { parseSipUser } from '../helpers';
+import { Avatar } from './Avatar';
+import { mergeTheme, 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 function IncomingCallView({
+  onAnswered,
+  onDeclined,
+  onDismissed,
+  location,
+  title = 'Incoming call',
+  theme,
+  header,
+  style,
+}: IncomingCallViewProps) {
+  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' },
+});

package/src/ui/OutgoingCallView.tsx

@@ -0,0 +1,203 @@
+/**
+ * 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,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { useCall } from '../CallProvider';
+import { callStatusLabel, parseSipUser } from '../helpers';
+import { Avatar } from './Avatar';
+import { mergeTheme, 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 function OutgoingCallView({
+  name,
+  phone,
+  location,
+  initials,
+  onEnded,
+  theme,
+  header,
+  style,
+}: OutgoingCallViewProps) {
+  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>
+  );
+}
+
+interface ControlProps {
+  label: string;
+  icon: string;
+  active?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+  theme: CallTheme;
+}
+
+function CallControl({ label, icon, active, disabled, onPress, theme }: ControlProps) {
+  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/src/ui/index.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';

package/src/ui/theme.ts

@@ -0,0 +1,36 @@
+/**
+ * Default look-and-feel for the bundled UI components.
+ *
+ * Override per-component via the `theme` prop, or wrap the SDK components in
+ * your own and ignore these entirely.
+ */
+export interface CallTheme {
+  primary: string;
+  background: string;
+  text: string;
+  subtext: string;
+  answer: string;
+  decline: string;
+  controlOnBg: string;
+  controlOffBg: string;
+  controlIconOn: string;
+  controlIconOff: string;
+}
+
+export const defaultTheme: CallTheme = {
+  primary: '#2D6BFF',
+  background: '#fafafa',
+  text: '#111',
+  subtext: '#555',
+  answer: '#33c124',
+  decline: '#ff2d2d',
+  controlOnBg: '#111',
+  controlOffBg: '#fff',
+  controlIconOn: '#fff',
+  controlIconOff: '#111',
+};
+
+export function mergeTheme(override?: Partial<CallTheme>): CallTheme {
+  if (!override) return defaultTheme;
+  return { ...defaultTheme, ...override };
+}

package/ui/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/ui/index.js",
+  "module": "../lib/module/ui/index.js",
+  "types": "../lib/typescript/ui/index.d.ts",
+  "react-native": "../src/ui/index.ts"
+}