Built-in Alaznah Calling screens and primitives.

UI components

Component	Role
`CallingScreen`	Dialer + incoming + active
`CallingUI`	Incoming + active (bring your own dialer)
`IncomingCallScreen`	Standalone incoming layout (swipe-up accept)
`ActiveCallScreen`	Standalone in-call layout
`CallControls`	Mute / speaker / camera / end
`AudioWave`	Optional voice visualization
`VideoView` / `LocalVideoView` / `RemoteVideoView`	Render streams
`mergeTheme` / `defaultCallingTheme`	Theming helpers

Paths

Ship quickly

tsx

<CallingProvider config={config}>
  <CallingScreen userId={user.id} />
</CallingProvider>

tsx

function CallsTab() {
  const client = useCallingClient();
  const incoming = useIncomingCall();
  const call = useCall();

  if (incoming || call) {
    return <CallingUI client={client} />;
  }
  return <MyContactsList onCall={(id) => client.startCall({ calleeId: id })} />;
}

Fully custom

Use Hooks + video views + your buttons. Still call drainNativeIncomingAction / syncPendingCalls on resume — Incoming Calls.

Incoming behavior

Default IncomingCallScreen:

Decline = tap red
Accept = swipe up green (tap ignored)
Animated chevrons hint the gesture
Video invites may offer join-with-video toggle + local preview

Theming

tsx

<CallingUI
  theme={{
    colors: {
      accent: '#111111',
      background: '#0b1220',
    },
  }}
/>

Theme keys are defined on CallingTheme in package types. See Customization.

Import paths

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