Built-in CallingScreen, CallingUI, and screen components for Alaznah Calling.

Call UI

Alaznah Calling includes a ready UI kit so you can ship calling without designing every screen.

Choose an entry point

Component	Use when
`CallingScreen`	Fastest path — dialer + automatic call routing in one screen
`CallingUI`	You already have a layout; need the SDK to switch incoming / active / idle
Screen pieces	Full custom chrome — compose `IncomingCallScreen`, `ActiveCallScreen`, etc.

Import from the main package or @alaznah/calling/ui:

import {
  CallingScreen,
  CallingUI,
  IncomingCallScreen,
  ActiveCallScreen,
  CallControls,
  LocalVideoView,
  RemoteVideoView,
} from '@alaznah/calling';

CallingScreen

All-in-one demo-style host:

tsx

<CallingProvider config={config}>
  <CallingScreen
    userId={myId}
    defaultPeerId="bob"
  />
</CallingProvider>

Handles connection affordances, start call, and showing the right screen for call state.

CallingUI

State router for when the provider already wraps your tree:

tsx

const client = useCallingClient();

<CallingUI
  client={client}
  // optional theme, background, slots — see Customization
/>

Typically shows:

Incoming → IncomingCallScreen (swipe-up accept)
Active / connecting / ringing out → ActiveCallScreen
Idle → nothing (or your children / empty)

IncomingCallScreen

Default inbound experience:

Peer name / id and avatar
Video: local preview + optional “join with video” toggle
Red Decline (tap)
Green Accept (swipe up) with chevron hint and pulse animation
Does not accept on tap

Wire manually only if you are not using CallingUI / CallingScreen. Prefer those wrappers so native suppress / drain behavior stays correct.

ActiveCallScreen

Connected (and transitional) call UI:

Local / remote video layout for video calls
Avatar + audio treatment for voice
Mute, speaker, camera, flip, end controls via CallControls

Video views

tsx

<LocalVideoView stream={call.localStream} mirror objectFit="cover" />
<RemoteVideoView stream={call.remoteStream} objectFit="cover" />

Hooks used by custom hosts

const client = useCallingClient();
const call = useCall();             // active / focused call
const incoming = useIncomingCall(); // ringing inbound, if any
const ready = useCallingReady();
const waking = useWakingForCall();

Use useCall() — not a legacy useActiveCall name.

Themes & slots

Colors, typography tokens, and render slots (header, controls, …) are covered in Customization.

Incoming Calls — gestures & native wake
UI Components — API catalog
Props