From 02e9c375b00aabcfbb1149cd560bf6f6f1c1e370 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Wed, 17 Jun 2026 15:26:46 +0200
Subject: [PATCH 01/19] WIP

---
 app.json                                              |  5 +++++
 .../fishjam-chat/app/room/[roomName].tsx              |  1 +
 examples/mobile-client/voip-call/app/App.tsx          | 11 ++++++++++-
 examples/mobile-client/voip-call/app/app.json         |  3 ++-
 .../voip-call/app/src/callkit/useCallKit.ts           |  2 +-
 5 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 app.json

diff --git a/app.json b/app.json
new file mode 100644
index 00000000..c474f5ef
--- /dev/null
+++ b/app.json
@@ -0,0 +1,5 @@
+{
+  "android": {
+    "package": "com.anonymous.fishjamwebsdk"
+  }
+}
diff --git a/examples/mobile-client/fishjam-chat/app/room/[roomName].tsx b/examples/mobile-client/fishjam-chat/app/room/[roomName].tsx
index 800868df..408b74a1 100644
--- a/examples/mobile-client/fishjam-chat/app/room/[roomName].tsx
+++ b/examples/mobile-client/fishjam-chat/app/room/[roomName].tsx
@@ -81,6 +81,7 @@ export default function RoomScreen() {
     enableCamera: true,
     enableMicrophone: true,
     enableScreenSharing: true,
+    onlyAlertOnce: true,
   });
 
   useCallKitService({
diff --git a/examples/mobile-client/voip-call/app/App.tsx b/examples/mobile-client/voip-call/app/App.tsx
index 20c278f9..86a69f0d 100644
--- a/examples/mobile-client/voip-call/app/App.tsx
+++ b/examples/mobile-client/voip-call/app/App.tsx
@@ -1,13 +1,16 @@
 import { FishjamProvider } from '@fishjam-cloud/react-native-client';
 import { StatusBar } from 'expo-status-bar';
 import { useCallback } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { Button, StyleSheet, Text } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
+import { useCallKit } from '@fishjam-cloud/react-native-webrtc';
 import { useCallKitEvent } from './src/callkit';
 
 const EventLog = () => {
   // TODO: Implement on the native side.
+  const { reportIncomingCall } = useCallKit();
+
   useCallKitEvent(
     'incoming',
     useCallback((payload) => {}, []),
@@ -29,6 +32,12 @@ const EventLog = () => {
     <SafeAreaView style={styles.container}>
       <StatusBar style="auto" />
       <Text style={styles.title}>CallKit events</Text>
+      <Button
+        title="Report incoming call"
+        onPress={() =>
+          setTimeout(() => reportIncomingCall('Test', false), 3000)
+        }
+      />
     </SafeAreaView>
   );
 };
diff --git a/examples/mobile-client/voip-call/app/app.json b/examples/mobile-client/voip-call/app/app.json
index 5c6622ed..622da1dd 100644
--- a/examples/mobile-client/voip-call/app/app.json
+++ b/examples/mobile-client/voip-call/app/app.json
@@ -12,7 +12,8 @@
       "infoPlist": {
         "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to access your microphone.",
         "ITSAppUsesNonExemptEncryption": false
-      }
+      },
+      "appleTeamId": "J5FM626PE2"
     },
     "android": {
       "package": "io.fishjam.example.voipcall",
diff --git a/examples/mobile-client/voip-call/app/src/callkit/useCallKit.ts b/examples/mobile-client/voip-call/app/src/callkit/useCallKit.ts
index bfe161b8..326be891 100644
--- a/examples/mobile-client/voip-call/app/src/callkit/useCallKit.ts
+++ b/examples/mobile-client/voip-call/app/src/callkit/useCallKit.ts
@@ -20,4 +20,4 @@ export const useCallKitEvent = useCallKitEventSdk as <
 >(
   action: T,
   callback: (event: ExtendedCallKitAction[T]) => void,
-) => void;
+) => {};

From 0865c7ad95f92e94d987c3cab49702b54edf2a8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Tue, 23 Jun 2026 10:39:21 +0200
Subject: [PATCH 02/19] Test

---
 examples/mobile-client/voip-call/README.md   | 185 +++++++++++++++++++
 examples/mobile-client/voip-call/app/App.tsx |  49 ++---
 2 files changed, 204 insertions(+), 30 deletions(-)
 create mode 100644 examples/mobile-client/voip-call/README.md

diff --git a/examples/mobile-client/voip-call/README.md b/examples/mobile-client/voip-call/README.md
new file mode 100644
index 00000000..dd27a440
--- /dev/null
+++ b/examples/mobile-client/voip-call/README.md
@@ -0,0 +1,185 @@
+# iOS VoIP Push Notifications — setup
+
+This document lists everything the **app** has to change to receive VoIP push
+notifications and surface them as CallKit calls. Most of the heavy lifting lives
+in the `@fishjam-cloud/react-native-webrtc` pod; the app only has to (1) register
+for VoIP pushes and (2) declare the right capabilities.
+
+## How the flow works
+
+```
+APNs VoIP push
+  → iOS wakes the app (even if killed)               UIBackgroundModes: voip
+  → PKPushRegistry delegate                          FishjamVoIPPush (pod)
+      → reports the call to CallKit                  CallKitManager (pod)  → system call UI
+      → fires onIncomingPush block                   WebRTCModule+PushKit (pod)
+          → sendEventWithName("callKitActionPerformed", {incoming})  → JS
+  → user answers / ends on the CallKit UI
+      → CallKitManager callbacks                     WebRTCModule+CallKit (pod)
+          → JS events: answer / ended / muted / held
+```
+
+What the **pod already does for you** (no app code needed):
+
+- `PKPushRegistry` + `PKPushRegistryDelegate` — `FishjamVoIPPush.m`.
+- Reporting the incoming call to CallKit on push receipt —
+  `FishjamVoIPPush.m` → `[[CallKitManager shared] reportIncomingCallWithDisplayName:isVideo:]`.
+- Bridging native → JS events. `WebRTCModule` subclasses `RCTEventEmitter`; when
+  JS adds its first listener, `startObserving` runs and calls
+  `startObservingPushKit` (`WebRTCModule+PushKit.m`), which wires the
+  `registered` (VoIP token) and `incoming` (push payload) events. See
+  [`RCTEventEmitter`](https://reactnative.dev/docs/legacy/native-modules-ios#sending-events-to-javascript).
+
+What the **app must do** is below.
+
+---
+
+## 1. AppDelegate — register for VoIP pushes
+
+The pod never registers `PKPushRegistry` on its own (a push can wake the app
+before any JS is running, so registration must happen at launch). Add the call
+in `application(_:didFinishLaunchingWithOptions:)`.
+
+`ios/voipcall/AppDelegate.swift`:
+
+```swift
+public override func application(
+  _ application: UIApplication,
+  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
+) -> Bool {
+  let delegate = ReactNativeDelegate()
+  let factory = ExpoReactNativeFactory(delegate: delegate)
+  delegate.dependencyProvider = RCTAppDependencyProvider()
+
+  reactNativeDelegate = delegate
+  reactNativeFactory = factory
+  bindReactNativeFactory(factory)
+
+  // 👇 Register for VoIP pushes as early as possible.
+  FishjamVoIPPush.registerForVoIPPushes()
+
+#if os(iOS) || os(tvOS)
+  window = UIWindow(frame: UIScreen.main.bounds)
+  factory.startReactNative(
+    withModuleName: "main",
+    in: window,
+    launchOptions: launchOptions)
+#endif
+
+  return super.application(application, didFinishLaunchingWithOptions: launchOptions)
+}
+```
+
+> Registration triggers the APNs handshake. Once the VoIP token is issued, the
+> pod forwards it to JS as the `registered` event. Because the token may arrive
+> before your component mounts, prefer reading it on demand rather than relying
+> only on catching the event.
+
+## 2. Bridging header — expose the pod's class to Swift
+
+`FishjamVoIPPush` is Objective-C; Swift needs it imported through the bridging
+header. `ios/voipcall/voipcall-Bridging-Header.h`:
+
+````objc
+//
+// Use this file to import your target's public headers that you would like to expose to Swift.
+//
+np```
+
+> If `"FishjamVoIPPush.h"` doesn't resolve, use the pod-qualified form instead:
+> `#import <FishjamReactNativeWebrtc/FishjamVoIPPush.h>`.
+
+## 3. Entitlements — Push Notifications
+
+`ios/voipcall/voipcall.entitlements` must contain the `aps-environment` key
+(add the **Push Notifications** capability in Xcode → Signing & Capabilities,
+which writes this for you). Already present in this app:
+
+```xml
+<key>aps-environment</key>
+<string>development</string>   <!-- use "production" for TestFlight / App Store -->
+````
+
+## 4. Info.plist — background modes & permissions
+
+`ios/voipcall/Info.plist` needs (all already present in this app):
+
+```xml
+<key>UIBackgroundModes</key>
+<array>
+  <string>voip</string>      <!-- required: lets a VoIP push wake the app -->
+  <string>processing</string>
+  <!-- add <string>audio</string> if you keep an audio session alive during the call -->
+</array>
+
+<key>NSMicrophoneUsageDescription</key>
+<string>Allow $(PRODUCT_NAME) to access your microphone.</string>
+```
+
+In Xcode → Signing & Capabilities this corresponds to **Background Modes →
+Voice over IP** and **Push Notifications**.
+
+---
+
+## 5. Server / APNs side
+
+- Create a **VoIP Services certificate** (or use an APNs Auth Key) in the Apple
+  Developer portal. VoIP pushes use a dedicated token, not the regular APNs one.
+  See Apple's [PushKit](https://developer.apple.com/documentation/pushkit) and
+  [Reporting incoming calls](https://developer.apple.com/documentation/callkit/cxprovider)
+  docs.
+- Send the push with header `apns-push-type: voip` and `apns-topic:
+<bundle-id>.voip`, to the VoIP token your app reported via the `registered`
+  event.
+- Payload fields the pod reads (`FishjamVoIPPush.m`):
+
+  ```json
+  { "displayName": "Alice", "isVideo": false }
+  ```
+
+  `username` is accepted as a fallback for `displayName`. The entire payload is
+  also forwarded to JS as the `incoming` event, so you can include routing data
+  (e.g. `roomId`).
+
+> iOS 13+ requires that **every** received VoIP push reports an incoming call to
+> CallKit, immediately, inside the push handler — otherwise the system
+> terminates the app. The pod already does this for you.
+
+---
+
+## 6. JS side — subscribe to events
+
+```ts
+import { useCallKitEvent } from "./src/callkit";
+
+useCallKitEvent("registered", (token) => console.log("VoIP token:", token));
+useCallKitEvent("incoming", (payload) =>
+  console.log("incoming push:", payload),
+);
+useCallKitEvent("answer", (payload) => console.log("answer:", payload));
+useCallKitEvent("ended", (payload) => console.log("ended:", payload));
+```
+
+---
+
+## 7. Expo caveat
+
+This `ios/` directory is generated by `expo prebuild`. Direct edits to
+`AppDelegate.swift`, `Info.plist`, the entitlements, and the bridging header
+**will be overwritten by `expo prebuild --clean`**. For a durable setup, move
+these changes into an [Expo config plugin](https://docs.expo.dev/config-plugins/introduction/)
+(`withAppDelegate`, `withInfoPlist`, `withEntitlementsPlist`) so they are
+re-applied on every prebuild.
+
+---
+
+## 8. Testing
+
+1. Run on a **real device** (VoIP pushes don't work on the Simulator).
+2. Launch the app and confirm `VoIP token:` is logged — that token is your push
+   destination.
+3. Send a VoIP push to that token (e.g. via a script using your VoIP key, or a
+   tool like Pusher/Knuff). The CallKit incoming-call UI should appear even if
+   the app is backgrounded or killed.
+4. Tap **Answer** / **End** on the system UI and confirm the `answer` / `ended`
+   events log in Metro.
diff --git a/examples/mobile-client/voip-call/app/App.tsx b/examples/mobile-client/voip-call/app/App.tsx
index 86a69f0d..34bdc221 100644
--- a/examples/mobile-client/voip-call/app/App.tsx
+++ b/examples/mobile-client/voip-call/app/App.tsx
@@ -1,43 +1,32 @@
 import { FishjamProvider } from '@fishjam-cloud/react-native-client';
+import {
+  useVoIPEvents,
+  type VoipIncomingPayload,
+} from '@fishjam-cloud/react-native-webrtc';
 import { StatusBar } from 'expo-status-bar';
-import { useCallback } from 'react';
-import { Button, StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
-import { useCallKit } from '@fishjam-cloud/react-native-webrtc';
-import { useCallKitEvent } from './src/callkit';
-
 const EventLog = () => {
-  // TODO: Implement on the native side.
-  const { reportIncomingCall } = useCallKit();
-
-  useCallKitEvent(
-    'incoming',
-    useCallback((payload) => {}, []),
-  );
-  useCallKitEvent(
-    'answer',
-    useCallback((payload) => {}, []),
-  );
-  useCallKitEvent(
-    'end',
-    useCallback((payload) => {}, []),
-  );
-  useCallKitEvent(
-    'registered',
-    useCallback((payload) => {}, []),
-  );
+  useVoIPEvents({
+    onIncoming: (payload: VoipIncomingPayload) => {
+      console.log('onIncoming', payload);
+    },
+    onAnswered: () => {
+      console.log('onAnswered');
+    },
+    onEnded: () => {
+      console.log('onEnded');
+    },
+    onRegistered: (token: string) => {
+      console.log('onRegistered', token);
+    },
+  });
 
   return (
     <SafeAreaView style={styles.container}>
       <StatusBar style="auto" />
       <Text style={styles.title}>CallKit events</Text>
-      <Button
-        title="Report incoming call"
-        onPress={() =>
-          setTimeout(() => reportIncomingCall('Test', false), 3000)
-        }
-      />
     </SafeAreaView>
   );
 };

From 24955df316dffec4759374f604819c3976cc5f24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Wed, 24 Jun 2026 21:31:46 +0200
Subject: [PATCH 03/19] Add simple backend

---
 .../voip-call/server/.env.example             |   0
 .../mobile-client/voip-call/server/.gitignore |   1 +
 .../mobile-client/voip-call/server/README.md  |  49 +++++
 .../mobile-client/voip-call/server/deno.json  |   5 +-
 .../mobile-client/voip-call/server/deno.lock  |  81 +++++++
 .../mobile-client/voip-call/server/main.ts    | 201 ++++++++++++++++--
 packages/mobile-client/src/index.ts           |   3 +
 packages/react-native-webrtc                  |   2 +-
 yarn.lock                                     |  13 ++
 9 files changed, 341 insertions(+), 14 deletions(-)
 create mode 100644 examples/mobile-client/voip-call/server/.env.example
 create mode 100644 examples/mobile-client/voip-call/server/.gitignore
 create mode 100644 examples/mobile-client/voip-call/server/deno.lock

diff --git a/examples/mobile-client/voip-call/server/.env.example b/examples/mobile-client/voip-call/server/.env.example
new file mode 100644
index 00000000..e69de29b
diff --git a/examples/mobile-client/voip-call/server/.gitignore b/examples/mobile-client/voip-call/server/.gitignore
new file mode 100644
index 00000000..4cc5ada2
--- /dev/null
+++ b/examples/mobile-client/voip-call/server/.gitignore
@@ -0,0 +1 @@
+voip.db
diff --git a/examples/mobile-client/voip-call/server/README.md b/examples/mobile-client/voip-call/server/README.md
index d770b4ee..c6f0719d 100644
--- a/examples/mobile-client/voip-call/server/README.md
+++ b/examples/mobile-client/voip-call/server/README.md
@@ -5,3 +5,52 @@
 ```bash
 deno task start   # listens on :4400
 ```
+
+## Environment variables
+
+| Variable        | Required | Description                                                      |
+|-----------------|----------|------------------------------------------------------------------|
+| `APNS_KEY_ID`   | yes      | 10-char key ID from the Apple Developer portal (.p8 key)        |
+| `APNS_TEAM_ID`  | yes      | 10-char Team ID from the Apple Developer portal                 |
+| `APNS_BUNDLE_ID`| yes      | App bundle identifier, e.g. `com.example.voipcall`              |
+| `APNS_KEY_PATH` | yes      | Filesystem path to the APNs `.p8` private key file             |
+| `APNS_ENV`      | no       | `development` (default) or `production`                         |
+
+Create a `.env` file in this directory (or export the variables before running):
+
+```bash
+export APNS_KEY_ID=XXXXXXXXXX
+export APNS_TEAM_ID=XXXXXXXXXX
+export APNS_BUNDLE_ID=com.example.voipcall
+export APNS_KEY_PATH=./AuthKey_XXXXXXXXXX.p8
+export APNS_ENV=development
+
+deno task start
+```
+
+## API
+
+| Method | Path                  | Body / Query                | Description                              |
+|--------|-----------------------|-----------------------------|------------------------------------------|
+| POST   | `/register`           | `{ username, voipToken }`   | Register / update device VoIP push token |
+| GET    | `/users?exclude=<me>` |                             | List all registered users except `me`    |
+| POST   | `/call`               | `{ from, to }`              | Initiate a call; sends VoIP push to callee; returns `{ callId, roomName }` |
+| GET    | `/call/:id`           |                             | Poll call status (`ringing / answered / ended / cancelled`) |
+| POST   | `/call/:id/answer`    |                             | Mark call as answered (called by callee) |
+| POST   | `/cancel`             | `{ callId }`                | Cancel / hang up a call                  |
+
+## APNs VoIP push payload
+
+The push payload forwarded to the callee's device:
+
+```json
+{
+  "aps": {},
+  "roomId": "<roomName>",
+  "username": "<callerUsername>",
+  "callId": "<callId>",
+  "displayName": "<callerUsername>"
+}
+```
+
+iOS 13+ requires that every received VoIP push immediately reports an incoming call to CallKit — the `@fishjam-cloud/react-native-webrtc` pod handles this automatically.
diff --git a/examples/mobile-client/voip-call/server/deno.json b/examples/mobile-client/voip-call/server/deno.json
index a5352894..71e276a8 100644
--- a/examples/mobile-client/voip-call/server/deno.json
+++ b/examples/mobile-client/voip-call/server/deno.json
@@ -1,6 +1,9 @@
 {
   "tasks": {
-    "start": "deno run --allow-net main.ts"
+    "start": "deno run --allow-net --allow-read --allow-env main.ts"
+  },
+  "imports": {
+    "@db/sqlite": "jsr:@db/sqlite@^0.12"
   },
   "fmt": {
     "singleQuote": true
diff --git a/examples/mobile-client/voip-call/server/deno.lock b/examples/mobile-client/voip-call/server/deno.lock
new file mode 100644
index 00000000..cf1f95c5
--- /dev/null
+++ b/examples/mobile-client/voip-call/server/deno.lock
@@ -0,0 +1,81 @@
+{
+  "version": "5",
+  "specifiers": {
+    "jsr:@db/sqlite@*": "0.13.0",
+    "jsr:@db/sqlite@0.12": "0.12.0",
+    "jsr:@denosaurs/plug@1": "1.1.0",
+    "jsr:@std/assert@0.217": "0.217.0",
+    "jsr:@std/encoding@1": "1.0.10",
+    "jsr:@std/fmt@1": "1.0.10",
+    "jsr:@std/fs@1": "1.0.24",
+    "jsr:@std/internal@^1.0.14": "1.0.14",
+    "jsr:@std/path@0.217": "0.217.0",
+    "jsr:@std/path@1": "1.1.5",
+    "jsr:@std/path@1.0": "1.0.9",
+    "jsr:@std/path@^1.1.5": "1.1.5"
+  },
+  "jsr": {
+    "@db/sqlite@0.12.0": {
+      "integrity": "dd1ef7f621ad50fc1e073a1c3609c4470bd51edc0994139c5bf9851de7a6d85f",
+      "dependencies": [
+        "jsr:@denosaurs/plug",
+        "jsr:@std/path@0.217"
+      ]
+    },
+    "@db/sqlite@0.13.0": {
+      "integrity": "4545c635e0b3d4ddfdc0f2240f932f24b8ad0178e9c2e3a0f9403e7b18ae2fb5",
+      "dependencies": [
+        "jsr:@denosaurs/plug",
+        "jsr:@std/path@1.0"
+      ]
+    },
+    "@denosaurs/plug@1.1.0": {
+      "integrity": "eb2f0b7546c7bca2000d8b0282c54d50d91cf6d75cb26a80df25a6de8c4bc044",
+      "dependencies": [
+        "jsr:@std/encoding",
+        "jsr:@std/fmt",
+        "jsr:@std/fs",
+        "jsr:@std/path@1"
+      ]
+    },
+    "@std/assert@0.217.0": {
+      "integrity": "c98e279362ca6982d5285c3b89517b757c1e3477ee9f14eb2fdf80a45aaa9642"
+    },
+    "@std/encoding@1.0.10": {
+      "integrity": "8783c6384a2d13abd5e9e87a7ae0520a30e9f56aeeaa3bdf910a3eaaf5c811a1"
+    },
+    "@std/fmt@1.0.10": {
+      "integrity": "90dfba288802ac6de82fb31d0917eb9e4450b9925b954d5e51fc29ac07419db5"
+    },
+    "@std/fs@1.0.24": {
+      "integrity": "f3061b45b81673a2bece689da041df32d174be064c89eb6397fb5718d3fb7877",
+      "dependencies": [
+        "jsr:@std/internal",
+        "jsr:@std/path@^1.1.5"
+      ]
+    },
+    "@std/internal@1.0.14": {
+      "integrity": "291516b3d4c35024d6ffbc0a9df5bf4c64116e05b50012cf846710152d2ffdf7"
+    },
+    "@std/path@0.217.0": {
+      "integrity": "1217cc25534bca9a2f672d7fe7c6f356e4027df400c0e85c0ef3e4343bc67d11",
+      "dependencies": [
+        "jsr:@std/assert"
+      ]
+    },
+    "@std/path@1.0.9": {
+      "integrity": "260a49f11edd3db93dd38350bf9cd1b4d1366afa98e81b86167b4e3dd750129e"
+    },
+    "@std/path@1.1.5": {
+      "integrity": "ccea00982ea28c36becaf6e62f855406c76a8c32d462f66f415bbb7d83a271bc",
+      "dependencies": [
+        "jsr:@std/internal"
+      ]
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "jsr:@db/sqlite@0.12"
+    ]
+  }
+}
diff --git a/examples/mobile-client/voip-call/server/main.ts b/examples/mobile-client/voip-call/server/main.ts
index 22397445..1722b10c 100644
--- a/examples/mobile-client/voip-call/server/main.ts
+++ b/examples/mobile-client/voip-call/server/main.ts
@@ -1,23 +1,200 @@
-const json = (data: unknown) => Response.json(data);
+import { Database } from "@db/sqlite";
 
-Deno.serve({ port: 4400 }, (req) => {
-  const url = new URL(req.url);
+const db = new Database("voip.db");
 
-  if (req.method === 'POST' && url.pathname === '/register') {
-    return json({ ok: true });
+// TODO: voip_token should be primary key but for testing it's easier if i do username :D
+db.exec(`
+  CREATE TABLE IF NOT EXISTS users (
+    username TEXT NOT NULL PRIMARY KEY,
+    voip_token TEXT NOT NULL,
+    updated_at INTEGER NOT NULL
+  )
+`);
+
+// --- APNs VoIP push ---
+
+const APNS_KEY_ID = Deno.env.get("APNS_KEY_ID") ?? "";
+const APNS_TEAM_ID = Deno.env.get("APNS_TEAM_ID") ?? "";
+const APNS_BUNDLE_ID = Deno.env.get("APNS_BUNDLE_ID") ?? "";
+const APNS_KEY_PATH = Deno.env.get("APNS_KEY_PATH") ?? "";
+const APNS_ENV = Deno.env.get("APNS_ENV") ?? "development"; // 'production' | 'development'
+
+let cachedApnsJwt: { token: string; issuedAt: number } | null = null;
+
+async function loadP8Key(): Promise<CryptoKey> {
+  const raw = await Deno.readTextFile(APNS_KEY_PATH);
+  const pem = raw
+    .replace(/-----BEGIN PRIVATE KEY-----/, "")
+    .replace(/-----END PRIVATE KEY-----/, "")
+    .replace(/\s+/g, "");
+  const der = Uint8Array.from(atob(pem), (c) => c.charCodeAt(0));
+  return crypto.subtle.importKey(
+    "pkcs8",
+    der,
+    { name: "ECDSA", namedCurve: "P-256" },
+    false,
+    ["sign"],
+  );
+}
+
+function base64UrlEncode(bytes: Uint8Array): string {
+  return btoa(String.fromCharCode(...bytes))
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
+async function getApnsJwt(): Promise<string> {
+  const now = Math.floor(Date.now() / 1000);
+  // Reuse token for up to 55 minutes (APNs allows 60 min, drift buffer)
+  if (cachedApnsJwt && now - cachedApnsJwt.issuedAt < 55 * 60) {
+    return cachedApnsJwt.token;
   }
-  if (req.method === 'GET' && url.pathname === '/users') {
-    return json([]);
+
+  const key = await loadP8Key();
+  const header = base64UrlEncode(
+    new TextEncoder().encode(
+      JSON.stringify({ alg: "ES256", kid: APNS_KEY_ID }),
+    ),
+  );
+  const payload = base64UrlEncode(
+    new TextEncoder().encode(JSON.stringify({ iss: APNS_TEAM_ID, iat: now })),
+  );
+  const sigInput = new TextEncoder().encode(`${header}.${payload}`);
+  const sigDer = await crypto.subtle.sign(
+    { name: "ECDSA", hash: "SHA-256" },
+    key,
+    sigInput,
+  );
+
+  // DER → raw (r || s, 64 bytes) for APNs
+  const der = new Uint8Array(sigDer);
+  let offset = 2;
+  const rLen = der[offset + 1];
+  offset += 2;
+  const r = der.slice(offset + (rLen > 32 ? 1 : 0), offset + rLen);
+  offset += rLen;
+  const sLen = der[offset + 1];
+  offset += 2;
+  const s = der.slice(offset + (sLen > 32 ? 1 : 0), offset + sLen);
+
+  const rawSig = new Uint8Array(64);
+  rawSig.set(r, 32 - r.length);
+  rawSig.set(s, 64 - s.length);
+
+  const token = `${header}.${payload}.${base64UrlEncode(rawSig)}`;
+  cachedApnsJwt = { token, issuedAt: now };
+  return token;
+}
+
+async function sendVoipPush(params: {
+  voipToken: string;
+  roomId: string;
+  callerUsername: string;
+  displayName: string;
+}): Promise<void> {
+  if (!APNS_KEY_PATH || !APNS_KEY_ID || !APNS_TEAM_ID || !APNS_BUNDLE_ID) {
+    console.warn(
+      "APNs not configured — skipping push (set APNS_KEY_ID, APNS_TEAM_ID, APNS_BUNDLE_ID, APNS_KEY_PATH)",
+    );
+    return;
+  }
+
+  const host =
+    APNS_ENV === "production"
+      ? "api.push.apple.com"
+      : "api.development.push.apple.com";
+
+  const jwt = await getApnsJwt();
+  const url = `https://${host}/3/device/${params.voipToken}`;
+
+  const body = JSON.stringify({
+    aps: {},
+    roomId: params.roomId,
+    username: params.callerUsername,
+    displayName: params.displayName,
+  });
+
+  const res = await fetch(url, {
+    method: "POST",
+    headers: {
+      authorization: `bearer ${jwt}`,
+      "apns-push-type": "voip",
+      "apns-topic": `${APNS_BUNDLE_ID}.voip`,
+      "content-type": "application/json",
+    },
+    body,
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    console.error(`APNs push failed ${res.status}:`, text);
   }
-  if (req.method === 'POST' && url.pathname === '/call') {
+}
+
+// --- Helpers ---
+
+const json = (data: unknown, status = 200) => Response.json(data, { status });
+
+// --- Route handler ---
+
+Deno.serve({ port: 4400 }, async (req) => {
+  const url = new URL(req.url);
+  console.log(`${req.method} ${url.pathname}`);
+
+  // POST /register  { username, voipToken }
+  if (req.method === "POST" && url.pathname === "/register") {
+    const { username, voipToken } = (await req.json()) as {
+      username: string;
+      voipToken: string;
+    };
+    if (!username || !voipToken) {
+      return json({ error: "username and voipToken are required" }, 400);
+    }
+    db.exec(
+      `INSERT INTO users (username, voip_token, updated_at) VALUES (?, ?, ?)
+       ON CONFLICT(username) DO UPDATE SET voip_token=excluded.voip_token, updated_at=excluded.updated_at`,
+      [username, voipToken, Date.now()],
+    );
     return json({ ok: true });
   }
-  if (req.method === 'GET' && url.pathname === '/incoming') {
-    return json(null);
+
+  // GET /users?exclude=<me>
+  // TODO: we'll have to omit by token, not username !
+  if (req.method === "GET" && url.pathname === "/users") {
+    const exclude = url.searchParams.get("exclude") ?? "";
+    const rows = db.sql<{ username: string }>`
+      SELECT username FROM users WHERE username != ${exclude} ORDER BY username
+    `;
+    return json(rows.map((r) => r.username));
   }
-  if (req.method === 'POST' && url.pathname === '/cancel') {
+
+  // POST /call  { from, to, roomName }
+  if (req.method === "POST" && url.pathname === "/call") {
+    const { from, to, roomName } = (await req.json()) as {
+      from: string;
+      to: string;
+      roomName: string;
+    };
+    if (!from || !to || !roomName)
+      return json({ error: "from, to and roomName are required" }, 400);
+
+    const calleeRows = db.sql<{ voip_token: string }>`
+      SELECT voip_token FROM users WHERE username = ${to}
+    `;
+    if (calleeRows.length === 0)
+      return json({ error: "callee not found" }, 404);
+    const voipToken = calleeRows[0].voip_token;
+
+    await sendVoipPush({
+      voipToken,
+      roomId: roomName,
+      callerUsername: from,
+      displayName: from,
+    });
+
     return json({ ok: true });
   }
 
-  return new Response('Not found', { status: 404 });
+  return new Response("Not found", { status: 404 });
 });
diff --git a/packages/mobile-client/src/index.ts b/packages/mobile-client/src/index.ts
index 14654e76..37b97b2b 100644
--- a/packages/mobile-client/src/index.ts
+++ b/packages/mobile-client/src/index.ts
@@ -23,8 +23,11 @@ export {
   stopPIP,
   AudioDeviceType,
   useAudioOutput,
+  useVoIPEvents,
 } from '@fishjam-cloud/react-native-webrtc';
 
+export type { VoIPEventHandlers, VoipIncomingPayload } from '@fishjam-cloud/react-native-webrtc';
+
 export type {
   CallKitAction,
   CallKitConfig,
diff --git a/packages/react-native-webrtc b/packages/react-native-webrtc
index 6b994c06..84c9dbbe 160000
--- a/packages/react-native-webrtc
+++ b/packages/react-native-webrtc
@@ -1 +1 @@
-Subproject commit 6b994c06a0065ef7e4c8f0169fb95a15303b3266
+Subproject commit 84c9dbbe45936ac86ff08fc4ba69f4c0dfaed44e
diff --git a/yarn.lock b/yarn.lock
index 1301d356..ed52b667 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15787,6 +15787,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-get-random-values@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "react-native-get-random-values@npm:2.0.0"
+  dependencies:
+    fast-base64-decode: "npm:^1.0.0"
+  peerDependencies:
+    react-native: ">=0.81"
+  checksum: 10c0/fd2e10ab3bca54bff8f5844e3314b797e02822e86663bc2dafe00a511b8a8e1c05d96aa0b8dc1ffad428387d44bbf458ce770a429858433d36f58a16e6e52986
+  languageName: node
+  linkType: hard
+
 "react-native-is-edge-to-edge@npm:^1.1.6, react-native-is-edge-to-edge@npm:^1.2.1":
   version: 1.2.1
   resolution: "react-native-is-edge-to-edge@npm:1.2.1"
@@ -18920,6 +18931,8 @@ __metadata:
     expo-status-bar: "npm:~3.0.9"
     react: "npm:19.1.0"
     react-native: "npm:0.81.5"
+    react-native-get-random-values: "npm:^2.0.0"
+    react-native-reanimated: "npm:~4.1.1"
     react-native-safe-area-context: "npm:~5.6.0"
     typescript: "npm:~5.9.2"
   languageName: unknown

From c474a3b056fd1059af42d60b60bc887a38912e0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Wed, 24 Jun 2026 21:38:09 +0200
Subject: [PATCH 04/19] Screens for call lifecycle + hooks

---
 .../mobile-client/voip-call/app/.env.example  |   1 +
 examples/mobile-client/voip-call/app/App.tsx  | 129 +++++++---
 examples/mobile-client/voip-call/app/index.js |   1 +
 .../mobile-client/voip-call/app/package.json  |   2 +
 .../app/src/screens/DirectoryScreen.tsx       | 114 +++++++++
 .../app/src/screens/InCallScreen.tsx          | 226 ++++++++++++++++++
 .../voip-call/app/src/screens/LoginScreen.tsx | 131 ++++++++++
 .../app/src/screens/OutgoingCallScreen.tsx    |  90 +++++++
 .../voip-call/app/src/user/UserContext.ts     |  16 ++
 .../voip-call/app/src/user/UserProvider.tsx   |  40 ++++
 .../voip-call/app/src/user/index.ts           |   3 +
 .../voip-call/app/src/voip/VoipContext.ts     |  28 +++
 .../voip-call/app/src/voip/VoipProvider.tsx   | 188 +++++++++++++++
 .../voip-call/app/src/voip/index.ts           |   3 +
 14 files changed, 941 insertions(+), 31 deletions(-)
 create mode 100644 examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
 create mode 100644 examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
 create mode 100644 examples/mobile-client/voip-call/app/src/screens/LoginScreen.tsx
 create mode 100644 examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
 create mode 100644 examples/mobile-client/voip-call/app/src/user/UserContext.ts
 create mode 100644 examples/mobile-client/voip-call/app/src/user/UserProvider.tsx
 create mode 100644 examples/mobile-client/voip-call/app/src/user/index.ts
 create mode 100644 examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
 create mode 100644 examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
 create mode 100644 examples/mobile-client/voip-call/app/src/voip/index.ts

diff --git a/examples/mobile-client/voip-call/app/.env.example b/examples/mobile-client/voip-call/app/.env.example
index 78d7522d..6b4e7bee 100644
--- a/examples/mobile-client/voip-call/app/.env.example
+++ b/examples/mobile-client/voip-call/app/.env.example
@@ -1,2 +1,3 @@
 EXPO_PUBLIC_FISHJAM_ID=
 EXPO_PUBLIC_SANDBOX_API_URL=
+EXPO_PUBLIC_VOIP_SERVER_URL=http://localhost:4400
diff --git a/examples/mobile-client/voip-call/app/App.tsx b/examples/mobile-client/voip-call/app/App.tsx
index 34bdc221..6b51809b 100644
--- a/examples/mobile-client/voip-call/app/App.tsx
+++ b/examples/mobile-client/voip-call/app/App.tsx
@@ -1,40 +1,111 @@
-import { FishjamProvider } from '@fishjam-cloud/react-native-client';
 import {
-  useVoIPEvents,
-  type VoipIncomingPayload,
-} from '@fishjam-cloud/react-native-webrtc';
+  FishjamProvider,
+  useSandbox,
+} from '@fishjam-cloud/react-native-client';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text } from 'react-native';
+import { useCallback, useEffect } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
-const EventLog = () => {
-  useVoIPEvents({
-    onIncoming: (payload: VoipIncomingPayload) => {
-      console.log('onIncoming', payload);
-    },
-    onAnswered: () => {
-      console.log('onAnswered');
-    },
-    onEnded: () => {
-      console.log('onEnded');
-    },
-    onRegistered: (token: string) => {
-      console.log('onRegistered', token);
-    },
+import type { PropsWithChildren } from 'react';
+import { DirectoryScreen } from './src/screens/DirectoryScreen';
+import { InCallScreen } from './src/screens/InCallScreen';
+import { LoginScreen } from './src/screens/LoginScreen';
+import { OutgoingCallScreen } from './src/screens/OutgoingCallScreen';
+import { UserProvider, useUser } from './src/user';
+import { VoipProvider, useVoip } from './src/voip';
+
+const SERVER_URL =
+  process.env.EXPO_PUBLIC_VOIP_SERVER_URL ?? 'http://localhost:4400';
+const SANDBOX_API_URL = process.env.EXPO_PUBLIC_SANDBOX_API_URL ?? '';
+
+function VoipWrapper({ children }: PropsWithChildren) {
+  const { username } = useUser();
+  const { getSandboxPeerToken } = useSandbox({
+    sandboxApiUrl: SANDBOX_API_URL,
   });
 
+  const getPeerToken = useCallback(
+    (roomName: string) =>
+      getSandboxPeerToken(roomName, username ?? '', 'audio_only'),
+    [getSandboxPeerToken, username],
+  );
+
+  const requestCall = useCallback(
+    async ({ to, roomName }: { to: string; roomName: string }) => {
+      const res = await fetch(`${SERVER_URL}/call`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ from: username, to, roomName }),
+      });
+      if (!res.ok) throw new Error('Failed to initiate call');
+    },
+    [username],
+  );
+
   return (
-    <SafeAreaView style={styles.container}>
-      <StatusBar style="auto" />
-      <Text style={styles.title}>CallKit events</Text>
-    </SafeAreaView>
+    <VoipProvider getPeerToken={getPeerToken} requestCall={requestCall}>
+      <DeviceRegistration />
+      {children}
+    </VoipProvider>
   );
-};
+}
+
+function DeviceRegistration() {
+  const { username } = useUser();
+  const { voipToken } = useVoip();
+
+  useEffect(() => {
+    if (!username || !voipToken) return;
+    fetch(`${SERVER_URL}/register`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ username, voipToken }),
+    }).catch(() => {});
+  }, [username, voipToken]);
+
+  return null;
+}
+
+function AppScreens() {
+  const { username } = useUser();
+  const { status, currentCall } = useVoip();
+
+  if (!username) {
+    return <LoginScreen />;
+  }
+
+  if (status === 'connecting') {
+    if (currentCall?.direction === 'outgoing') {
+      return <OutgoingCallScreen />;
+    }
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" color="#6366f1" />
+      </View>
+    );
+  }
+
+  if (status === 'active') {
+    return <InCallScreen />;
+  }
+
+  // available | incoming — directory is shown underneath;
+  // for 'incoming' the native CallKit sheet covers the screen anyway
+  return <DirectoryScreen />;
+}
 
 const App = () => (
   <FishjamProvider fishjamId={process.env.EXPO_PUBLIC_FISHJAM_ID ?? ''}>
     <SafeAreaProvider>
-      <EventLog />
+      <UserProvider>
+        <VoipWrapper>
+          <SafeAreaView style={styles.safeArea}>
+            <StatusBar style="auto" />
+            <AppScreens />
+          </SafeAreaView>
+        </VoipWrapper>
+      </UserProvider>
     </SafeAreaProvider>
   </FishjamProvider>
 );
@@ -42,10 +113,6 @@ const App = () => (
 export default App;
 
 const styles = StyleSheet.create({
-  container: { flex: 1, padding: 24, gap: 16 },
-  title: { fontSize: 24, fontWeight: '600' },
-  log: { flex: 1, borderTopColor: '#EAECF0', borderTopWidth: 1 },
-  logContent: { paddingTop: 12, gap: 6 },
-  muted: { color: 'gray' },
-  line: { fontFamily: 'Courier', fontSize: 14 },
+  safeArea: { flex: 1, backgroundColor: '#fff' },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
 });
diff --git a/examples/mobile-client/voip-call/app/index.js b/examples/mobile-client/voip-call/app/index.js
index ce8f2073..5212d31d 100644
--- a/examples/mobile-client/voip-call/app/index.js
+++ b/examples/mobile-client/voip-call/app/index.js
@@ -1,4 +1,5 @@
 import { registerRootComponent } from 'expo';
+import 'react-native-get-random-values';
 
 import App from './App';
 
diff --git a/examples/mobile-client/voip-call/app/package.json b/examples/mobile-client/voip-call/app/package.json
index e8686ac3..f212ab80 100644
--- a/examples/mobile-client/voip-call/app/package.json
+++ b/examples/mobile-client/voip-call/app/package.json
@@ -15,6 +15,8 @@
     "expo-status-bar": "~3.0.9",
     "react": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-get-random-values": "^2.0.0",
+    "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0"
   },
   "devDependencies": {
diff --git a/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
new file mode 100644
index 00000000..724f73af
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
@@ -0,0 +1,114 @@
+import { useEffect } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { useUser } from '../user';
+import { useVoip } from '../voip';
+
+function makeRoomName() {
+  const bytes = crypto.getRandomValues(new Uint8Array(6));
+  const id = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+  return `voip-${id}`;
+}
+
+export function DirectoryScreen() {
+  const { username, users, refreshUsers } = useUser();
+  const { status, startCall } = useVoip();
+  const isCalling = status === 'connecting' || status === 'active';
+
+  useEffect(() => {
+    refreshUsers();
+  }, [refreshUsers]);
+
+  const handleCall = async (to: string) => {
+    try {
+      await startCall(to, makeRoomName());
+    } catch (err) {
+      console.error('Failed to start call:', err);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Directory</Text>
+        <Text style={styles.me}>Signed in as {username}</Text>
+      </View>
+      <FlatList
+        data={users}
+        keyExtractor={(item) => item}
+        contentContainerStyle={styles.list}
+        refreshControl={
+          <RefreshControl refreshing={false} onRefresh={refreshUsers} />
+        }
+        ListEmptyComponent={
+          <View style={styles.empty}>
+            <Text style={styles.emptyText}>No other users online yet.</Text>
+            <Text style={styles.emptyHint}>
+              Ask someone else to open the app.
+            </Text>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            style={[styles.row, isCalling && styles.rowDisabled]}
+            onPress={() => handleCall(item)}
+            disabled={isCalling}>
+            <View style={styles.avatar}>
+              <Text style={styles.avatarText}>{item[0]?.toUpperCase()}</Text>
+            </View>
+            <Text style={styles.name}>{item}</Text>
+            {isCalling ? (
+              <ActivityIndicator size="small" color="#6366f1" />
+            ) : (
+              <Text style={styles.callIcon}>📞</Text>
+            )}
+          </TouchableOpacity>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff' },
+  header: {
+    padding: 24,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f3f4f6',
+  },
+  title: { fontSize: 28, fontWeight: '700', color: '#111827' },
+  me: { fontSize: 14, color: '#6b7280', marginTop: 2 },
+  list: { padding: 16, gap: 8 },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 14,
+    borderRadius: 12,
+    backgroundColor: '#f9fafb',
+    gap: 12,
+  },
+  rowDisabled: { opacity: 0.6 },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#e0e7ff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: { fontSize: 18, fontWeight: '600', color: '#6366f1' },
+  name: { flex: 1, fontSize: 16, color: '#111827' },
+  callIcon: { fontSize: 20 },
+  empty: { paddingTop: 48, alignItems: 'center', gap: 8 },
+  emptyText: { fontSize: 16, fontWeight: '500', color: '#374151' },
+  emptyHint: { fontSize: 14, color: '#9ca3af' },
+});
diff --git a/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
new file mode 100644
index 00000000..b8a436bc
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
@@ -0,0 +1,226 @@
+import {
+  useAudioOutput,
+  useMicrophone,
+  usePeers,
+  useVAD,
+} from '@fishjam-cloud/react-native-client';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { useVoip } from '../voip';
+
+type PeerMeta = { displayName?: string };
+
+function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60)
+    .toString()
+    .padStart(2, '0');
+  const s = (seconds % 60).toString().padStart(2, '0');
+  return `${m}:${s}`;
+}
+
+export function InCallScreen() {
+  const { currentCall, endCall } = useVoip();
+  const { toggleMicrophone, isMicrophoneOn } = useMicrophone();
+  const isMicrophoneMuted = !isMicrophoneOn;
+  const { remotePeers } = usePeers<PeerMeta>();
+  const { currentAudioOutput, ios, android } = useAudioOutput();
+
+  const peerIds = useMemo(() => remotePeers.map((p) => p.id), [remotePeers]);
+  const speaking = useVAD({ peerIds });
+
+  const isSpeaker = currentAudioOutput?.type === 'speaker';
+
+  const [elapsed, setElapsed] = useState(0);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    if (!currentCall?.startedAt) {
+      setElapsed(0);
+      return;
+    }
+    const startedAt = currentCall.startedAt;
+    setElapsed(Math.floor((Date.now() - startedAt) / 1000));
+    intervalRef.current = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startedAt) / 1000));
+    }, 1000);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [currentCall?.startedAt]);
+
+  const toggleSpeaker = () => {
+    if (Platform.OS === 'ios') {
+      ios.overrideAudioOutput(isSpeaker ? 'none' : 'speaker');
+    } else if (Platform.OS === 'android') {
+      const target = isSpeaker ? null : currentAudioOutput;
+      if (target) android.selectAudioOutput(target.id);
+    }
+  };
+
+  const remoteName = currentCall?.remoteName ?? '…';
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>On call · {formatDuration(elapsed)}</Text>
+
+      {remotePeers.length === 0 ? (
+        <>
+          <View style={styles.avatar}>
+            <Text style={styles.avatarText}>
+              {remoteName[0]?.toUpperCase() ?? '?'}
+            </Text>
+          </View>
+          <Text style={styles.name}>{remoteName}</Text>
+        </>
+      ) : (
+        <View style={styles.roster}>
+          {remotePeers.map((peer) => {
+            const name = peer.metadata?.peer?.displayName ?? peer.id;
+            const isTalking = speaking[peer.id] ?? false;
+            return (
+              <View
+                key={peer.id}
+                style={[
+                  styles.rosterItem,
+                  isTalking && styles.rosterItemSpeaking,
+                ]}>
+                <View
+                  style={[
+                    styles.rosterAvatar,
+                    isTalking && styles.rosterAvatarSpeaking,
+                  ]}>
+                  <Text style={styles.rosterAvatarText}>
+                    {name[0]?.toUpperCase() ?? '?'}
+                  </Text>
+                </View>
+                <Text style={styles.rosterName}>{name}</Text>
+                {isTalking && <Text style={styles.speakingDot}>●</Text>}
+              </View>
+            );
+          })}
+        </View>
+      )}
+
+      <View style={styles.controls}>
+        <TouchableOpacity
+          style={[
+            styles.controlButton,
+            isMicrophoneMuted && styles.controlButtonActive,
+          ]}
+          onPress={toggleMicrophone}>
+          <Text style={styles.controlIcon}>
+            {isMicrophoneMuted ? '🔇' : '🎤'}
+          </Text>
+          <Text style={styles.controlLabel}>
+            {isMicrophoneMuted ? 'Unmute' : 'Mute'}
+          </Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={styles.endButton} onPress={endCall}>
+          <Text style={styles.endIcon}>✕</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[
+            styles.controlButton,
+            isSpeaker && styles.controlButtonActive,
+          ]}
+          onPress={toggleSpeaker}>
+          <Text style={styles.controlIcon}>{isSpeaker ? '🔊' : '🔈'}</Text>
+          <Text style={styles.controlLabel}>
+            {isSpeaker ? 'Earpiece' : 'Speaker'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#052e16',
+    gap: 16,
+    padding: 32,
+  },
+  label: {
+    fontSize: 14,
+    color: '#86efac',
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+  },
+  avatar: {
+    marginVertical: 24,
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: '#16a34a',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: { fontSize: 40, fontWeight: '700', color: '#fff' },
+  name: { fontSize: 28, fontWeight: '700', color: '#fff' },
+  roster: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: 16,
+    marginVertical: 16,
+  },
+  rosterItem: {
+    alignItems: 'center',
+    gap: 6,
+    padding: 12,
+    borderRadius: 16,
+    backgroundColor: 'rgba(255,255,255,0.07)',
+    minWidth: 80,
+  },
+  rosterItemSpeaking: { backgroundColor: 'rgba(22,163,74,0.25)' },
+  rosterAvatar: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: '#16a34a',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rosterAvatarSpeaking: { borderWidth: 2, borderColor: '#4ade80' },
+  rosterAvatarText: { fontSize: 26, fontWeight: '700', color: '#fff' },
+  rosterName: { fontSize: 13, color: '#d1fae5', textAlign: 'center' },
+  speakingDot: { fontSize: 10, color: '#4ade80' },
+  controls: {
+    flexDirection: 'row',
+    marginTop: 48,
+    alignItems: 'center',
+    gap: 32,
+  },
+  controlButton: {
+    alignItems: 'center',
+    gap: 6,
+    padding: 16,
+    borderRadius: 16,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+    minWidth: 80,
+  },
+  controlButtonActive: { backgroundColor: 'rgba(239,68,68,0.3)' },
+  controlIcon: { fontSize: 28 },
+  controlLabel: { fontSize: 12, color: '#d1fae5' },
+  endButton: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: '#ef4444',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  endIcon: { fontSize: 28, color: '#fff' },
+});
diff --git a/examples/mobile-client/voip-call/app/src/screens/LoginScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/LoginScreen.tsx
new file mode 100644
index 00000000..881b5c56
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/screens/LoginScreen.tsx
@@ -0,0 +1,131 @@
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { useUser } from '../user';
+
+export function LoginScreen() {
+  const { register } = useUser();
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleContinue = async () => {
+    const name = input.trim();
+    if (!name) return;
+    setIsLoading(true);
+    await register(name);
+    setIsLoading(false);
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.root}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+      <View style={styles.container}>
+        <View style={styles.iconWrap}>
+          <Text style={styles.icon}>📞</Text>
+        </View>
+
+        <Text style={styles.title}>Welcome</Text>
+        <Text style={styles.subtitle}>Choose a display name so others can call you.</Text>
+
+        <TextInput
+          style={styles.input}
+          value={input}
+          onChangeText={setInput}
+          placeholder="Your name"
+          placeholderTextColor="#9ca3af"
+          autoCapitalize="words"
+          autoCorrect={false}
+          returnKeyType="go"
+          onSubmitEditing={handleContinue}
+          editable={!isLoading}
+          autoFocus
+        />
+
+        <TouchableOpacity
+          style={[styles.button, (!input.trim() || isLoading) && styles.buttonDisabled]}
+          onPress={handleContinue}
+          disabled={!input.trim() || isLoading}
+          activeOpacity={0.85}>
+          {isLoading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>Continue</Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 32,
+    gap: 16,
+  },
+  iconWrap: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    backgroundColor: '#eef2ff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 8,
+  },
+  icon: {
+    fontSize: 40,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: '#111827',
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontSize: 15,
+    color: '#6b7280',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  input: {
+    width: '100%',
+    borderWidth: 1.5,
+    borderColor: '#e5e7eb',
+    borderRadius: 14,
+    padding: 16,
+    fontSize: 17,
+    color: '#111827',
+    backgroundColor: '#f9fafb',
+  },
+  button: {
+    width: '100%',
+    backgroundColor: '#6366f1',
+    borderRadius: 14,
+    padding: 16,
+    alignItems: 'center',
+  },
+  buttonDisabled: {
+    opacity: 0.4,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 17,
+    fontWeight: '600',
+  },
+});
diff --git a/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
new file mode 100644
index 00000000..87fdfd78
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useVoip } from '../voip';
+
+export function OutgoingCallScreen() {
+  const { currentCall, endCall } = useVoip();
+  const peerName = currentCall?.remoteName ?? '…';
+  const scale = useSharedValue(1);
+
+  useEffect(() => {
+    scale.value = withRepeat(
+      withSequence(
+        withTiming(1.12, { duration: 800 }),
+        withTiming(1, { duration: 800 }),
+      ),
+      -1,
+    );
+    return () => {
+      scale.value = 1;
+    };
+  }, [scale]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>Calling</Text>
+      <Animated.View style={[styles.avatarWrap, animatedStyle]}>
+        <View style={styles.avatar}>
+          <Text style={styles.avatarText}>
+            {peerName[0]?.toUpperCase() ?? '?'}
+          </Text>
+        </View>
+      </Animated.View>
+      <Text style={styles.name}>{peerName}</Text>
+
+      <TouchableOpacity style={styles.endButton} onPress={endCall}>
+        <Text style={styles.endIcon}>✕</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#1e1b4b',
+    gap: 16,
+    padding: 32,
+  },
+  label: {
+    fontSize: 16,
+    color: '#a5b4fc',
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+  },
+  avatarWrap: { marginVertical: 24 },
+  avatar: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: '#4f46e5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarText: { fontSize: 40, fontWeight: '700', color: '#fff' },
+  name: { fontSize: 28, fontWeight: '700', color: '#fff' },
+  endButton: {
+    marginTop: 48,
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: '#ef4444',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  endIcon: { fontSize: 28, color: '#fff' },
+});
diff --git a/examples/mobile-client/voip-call/app/src/user/UserContext.ts b/examples/mobile-client/voip-call/app/src/user/UserContext.ts
new file mode 100644
index 00000000..88ef90bb
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/user/UserContext.ts
@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+export type UserContextValue = {
+  username: string | null;
+  users: string[];
+  register: (name: string) => Promise<void>;
+  refreshUsers: () => Promise<void>;
+};
+
+export const UserContext = createContext<UserContextValue | null>(null);
+
+export function useUser(): UserContextValue {
+  const ctx = useContext(UserContext);
+  if (!ctx) throw new Error('useUser must be used within UserProvider');
+  return ctx;
+}
diff --git a/examples/mobile-client/voip-call/app/src/user/UserProvider.tsx b/examples/mobile-client/voip-call/app/src/user/UserProvider.tsx
new file mode 100644
index 00000000..41f9a4ca
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/user/UserProvider.tsx
@@ -0,0 +1,40 @@
+import React, { type PropsWithChildren, useCallback, useMemo, useState } from 'react';
+
+import { UserContext } from './UserContext';
+
+const SERVER_URL = process.env.EXPO_PUBLIC_VOIP_SERVER_URL ?? 'http://localhost:4400';
+
+export function UserProvider({ children }: PropsWithChildren) {
+  const [username, setUsername] = useState<string | null>(null);
+  const [users, setUsers] = useState<string[]>([]);
+
+  const fetchUsers = useCallback(async (exclude: string) => {
+    try {
+      const res = await fetch(`${SERVER_URL}/users?exclude=${encodeURIComponent(exclude)}`);
+      if (!res.ok) return;
+      const list: string[] = await res.json();
+      setUsers(list);
+    } catch {
+      // network error — ignore
+    }
+  }, []);
+
+  const register = useCallback(
+    async (name: string) => {
+      setUsername(name);
+      await fetchUsers(name);
+    },
+    [fetchUsers],
+  );
+
+  const refreshUsers = useCallback(async () => {
+    if (username) await fetchUsers(username);
+  }, [username, fetchUsers]);
+
+  const value = useMemo(
+    () => ({ username, users, register, refreshUsers }),
+    [username, users, register, refreshUsers],
+  );
+
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+}
diff --git a/examples/mobile-client/voip-call/app/src/user/index.ts b/examples/mobile-client/voip-call/app/src/user/index.ts
new file mode 100644
index 00000000..dec7164e
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/user/index.ts
@@ -0,0 +1,3 @@
+export { UserProvider } from './UserProvider';
+export { useUser } from './UserContext';
+export type { UserContextValue } from './UserContext';
diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts b/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
new file mode 100644
index 00000000..59ec1bda
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+
+export type VoipCallStatus = 'available' | 'incoming' | 'connecting' | 'active';
+
+export type CurrentCall = {
+  roomName: string;
+  direction: 'incoming' | 'outgoing';
+  remoteName: string; // counterpart name for ringing/connecting UI
+  startedAt: number | null; // Date.now() when the call became active; null until then
+};
+
+export type VoipContextValue = {
+  status: VoipCallStatus;
+  voipToken: string | null;
+  currentCall: CurrentCall | null;
+  startCall: (to: string, roomName: string) => Promise<void>;
+  answerCall: () => Promise<void>;
+  rejectCall: () => Promise<void>;
+  endCall: () => Promise<void>;
+};
+
+export const VoipContext = createContext<VoipContextValue | null>(null);
+
+export function useVoip(): VoipContextValue {
+  const ctx = useContext(VoipContext);
+  if (!ctx) throw new Error('useVoip must be used within VoipProvider');
+  return ctx;
+}
diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
new file mode 100644
index 00000000..ea48558f
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
@@ -0,0 +1,188 @@
+import {
+  useCallKit,
+  useConnection,
+  useMicrophone,
+  useVoIPEvents,
+  type VoipIncomingPayload,
+} from '@fishjam-cloud/react-native-client';
+import {
+  type PropsWithChildren,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { useUser } from '../user';
+import {
+  type CurrentCall,
+  type VoipCallStatus,
+  VoipContext,
+} from './VoipContext';
+
+type VoipProviderProps = PropsWithChildren & {
+  getPeerToken: (roomName: string) => Promise<string>;
+  requestCall: (params: { to: string; roomName: string }) => Promise<void>;
+};
+
+export function VoipProvider({
+  getPeerToken,
+  requestCall,
+  children,
+}: VoipProviderProps) {
+  const { username } = useUser();
+
+  const [voipToken, setVoipToken] = useState<string | null>(null);
+  const [status, setStatus] = useState<VoipCallStatus>('available');
+  const [currentCall, setCurrentCall] = useState<CurrentCall | null>(null);
+
+  const currentCallRef = useRef(currentCall);
+  currentCallRef.current = currentCall;
+  const usernameRef = useRef(username);
+  usernameRef.current = username;
+
+  const { joinRoom, leaveRoom } = useConnection();
+  const { startMicrophone, stopMicrophone } = useMicrophone();
+  const { startCallKitSession, endCallKitSession } = useCallKit();
+
+  // --- Helpers ---
+
+  const doJoinRoom = useCallback(
+    async (roomName: string) => {
+      const token = await getPeerToken(roomName);
+      await joinRoom({
+        peerToken: token,
+        peerMetadata: { displayName: usernameRef.current ?? '' },
+      });
+      await startMicrophone();
+    },
+    [getPeerToken, joinRoom, startMicrophone],
+  );
+
+  const doLeaveRoom = useCallback(async () => {
+    try {
+      await stopMicrophone();
+    } catch {
+      // ignore if mic was never started
+    }
+    leaveRoom();
+  }, [leaveRoom, stopMicrophone]);
+
+  const resetCall = useCallback(async () => {
+    await doLeaveRoom();
+    setCurrentCall(null);
+    setStatus('available');
+  }, [doLeaveRoom]);
+
+  // --- Outgoing call ---
+
+  const startCall = useCallback(
+    async (to: string, roomName: string) => {
+      const from = usernameRef.current;
+      if (!from) throw new Error('Not registered');
+
+      // The room name is supplied by the caller — the SDK owns no naming policy.
+      await requestCall({ to, roomName });
+
+      setCurrentCall({
+        roomName,
+        remoteName: to,
+        direction: 'outgoing',
+        startedAt: null,
+      });
+      setStatus('connecting');
+
+      await startCallKitSession({ displayName: to, isVideo: false });
+      await doJoinRoom(roomName);
+      setCurrentCall((prev) =>
+        prev ? { ...prev, startedAt: Date.now() } : prev,
+      );
+      setStatus('active');
+    },
+    [requestCall, doJoinRoom, startCallKitSession],
+  );
+
+  // --- Incoming call ---
+
+  const answerCall = useCallback(async () => {
+    const call = currentCallRef.current;
+    if (!call) return;
+
+    setStatus('connecting');
+    try {
+      await doJoinRoom(call.roomName);
+      setCurrentCall((prev) =>
+        prev ? { ...prev, startedAt: Date.now() } : prev,
+      );
+      setStatus('active');
+    } catch (err) {
+      console.error('Failed to join room on answer:', err);
+      await resetCall();
+    }
+  }, [doJoinRoom, resetCall]);
+
+  const rejectCall = useCallback(async () => {
+    await endCallKitSession();
+    await resetCall();
+  }, [endCallKitSession, resetCall]);
+
+  // --- End call (works for both directions) ---
+
+  const endCall = useCallback(async () => {
+    await endCallKitSession();
+    await doLeaveRoom();
+    setCurrentCall(null);
+    setStatus('available');
+  }, [doLeaveRoom, endCallKitSession]);
+
+  // --- VoIP event handlers ---
+
+  useVoIPEvents({
+    onRegistered: useCallback((token: string) => {
+      setVoipToken(token);
+    }, []),
+
+    onIncoming: useCallback((payload: VoipIncomingPayload) => {
+      setCurrentCall({
+        roomName: payload.roomId,
+        remoteName: payload.username,
+        direction: 'incoming',
+        startedAt: null,
+      });
+      setStatus('incoming');
+    }, []),
+
+    onAnswered: useCallback(async () => {
+      await answerCall();
+    }, [answerCall]),
+
+    onEnded: useCallback(async () => {
+      await resetCall();
+    }, [resetCall]),
+  });
+
+  const voipValue = useMemo(
+    () => ({
+      voipToken,
+      status,
+      currentCall,
+      startCall,
+      answerCall,
+      rejectCall,
+      endCall,
+    }),
+    [
+      voipToken,
+      status,
+      currentCall,
+      startCall,
+      answerCall,
+      rejectCall,
+      endCall,
+    ],
+  );
+
+  return (
+    <VoipContext.Provider value={voipValue}>{children}</VoipContext.Provider>
+  );
+}
diff --git a/examples/mobile-client/voip-call/app/src/voip/index.ts b/examples/mobile-client/voip-call/app/src/voip/index.ts
new file mode 100644
index 00000000..d3ee52da
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/voip/index.ts
@@ -0,0 +1,3 @@
+export { VoipProvider } from './VoipProvider';
+export { useVoip } from './VoipContext';
+export type { CurrentCall, VoipCallStatus, VoipContextValue } from './VoipContext';

From ef4d84c6c6107c2cd678b1087e906e4568bb8a85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Thu, 25 Jun 2026 15:45:43 +0200
Subject: [PATCH 05/19] Add ring timeout and correct behavior when calling
 someone

---
 examples/mobile-client/voip-call/README.md    | 16 ++--
 .../voip-call/app/src/voip/VoipProvider.tsx   | 95 +++++++++++--------
 .../voip-call/app/src/voip/index.ts           |  8 +-
 3 files changed, 71 insertions(+), 48 deletions(-)

diff --git a/examples/mobile-client/voip-call/README.md b/examples/mobile-client/voip-call/README.md
index dd27a440..ddfda40a 100644
--- a/examples/mobile-client/voip-call/README.md
+++ b/examples/mobile-client/voip-call/README.md
@@ -10,7 +10,7 @@ for VoIP pushes and (2) declare the right capabilities.
 ```
 APNs VoIP push
   → iOS wakes the app (even if killed)               UIBackgroundModes: voip
-  → PKPushRegistry delegate                          FishjamVoIPPush (pod)
+  → PKPushRegistry delegate                          VoipManager (pod)
       → reports the call to CallKit                  CallKitManager (pod)  → system call UI
       → fires onIncomingPush block                   WebRTCModule+PushKit (pod)
           → sendEventWithName("callKitActionPerformed", {incoming})  → JS
@@ -21,9 +21,9 @@ APNs VoIP push
 
 What the **pod already does for you** (no app code needed):
 
-- `PKPushRegistry` + `PKPushRegistryDelegate` — `FishjamVoIPPush.m`.
+- `PKPushRegistry` + `PKPushRegistryDelegate` — `VoipManager.m`.
 - Reporting the incoming call to CallKit on push receipt —
-  `FishjamVoIPPush.m` → `[[CallKitManager shared] reportIncomingCallWithDisplayName:isVideo:]`.
+  `VoipManager.m` → `[[CallKitManager shared] reportIncomingCallWithDisplayName:isVideo:]`.
 - Bridging native → JS events. `WebRTCModule` subclasses `RCTEventEmitter`; when
   JS adds its first listener, `startObserving` runs and calls
   `startObservingPushKit` (`WebRTCModule+PushKit.m`), which wires the
@@ -56,7 +56,7 @@ public override func application(
   bindReactNativeFactory(factory)
 
   // 👇 Register for VoIP pushes as early as possible.
-  FishjamVoIPPush.registerForVoIPPushes()
+  VoipManager.registerForVoIPPushes()
 
 #if os(iOS) || os(tvOS)
   window = UIWindow(frame: UIScreen.main.bounds)
@@ -77,7 +77,7 @@ public override func application(
 
 ## 2. Bridging header — expose the pod's class to Swift
 
-`FishjamVoIPPush` is Objective-C; Swift needs it imported through the bridging
+`VoipManager` is Objective-C; Swift needs it imported through the bridging
 header. `ios/voipcall/voipcall-Bridging-Header.h`:
 
 ````objc
@@ -86,8 +86,8 @@ header. `ios/voipcall/voipcall-Bridging-Header.h`:
 //
 np```
 
-> If `"FishjamVoIPPush.h"` doesn't resolve, use the pod-qualified form instead:
-> `#import <FishjamReactNativeWebrtc/FishjamVoIPPush.h>`.
+> If `"VoipManager.h"` doesn't resolve, use the pod-qualified form instead:
+> `#import <FishjamReactNativeWebrtc/VoipManager.h>`.
 
 ## 3. Entitlements — Push Notifications
 
@@ -131,7 +131,7 @@ Voice over IP** and **Push Notifications**.
 - Send the push with header `apns-push-type: voip` and `apns-topic:
 <bundle-id>.voip`, to the VoIP token your app reported via the `registered`
   event.
-- Payload fields the pod reads (`FishjamVoIPPush.m`):
+- Payload fields the pod reads (`VoipManager.m`):
 
   ```json
   { "displayName": "Alice", "isVideo": false }
diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
index ea48558f..cd030a69 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
@@ -2,18 +2,19 @@ import {
   useCallKit,
   useConnection,
   useMicrophone,
+  usePeers,
   useVoIPEvents,
   type VoipIncomingPayload,
 } from '@fishjam-cloud/react-native-client';
 import {
   type PropsWithChildren,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
 
-import { useUser } from '../user';
 import {
   type CurrentCall,
   type VoipCallStatus,
@@ -23,43 +24,46 @@ import {
 type VoipProviderProps = PropsWithChildren & {
   getPeerToken: (roomName: string) => Promise<string>;
   requestCall: (params: { to: string; roomName: string }) => Promise<void>;
+  ringTimeoutMs?: number;
 };
 
 export function VoipProvider({
   getPeerToken,
   requestCall,
+  ringTimeoutMs,
   children,
 }: VoipProviderProps) {
-  const { username } = useUser();
-
   const [voipToken, setVoipToken] = useState<string | null>(null);
   const [status, setStatus] = useState<VoipCallStatus>('available');
   const [currentCall, setCurrentCall] = useState<CurrentCall | null>(null);
 
   const currentCallRef = useRef(currentCall);
   currentCallRef.current = currentCall;
-  const usernameRef = useRef(username);
-  usernameRef.current = username;
+
+  const ringTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const { joinRoom, leaveRoom } = useConnection();
   const { startMicrophone, stopMicrophone } = useMicrophone();
   const { startCallKitSession, endCallKitSession } = useCallKit();
+  const { remotePeers } = usePeers();
 
-  // --- Helpers ---
+  const clearRingTimeout = useCallback(() => {
+    if (ringTimeoutRef.current != null) {
+      clearTimeout(ringTimeoutRef.current);
+      ringTimeoutRef.current = null;
+    }
+  }, []);
 
-  const doJoinRoom = useCallback(
+  const handleJoinRoom = useCallback(
     async (roomName: string) => {
       const token = await getPeerToken(roomName);
-      await joinRoom({
-        peerToken: token,
-        peerMetadata: { displayName: usernameRef.current ?? '' },
-      });
+      await joinRoom({ peerToken: token });
       await startMicrophone();
     },
     [getPeerToken, joinRoom, startMicrophone],
   );
 
-  const doLeaveRoom = useCallback(async () => {
+  const handleLeaveRoom = useCallback(async () => {
     try {
       await stopMicrophone();
     } catch {
@@ -69,19 +73,28 @@ export function VoipProvider({
   }, [leaveRoom, stopMicrophone]);
 
   const resetCall = useCallback(async () => {
-    await doLeaveRoom();
+    clearRingTimeout();
+    await handleLeaveRoom();
     setCurrentCall(null);
     setStatus('available');
-  }, [doLeaveRoom]);
-
-  // --- Outgoing call ---
+  }, [clearRingTimeout, handleLeaveRoom]);
+
+  useEffect(() => {
+    if (
+      status === 'connecting' &&
+      currentCallRef.current?.direction === 'outgoing' &&
+      remotePeers.length > 0
+    ) {
+      clearRingTimeout();
+      setCurrentCall((prev) =>
+        prev ? { ...prev, startedAt: Date.now() } : prev,
+      );
+      setStatus('active');
+    }
+  }, [remotePeers.length, status, clearRingTimeout]);
 
   const startCall = useCallback(
     async (to: string, roomName: string) => {
-      const from = usernameRef.current;
-      if (!from) throw new Error('Not registered');
-
-      // The room name is supplied by the caller — the SDK owns no naming policy.
       await requestCall({ to, roomName });
 
       setCurrentCall({
@@ -93,24 +106,33 @@ export function VoipProvider({
       setStatus('connecting');
 
       await startCallKitSession({ displayName: to, isVideo: false });
-      await doJoinRoom(roomName);
-      setCurrentCall((prev) =>
-        prev ? { ...prev, startedAt: Date.now() } : prev,
-      );
-      setStatus('active');
+      await handleJoinRoom(roomName);
+
+      if (ringTimeoutMs != null) {
+        clearRingTimeout();
+        ringTimeoutRef.current = setTimeout(() => {
+          ringTimeoutRef.current = null;
+          resetCall();
+        }, ringTimeoutMs);
+      }
     },
-    [requestCall, doJoinRoom, startCallKitSession],
+    [
+      requestCall,
+      handleJoinRoom,
+      startCallKitSession,
+      clearRingTimeout,
+      ringTimeoutMs,
+      resetCall,
+    ],
   );
 
-  // --- Incoming call ---
-
   const answerCall = useCallback(async () => {
     const call = currentCallRef.current;
     if (!call) return;
 
     setStatus('connecting');
     try {
-      await doJoinRoom(call.roomName);
+      await handleJoinRoom(call.roomName);
       setCurrentCall((prev) =>
         prev ? { ...prev, startedAt: Date.now() } : prev,
       );
@@ -119,23 +141,20 @@ export function VoipProvider({
       console.error('Failed to join room on answer:', err);
       await resetCall();
     }
-  }, [doJoinRoom, resetCall]);
+  }, [handleJoinRoom, resetCall]);
 
   const rejectCall = useCallback(async () => {
     await endCallKitSession();
     await resetCall();
   }, [endCallKitSession, resetCall]);
 
-  // --- End call (works for both directions) ---
-
   const endCall = useCallback(async () => {
+    clearRingTimeout();
     await endCallKitSession();
-    await doLeaveRoom();
+    await handleLeaveRoom();
     setCurrentCall(null);
     setStatus('available');
-  }, [doLeaveRoom, endCallKitSession]);
-
-  // --- VoIP event handlers ---
+  }, [clearRingTimeout, handleLeaveRoom, endCallKitSession]);
 
   useVoIPEvents({
     onRegistered: useCallback((token: string) => {
@@ -144,8 +163,8 @@ export function VoipProvider({
 
     onIncoming: useCallback((payload: VoipIncomingPayload) => {
       setCurrentCall({
-        roomName: payload.roomId,
-        remoteName: payload.username,
+        roomName: payload.roomName,
+        remoteName: payload.displayName,
         direction: 'incoming',
         startedAt: null,
       });
diff --git a/examples/mobile-client/voip-call/app/src/voip/index.ts b/examples/mobile-client/voip-call/app/src/voip/index.ts
index d3ee52da..3848ba68 100644
--- a/examples/mobile-client/voip-call/app/src/voip/index.ts
+++ b/examples/mobile-client/voip-call/app/src/voip/index.ts
@@ -1,3 +1,7 @@
-export { VoipProvider } from './VoipProvider';
 export { useVoip } from './VoipContext';
-export type { CurrentCall, VoipCallStatus, VoipContextValue } from './VoipContext';
+export type {
+  CurrentCall,
+  VoipCallStatus,
+  VoipContextValue,
+} from './VoipContext';
+export { VoipProvider } from './VoipProvider';

From ff3b9bae8f0083f3832b6a48e829e32e355c6706 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Fri, 26 Jun 2026 19:22:26 +0200
Subject: [PATCH 06/19] Add ability to go into video calls + remove timeout for
 now

---
 examples/mobile-client/voip-call/app/App.tsx  | 23 ++++--
 .../app/src/screens/InCallScreen.tsx          |  6 +-
 .../app/src/screens/OutgoingCallScreen.tsx    |  6 +-
 .../voip-call/app/src/voip/VoipContext.ts     |  6 +-
 .../voip-call/app/src/voip/VoipProvider.tsx   | 74 ++++++-------------
 5 files changed, 46 insertions(+), 69 deletions(-)

diff --git a/examples/mobile-client/voip-call/app/App.tsx b/examples/mobile-client/voip-call/app/App.tsx
index 6b51809b..a55bfb42 100644
--- a/examples/mobile-client/voip-call/app/App.tsx
+++ b/examples/mobile-client/voip-call/app/App.tsx
@@ -27,16 +27,24 @@ function VoipWrapper({ children }: PropsWithChildren) {
 
   const getPeerToken = useCallback(
     (roomName: string) =>
-      getSandboxPeerToken(roomName, username ?? '', 'audio_only'),
+      getSandboxPeerToken(roomName, username ?? 'unknown', 'conference'),
     [getSandboxPeerToken, username],
   );
 
   const requestCall = useCallback(
-    async ({ to, roomName }: { to: string; roomName: string }) => {
+    async ({
+      to,
+      roomName,
+      isVideo,
+    }: {
+      to: string;
+      roomName: string;
+      isVideo: boolean;
+    }) => {
       const res = await fetch(`${SERVER_URL}/call`, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ from: username, to, roomName }),
+        body: JSON.stringify({ from: username, to, roomName, isVideo }),
       });
       if (!res.ok) throw new Error('Failed to initiate call');
     },
@@ -44,7 +52,10 @@ function VoipWrapper({ children }: PropsWithChildren) {
   );
 
   return (
-    <VoipProvider getPeerToken={getPeerToken} requestCall={requestCall}>
+    <VoipProvider
+      getPeerToken={getPeerToken}
+      requestCall={requestCall}
+      ringTimeoutMs={10_000}>
       <DeviceRegistration />
       {children}
     </VoipProvider>
@@ -76,9 +87,7 @@ function AppScreens() {
   }
 
   if (status === 'connecting') {
-    if (currentCall?.direction === 'outgoing') {
-      return <OutgoingCallScreen />;
-    }
+    return <OutgoingCallScreen />;
     return (
       <View style={styles.center}>
         <ActivityIndicator size="large" color="#6366f1" />
diff --git a/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
index b8a436bc..56d106de 100644
--- a/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
@@ -64,7 +64,7 @@ export function InCallScreen() {
     }
   };
 
-  const remoteName = currentCall?.remoteName ?? '…';
+  const displayName = currentCall?.displayName ?? '…';
 
   return (
     <View style={styles.container}>
@@ -74,10 +74,10 @@ export function InCallScreen() {
         <>
           <View style={styles.avatar}>
             <Text style={styles.avatarText}>
-              {remoteName[0]?.toUpperCase() ?? '?'}
+              {displayName[0]?.toUpperCase() ?? '?'}
             </Text>
           </View>
-          <Text style={styles.name}>{remoteName}</Text>
+          <Text style={styles.name}>{displayName}</Text>
         </>
       ) : (
         <View style={styles.roster}>
diff --git a/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
index 87fdfd78..74406922 100644
--- a/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
@@ -12,7 +12,7 @@ import { useVoip } from '../voip';
 
 export function OutgoingCallScreen() {
   const { currentCall, endCall } = useVoip();
-  const peerName = currentCall?.remoteName ?? '…';
+  const displayName = currentCall?.displayName ?? '…';
   const scale = useSharedValue(1);
 
   useEffect(() => {
@@ -38,11 +38,11 @@ export function OutgoingCallScreen() {
       <Animated.View style={[styles.avatarWrap, animatedStyle]}>
         <View style={styles.avatar}>
           <Text style={styles.avatarText}>
-            {peerName[0]?.toUpperCase() ?? '?'}
+            {displayName[0]?.toUpperCase() ?? '?'}
           </Text>
         </View>
       </Animated.View>
-      <Text style={styles.name}>{peerName}</Text>
+      <Text style={styles.name}>{displayName}</Text>
 
       <TouchableOpacity style={styles.endButton} onPress={endCall}>
         <Text style={styles.endIcon}>✕</Text>
diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts b/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
index 59ec1bda..ecff1725 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
@@ -4,9 +4,9 @@ export type VoipCallStatus = 'available' | 'incoming' | 'connecting' | 'active';
 
 export type CurrentCall = {
   roomName: string;
-  direction: 'incoming' | 'outgoing';
-  remoteName: string; // counterpart name for ringing/connecting UI
-  startedAt: number | null; // Date.now() when the call became active; null until then
+  displayName: string;
+  isVideo: boolean;
+  startedAt: number | null;
 };
 
 export type VoipContextValue = {
diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
index cd030a69..868a82e5 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
@@ -11,7 +11,6 @@ import {
   useCallback,
   useEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 
@@ -23,37 +22,29 @@ import {
 
 type VoipProviderProps = PropsWithChildren & {
   getPeerToken: (roomName: string) => Promise<string>;
-  requestCall: (params: { to: string; roomName: string }) => Promise<void>;
-  ringTimeoutMs?: number;
+  requestCall: (params: {
+    to: string;
+    roomName: string;
+    isVideo: boolean;
+  }) => Promise<void>;
+  isVideo?: boolean;
 };
 
 export function VoipProvider({
   getPeerToken,
   requestCall,
-  ringTimeoutMs,
+  isVideo = false,
   children,
 }: VoipProviderProps) {
   const [voipToken, setVoipToken] = useState<string | null>(null);
   const [status, setStatus] = useState<VoipCallStatus>('available');
   const [currentCall, setCurrentCall] = useState<CurrentCall | null>(null);
 
-  const currentCallRef = useRef(currentCall);
-  currentCallRef.current = currentCall;
-
-  const ringTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
   const { joinRoom, leaveRoom } = useConnection();
   const { startMicrophone, stopMicrophone } = useMicrophone();
   const { startCallKitSession, endCallKitSession } = useCallKit();
   const { remotePeers } = usePeers();
 
-  const clearRingTimeout = useCallback(() => {
-    if (ringTimeoutRef.current != null) {
-      clearTimeout(ringTimeoutRef.current);
-      ringTimeoutRef.current = null;
-    }
-  }, []);
-
   const handleJoinRoom = useCallback(
     async (roomName: string) => {
       const token = await getPeerToken(roomName);
@@ -73,66 +64,44 @@ export function VoipProvider({
   }, [leaveRoom, stopMicrophone]);
 
   const resetCall = useCallback(async () => {
-    clearRingTimeout();
     await handleLeaveRoom();
     setCurrentCall(null);
     setStatus('available');
-  }, [clearRingTimeout, handleLeaveRoom]);
+  }, [handleLeaveRoom]);
 
   useEffect(() => {
-    if (
-      status === 'connecting' &&
-      currentCallRef.current?.direction === 'outgoing' &&
-      remotePeers.length > 0
-    ) {
-      clearRingTimeout();
+    if (status === 'connecting' && remotePeers.length > 0) {
       setCurrentCall((prev) =>
         prev ? { ...prev, startedAt: Date.now() } : prev,
       );
       setStatus('active');
     }
-  }, [remotePeers.length, status, clearRingTimeout]);
+  }, [remotePeers.length, status]);
 
   const startCall = useCallback(
     async (to: string, roomName: string) => {
-      await requestCall({ to, roomName });
+      await requestCall({ to, roomName, isVideo });
 
       setCurrentCall({
         roomName,
-        remoteName: to,
-        direction: 'outgoing',
+        displayName: to,
+        isVideo,
         startedAt: null,
       });
       setStatus('connecting');
 
-      await startCallKitSession({ displayName: to, isVideo: false });
+      await startCallKitSession({ displayName: to, isVideo });
       await handleJoinRoom(roomName);
-
-      if (ringTimeoutMs != null) {
-        clearRingTimeout();
-        ringTimeoutRef.current = setTimeout(() => {
-          ringTimeoutRef.current = null;
-          resetCall();
-        }, ringTimeoutMs);
-      }
     },
-    [
-      requestCall,
-      handleJoinRoom,
-      startCallKitSession,
-      clearRingTimeout,
-      ringTimeoutMs,
-      resetCall,
-    ],
+    [requestCall, handleJoinRoom, startCallKitSession, isVideo],
   );
 
   const answerCall = useCallback(async () => {
-    const call = currentCallRef.current;
-    if (!call) return;
+    if (!currentCall) return;
 
     setStatus('connecting');
     try {
-      await handleJoinRoom(call.roomName);
+      await handleJoinRoom(currentCall.roomName);
       setCurrentCall((prev) =>
         prev ? { ...prev, startedAt: Date.now() } : prev,
       );
@@ -141,7 +110,7 @@ export function VoipProvider({
       console.error('Failed to join room on answer:', err);
       await resetCall();
     }
-  }, [handleJoinRoom, resetCall]);
+  }, [handleJoinRoom, resetCall, currentCall]);
 
   const rejectCall = useCallback(async () => {
     await endCallKitSession();
@@ -149,12 +118,11 @@ export function VoipProvider({
   }, [endCallKitSession, resetCall]);
 
   const endCall = useCallback(async () => {
-    clearRingTimeout();
     await endCallKitSession();
     await handleLeaveRoom();
     setCurrentCall(null);
     setStatus('available');
-  }, [clearRingTimeout, handleLeaveRoom, endCallKitSession]);
+  }, [handleLeaveRoom, endCallKitSession]);
 
   useVoIPEvents({
     onRegistered: useCallback((token: string) => {
@@ -164,8 +132,8 @@ export function VoipProvider({
     onIncoming: useCallback((payload: VoipIncomingPayload) => {
       setCurrentCall({
         roomName: payload.roomName,
-        remoteName: payload.displayName,
-        direction: 'incoming',
+        displayName: payload.displayName,
+        isVideo: payload.isVideo,
         startedAt: null,
       });
       setStatus('incoming');

From 3bdffa5653db4dd8ff49a1f5c18fcec308fd82fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Fri, 26 Jun 2026 19:42:05 +0200
Subject: [PATCH 07/19] Make backend work with APNs certificate

---
 .../mobile-client/voip-call/server/.gitignore |   1 +
 .../mobile-client/voip-call/server/README.md  |  46 +++----
 .../mobile-client/voip-call/server/deno.json  |   2 +-
 .../mobile-client/voip-call/server/main.ts    | 126 +++---------------
 4 files changed, 39 insertions(+), 136 deletions(-)

diff --git a/examples/mobile-client/voip-call/server/.gitignore b/examples/mobile-client/voip-call/server/.gitignore
index 4cc5ada2..d04f5908 100644
--- a/examples/mobile-client/voip-call/server/.gitignore
+++ b/examples/mobile-client/voip-call/server/.gitignore
@@ -1 +1,2 @@
 voip.db
+apns.pem
\ No newline at end of file
diff --git a/examples/mobile-client/voip-call/server/README.md b/examples/mobile-client/voip-call/server/README.md
index c6f0719d..f735face 100644
--- a/examples/mobile-client/voip-call/server/README.md
+++ b/examples/mobile-client/voip-call/server/README.md
@@ -6,38 +6,28 @@
 deno task start   # listens on :4400
 ```
 
-## Environment variables
+## APNs certificate
 
-| Variable        | Required | Description                                                      |
-|-----------------|----------|------------------------------------------------------------------|
-| `APNS_KEY_ID`   | yes      | 10-char key ID from the Apple Developer portal (.p8 key)        |
-| `APNS_TEAM_ID`  | yes      | 10-char Team ID from the Apple Developer portal                 |
-| `APNS_BUNDLE_ID`| yes      | App bundle identifier, e.g. `com.example.voipcall`              |
-| `APNS_KEY_PATH` | yes      | Filesystem path to the APNs `.p8` private key file             |
-| `APNS_ENV`      | no       | `development` (default) or `production`                         |
+APNs auth is certificate-based — you need a **VoIP Services certificate** from your
+Apple Developer account. See Apple's guide:
+[Establishing a certificate-based connection to APNs](https://developer.apple.com/documentation/usernotifications/establishing-a-certificate-based-connection-to-apns).
 
-Create a `.env` file in this directory (or export the variables before running):
+Drop the VoIP push certificate **and its private key, combined into one PEM**, at
+`./apns.pem` — it's presented to APNs as a TLS client certificate. The bundle id and
+sandbox host are set at the top of `main.ts`.
 
 ```bash
-export APNS_KEY_ID=XXXXXXXXXX
-export APNS_TEAM_ID=XXXXXXXXXX
-export APNS_BUNDLE_ID=com.example.voipcall
-export APNS_KEY_PATH=./AuthKey_XXXXXXXXXX.p8
-export APNS_ENV=development
-
-deno task start
+# combine an exported cert + key into one PEM
+cat cert.pem key.pem > apns.pem
 ```
 
 ## API
 
-| Method | Path                  | Body / Query                | Description                              |
-|--------|-----------------------|-----------------------------|------------------------------------------|
-| POST   | `/register`           | `{ username, voipToken }`   | Register / update device VoIP push token |
-| GET    | `/users?exclude=<me>` |                             | List all registered users except `me`    |
-| POST   | `/call`               | `{ from, to }`              | Initiate a call; sends VoIP push to callee; returns `{ callId, roomName }` |
-| GET    | `/call/:id`           |                             | Poll call status (`ringing / answered / ended / cancelled`) |
-| POST   | `/call/:id/answer`    |                             | Mark call as answered (called by callee) |
-| POST   | `/cancel`             | `{ callId }`                | Cancel / hang up a call                  |
+| Method | Path                  | Body / Query                      | Description                              |
+|--------|-----------------------|-----------------------------------|------------------------------------------|
+| POST   | `/register`           | `{ username, voipToken }`         | Register / update device VoIP push token |
+| GET    | `/users?exclude=<me>` |                                   | List all registered users except `me`    |
+| POST   | `/call`               | `{ from, to, roomName, isVideo }` | Send a VoIP push to the callee           |
 
 ## APNs VoIP push payload
 
@@ -45,11 +35,9 @@ The push payload forwarded to the callee's device:
 
 ```json
 {
-  "aps": {},
-  "roomId": "<roomName>",
-  "username": "<callerUsername>",
-  "callId": "<callId>",
-  "displayName": "<callerUsername>"
+  "roomName": "<roomName>",
+  "displayName": "<callerUsername>",
+  "isVideo": false
 }
 ```
 
diff --git a/examples/mobile-client/voip-call/server/deno.json b/examples/mobile-client/voip-call/server/deno.json
index 71e276a8..3e96824b 100644
--- a/examples/mobile-client/voip-call/server/deno.json
+++ b/examples/mobile-client/voip-call/server/deno.json
@@ -1,6 +1,6 @@
 {
   "tasks": {
-    "start": "deno run --allow-net --allow-read --allow-env main.ts"
+    "start": "deno run --allow-net --allow-read --allow-env --allow-ffi main.ts"
   },
   "imports": {
     "@db/sqlite": "jsr:@db/sqlite@^0.12"
diff --git a/examples/mobile-client/voip-call/server/main.ts b/examples/mobile-client/voip-call/server/main.ts
index 1722b10c..5b93cac1 100644
--- a/examples/mobile-client/voip-call/server/main.ts
+++ b/examples/mobile-client/voip-call/server/main.ts
@@ -11,124 +11,37 @@ db.exec(`
   )
 `);
 
-// --- APNs VoIP push ---
-
-const APNS_KEY_ID = Deno.env.get("APNS_KEY_ID") ?? "";
-const APNS_TEAM_ID = Deno.env.get("APNS_TEAM_ID") ?? "";
-const APNS_BUNDLE_ID = Deno.env.get("APNS_BUNDLE_ID") ?? "";
-const APNS_KEY_PATH = Deno.env.get("APNS_KEY_PATH") ?? "";
-const APNS_ENV = Deno.env.get("APNS_ENV") ?? "development"; // 'production' | 'development'
-
-let cachedApnsJwt: { token: string; issuedAt: number } | null = null;
-
-async function loadP8Key(): Promise<CryptoKey> {
-  const raw = await Deno.readTextFile(APNS_KEY_PATH);
-  const pem = raw
-    .replace(/-----BEGIN PRIVATE KEY-----/, "")
-    .replace(/-----END PRIVATE KEY-----/, "")
-    .replace(/\s+/g, "");
-  const der = Uint8Array.from(atob(pem), (c) => c.charCodeAt(0));
-  return crypto.subtle.importKey(
-    "pkcs8",
-    der,
-    { name: "ECDSA", namedCurve: "P-256" },
-    false,
-    ["sign"],
-  );
-}
-
-function base64UrlEncode(bytes: Uint8Array): string {
-  return btoa(String.fromCharCode(...bytes))
-    .replace(/\+/g, "-")
-    .replace(/\//g, "_")
-    .replace(/=+$/, "");
-}
+// --- APNs VoIP push (certificate-based) ---
 
-async function getApnsJwt(): Promise<string> {
-  const now = Math.floor(Date.now() / 1000);
-  // Reuse token for up to 55 minutes (APNs allows 60 min, drift buffer)
-  if (cachedApnsJwt && now - cachedApnsJwt.issuedAt < 55 * 60) {
-    return cachedApnsJwt.token;
-  }
+const BUNDLE_ID = "io.fishjam.example.voipcall";
+const APNS_HOST = "api.development.push.apple.com";
 
-  const key = await loadP8Key();
-  const header = base64UrlEncode(
-    new TextEncoder().encode(
-      JSON.stringify({ alg: "ES256", kid: APNS_KEY_ID }),
-    ),
-  );
-  const payload = base64UrlEncode(
-    new TextEncoder().encode(JSON.stringify({ iss: APNS_TEAM_ID, iat: now })),
-  );
-  const sigInput = new TextEncoder().encode(`${header}.${payload}`);
-  const sigDer = await crypto.subtle.sign(
-    { name: "ECDSA", hash: "SHA-256" },
-    key,
-    sigInput,
-  );
-
-  // DER → raw (r || s, 64 bytes) for APNs
-  const der = new Uint8Array(sigDer);
-  let offset = 2;
-  const rLen = der[offset + 1];
-  offset += 2;
-  const r = der.slice(offset + (rLen > 32 ? 1 : 0), offset + rLen);
-  offset += rLen;
-  const sLen = der[offset + 1];
-  offset += 2;
-  const s = der.slice(offset + (sLen > 32 ? 1 : 0), offset + sLen);
-
-  const rawSig = new Uint8Array(64);
-  rawSig.set(r, 32 - r.length);
-  rawSig.set(s, 64 - s.length);
-
-  const token = `${header}.${payload}.${base64UrlEncode(rawSig)}`;
-  cachedApnsJwt = { token, issuedAt: now };
-  return token;
-}
+const apnsPem = await Deno.readTextFile("./apns.pem");
+const apnsClient = Deno.createHttpClient({ cert: apnsPem, key: apnsPem });
 
 async function sendVoipPush(params: {
   voipToken: string;
-  roomId: string;
-  callerUsername: string;
+  roomName: string;
   displayName: string;
+  isVideo: boolean;
 }): Promise<void> {
-  if (!APNS_KEY_PATH || !APNS_KEY_ID || !APNS_TEAM_ID || !APNS_BUNDLE_ID) {
-    console.warn(
-      "APNs not configured — skipping push (set APNS_KEY_ID, APNS_TEAM_ID, APNS_BUNDLE_ID, APNS_KEY_PATH)",
-    );
-    return;
-  }
-
-  const host =
-    APNS_ENV === "production"
-      ? "api.push.apple.com"
-      : "api.development.push.apple.com";
-
-  const jwt = await getApnsJwt();
-  const url = `https://${host}/3/device/${params.voipToken}`;
-
-  const body = JSON.stringify({
-    aps: {},
-    roomId: params.roomId,
-    username: params.callerUsername,
-    displayName: params.displayName,
-  });
-
-  const res = await fetch(url, {
+  const res = await fetch(`https://${APNS_HOST}/3/device/${params.voipToken}`, {
+    client: apnsClient,
     method: "POST",
     headers: {
-      authorization: `bearer ${jwt}`,
       "apns-push-type": "voip",
-      "apns-topic": `${APNS_BUNDLE_ID}.voip`,
+      "apns-topic": `${BUNDLE_ID}.voip`,
       "content-type": "application/json",
     },
-    body,
+    body: JSON.stringify({
+      roomName: params.roomName,
+      displayName: params.displayName,
+      isVideo: params.isVideo,
+    }),
   });
 
   if (!res.ok) {
-    const text = await res.text();
-    console.error(`APNs push failed ${res.status}:`, text);
+    console.error(`APNs push failed ${res.status}:`, await res.text());
   }
 }
 
@@ -171,10 +84,11 @@ Deno.serve({ port: 4400 }, async (req) => {
 
   // POST /call  { from, to, roomName }
   if (req.method === "POST" && url.pathname === "/call") {
-    const { from, to, roomName } = (await req.json()) as {
+    const { from, to, roomName, isVideo } = (await req.json()) as {
       from: string;
       to: string;
       roomName: string;
+      isVideo: boolean;
     };
     if (!from || !to || !roomName)
       return json({ error: "from, to and roomName are required" }, 400);
@@ -188,9 +102,9 @@ Deno.serve({ port: 4400 }, async (req) => {
 
     await sendVoipPush({
       voipToken,
-      roomId: roomName,
-      callerUsername: from,
+      roomName: roomName,
       displayName: from,
+      isVideo: isVideo,
     });
 
     return json({ ok: true });

From c0ad62f57115a61af10bc44659f6a67c28651c4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Fri, 26 Jun 2026 19:42:18 +0200
Subject: [PATCH 08/19] Add docs

---
 examples/mobile-client/voip-call/app/App.tsx  |  2 +-
 .../voip-call/app/src/voip/VoipContext.ts     | 32 +++++++++++++++++++
 .../voip-call/app/src/voip/VoipProvider.tsx   | 20 ++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/examples/mobile-client/voip-call/app/App.tsx b/examples/mobile-client/voip-call/app/App.tsx
index a55bfb42..4bfba2d6 100644
--- a/examples/mobile-client/voip-call/app/App.tsx
+++ b/examples/mobile-client/voip-call/app/App.tsx
@@ -55,7 +55,7 @@ function VoipWrapper({ children }: PropsWithChildren) {
     <VoipProvider
       getPeerToken={getPeerToken}
       requestCall={requestCall}
-      ringTimeoutMs={10_000}>
+      isVideo={true}>
       <DeviceRegistration />
       {children}
     </VoipProvider>
diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts b/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
index ecff1725..a91cef29 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
@@ -1,26 +1,58 @@
 import { createContext, useContext } from 'react';
 
+/**
+ * Lifecycle state of the current VoIP call.
+ *
+ * - `available` — no call in progress
+ * - `incoming` — a call is ringing, awaiting the user's answer
+ * - `connecting` — the call was started/answered and we're joining the room
+ * - `active` — media is connected and the call is in progress
+ */
 export type VoipCallStatus = 'available' | 'incoming' | 'connecting' | 'active';
 
+/**
+ * Details of the call currently being handled.
+ */
 export type CurrentCall = {
+  /** Fishjam room the call takes place in. */
   roomName: string;
+  /** Name shown in the CallKit UI (the remote party). */
   displayName: string;
+  /** Whether the call is a video call. */
   isVideo: boolean;
+  /** Timestamp (ms) when the call became `active`, or `null` if not yet connected. */
   startedAt: number | null;
 };
 
+/**
+ * Value held by {@link VoipContext} and returned from {@link useVoip}.
+ */
 export type VoipContextValue = {
+  /** Current call lifecycle status. */
   status: VoipCallStatus;
+  /** This device's VoIP push token, or `null` until APNs has issued one. */
   voipToken: string | null;
+  /** The call currently being handled, or `null` when `status` is `available`. */
   currentCall: CurrentCall | null;
+  /**
+   * Starts an outgoing call to `to` in the given `roomName` — reports it to
+   * CallKit and joins the room.
+   */
   startCall: (to: string, roomName: string) => Promise<void>;
+  /** Answers the current incoming call and joins its room. */
   answerCall: () => Promise<void>;
+  /** Rejects the current incoming call without joining. */
   rejectCall: () => Promise<void>;
+  /** Ends the active call and leaves the room. */
   endCall: () => Promise<void>;
 };
 
 export const VoipContext = createContext<VoipContextValue | null>(null);
 
+/**
+ * Returns the current {@link VoipContextValue}.
+ * Must be used within a {@link VoipProvider}.
+ */
 export function useVoip(): VoipContextValue {
   const ctx = useContext(VoipContext);
   if (!ctx) throw new Error('useVoip must be used within VoipProvider');
diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
index 868a82e5..27f4b00b 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
@@ -21,15 +21,35 @@ import {
 } from './VoipContext';
 
 type VoipProviderProps = PropsWithChildren & {
+  /**
+   * Returns a Fishjam peer token for the given room. Invoked when joining a room
+   * on call start/answer. It should wrap a method that calls your backend to get the peer token for a given room.
+   * Make sure to pass the correct params when obtaining the peer token, such as the room name, the peer name, and the room type.
+   */
   getPeerToken: (roomName: string) => Promise<string>;
+  /**
+   * Asks your signaling backend to ring `to` in `roomName`. Invoked when starting
+   * an outgoing call, before joining the room.
+   */
   requestCall: (params: {
     to: string;
     roomName: string;
     isVideo: boolean;
   }) => Promise<void>;
+  /**
+   * Whether outgoing calls are video calls — reflected in the CallKit session.
+   * Make sure the underlying room type is set accordingly. Defaults to `false` (audio-only).
+   */
   isVideo?: boolean;
 };
 
+/**
+ * Tracks the current VoIP call state (driven by {@link useVoIPEvents}) and drives
+ * the Fishjam connection — joining the room on answer, leaving it on end. Exposes
+ * the call state and controls through {@link useVoip}.
+ *
+ * Render it inside a `FishjamProvider` so it can reach the Fishjam connection.
+ */
 export function VoipProvider({
   getPeerToken,
   requestCall,

From 8ddb43173236d1852a9d70960def37e573d9da5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Fri, 26 Jun 2026 19:57:05 +0200
Subject: [PATCH 09/19] Add persistent logging/logout

---
 examples/mobile-client/voip-call/app/App.tsx  | 10 ++++-
 .../mobile-client/voip-call/app/package.json  |  1 +
 .../app/src/screens/DirectoryScreen.tsx       | 25 ++++++++++--
 .../voip-call/app/src/user/UserContext.ts     |  2 +
 .../voip-call/app/src/user/UserProvider.tsx   | 39 +++++++++++++++++--
 yarn.lock                                     | 20 ++++++++++
 6 files changed, 90 insertions(+), 7 deletions(-)

diff --git a/examples/mobile-client/voip-call/app/App.tsx b/examples/mobile-client/voip-call/app/App.tsx
index 4bfba2d6..0d324c35 100644
--- a/examples/mobile-client/voip-call/app/App.tsx
+++ b/examples/mobile-client/voip-call/app/App.tsx
@@ -79,9 +79,17 @@ function DeviceRegistration() {
 }
 
 function AppScreens() {
-  const { username } = useUser();
+  const { username, isLoading } = useUser();
   const { status, currentCall } = useVoip();
 
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" color="#6366f1" />
+      </View>
+    );
+  }
+
   if (!username) {
     return <LoginScreen />;
   }
diff --git a/examples/mobile-client/voip-call/app/package.json b/examples/mobile-client/voip-call/app/package.json
index f212ab80..beb18f24 100644
--- a/examples/mobile-client/voip-call/app/package.json
+++ b/examples/mobile-client/voip-call/app/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fishjam-cloud/react-native-client": "workspace:*",
+    "@react-native-async-storage/async-storage": "^3.1.1",
     "expo": "~54.0.30",
     "expo-status-bar": "~3.0.9",
     "react": "19.1.0",
diff --git a/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
index 724f73af..f435e0a3 100644
--- a/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
@@ -19,7 +19,7 @@ function makeRoomName() {
 }
 
 export function DirectoryScreen() {
-  const { username, users, refreshUsers } = useUser();
+  const { username, users, refreshUsers, logout } = useUser();
   const { status, startCall } = useVoip();
   const isCalling = status === 'connecting' || status === 'active';
 
@@ -38,7 +38,14 @@ export function DirectoryScreen() {
   return (
     <View style={styles.container}>
       <View style={styles.header}>
-        <Text style={styles.title}>Directory</Text>
+        <View style={styles.headerRow}>
+          <Text style={styles.title}>Directory</Text>
+          <TouchableOpacity
+            style={styles.logoutButton}
+            onPress={() => logout()}>
+            <Text style={styles.logoutText}>Log out</Text>
+          </TouchableOpacity>
+        </View>
         <Text style={styles.me}>Signed in as {username}</Text>
       </View>
       <FlatList
@@ -87,7 +94,19 @@ const styles = StyleSheet.create({
   },
   title: { fontSize: 28, fontWeight: '700', color: '#111827' },
   me: { fontSize: 14, color: '#6b7280', marginTop: 2 },
-  list: { padding: 16, gap: 8 },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  logoutButton: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    backgroundColor: '#f3f4f6',
+  },
+  logoutText: { fontSize: 14, fontWeight: '600', color: '#ef4444' },
+  list: { padding: 16, gap: 8, flex: 1 },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/examples/mobile-client/voip-call/app/src/user/UserContext.ts b/examples/mobile-client/voip-call/app/src/user/UserContext.ts
index 88ef90bb..ed5f06a3 100644
--- a/examples/mobile-client/voip-call/app/src/user/UserContext.ts
+++ b/examples/mobile-client/voip-call/app/src/user/UserContext.ts
@@ -3,8 +3,10 @@ import { createContext, useContext } from 'react';
 export type UserContextValue = {
   username: string | null;
   users: string[];
+  isLoading: boolean;
   register: (name: string) => Promise<void>;
   refreshUsers: () => Promise<void>;
+  logout: () => Promise<void>;
 };
 
 export const UserContext = createContext<UserContextValue | null>(null);
diff --git a/examples/mobile-client/voip-call/app/src/user/UserProvider.tsx b/examples/mobile-client/voip-call/app/src/user/UserProvider.tsx
index 41f9a4ca..b0cac996 100644
--- a/examples/mobile-client/voip-call/app/src/user/UserProvider.tsx
+++ b/examples/mobile-client/voip-call/app/src/user/UserProvider.tsx
@@ -1,12 +1,23 @@
-import React, { type PropsWithChildren, useCallback, useMemo, useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, {
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { UserContext } from './UserContext';
 
 const SERVER_URL = process.env.EXPO_PUBLIC_VOIP_SERVER_URL ?? 'http://localhost:4400';
+const USERNAME_STORAGE_KEY = 'voip.username';
 
 export function UserProvider({ children }: PropsWithChildren) {
   const [username, setUsername] = useState<string | null>(null);
   const [users, setUsers] = useState<string[]>([]);
+  // `true` while we read the persisted session on startup, so the UI can avoid
+  // flashing the login screen before a saved username is restored.
+  const [isLoading, setIsLoading] = useState(true);
 
   const fetchUsers = useCallback(async (exclude: string) => {
     try {
@@ -22,6 +33,7 @@ export function UserProvider({ children }: PropsWithChildren) {
   const register = useCallback(
     async (name: string) => {
       setUsername(name);
+      await AsyncStorage.setItem(USERNAME_STORAGE_KEY, name);
       await fetchUsers(name);
     },
     [fetchUsers],
@@ -31,9 +43,30 @@ export function UserProvider({ children }: PropsWithChildren) {
     if (username) await fetchUsers(username);
   }, [username, fetchUsers]);
 
+  const logout = useCallback(async () => {
+    setUsername(null);
+    setUsers([]);
+    await AsyncStorage.removeItem(USERNAME_STORAGE_KEY);
+  }, []);
+
+  // Restore the persisted session on startup so a reload keeps the user logged in.
+  useEffect(() => {
+    (async () => {
+      try {
+        const saved = await AsyncStorage.getItem(USERNAME_STORAGE_KEY);
+        if (saved) {
+          setUsername(saved);
+          await fetchUsers(saved);
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    })();
+  }, [fetchUsers]);
+
   const value = useMemo(
-    () => ({ username, users, register, refreshUsers }),
-    [username, users, register, refreshUsers],
+    () => ({ username, users, isLoading, register, refreshUsers, logout }),
+    [username, users, isLoading, register, refreshUsers, logout],
   );
 
   return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
diff --git a/yarn.lock b/yarn.lock
index ed52b667..5b7f1907 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5188,6 +5188,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-async-storage/async-storage@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@react-native-async-storage/async-storage@npm:3.1.1"
+  dependencies:
+    idb: "npm:8.0.3"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/20d34973b0a4d1acc133556c52daa59b9826f676abdc351f12c70feb4d557b66e279d1c880662bbfe037b7d79bf64fdee759a5217781c47cd20fd8ba0e0e1b24
+  languageName: node
+  linkType: hard
+
 "@react-native/assets-registry@npm:0.81.5":
   version: 0.81.5
   resolution: "@react-native/assets-registry@npm:0.81.5"
@@ -12222,6 +12234,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"idb@npm:8.0.3":
+  version: 8.0.3
+  resolution: "idb@npm:8.0.3"
+  checksum: 10c0/421cd9a3281b7564528857031cc33fd9e95753f8191e483054cb25d1ceea7303a0d1462f4f69f5b41606f0f066156999e067478abf2460dfcf9cab80dae2a2b2
+  languageName: node
+  linkType: hard
+
 "ieee754@npm:^1.1.13, ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
@@ -18925,6 +18944,7 @@ __metadata:
   resolution: "voip-call@workspace:examples/mobile-client/voip-call/app"
   dependencies:
     "@fishjam-cloud/react-native-client": "workspace:*"
+    "@react-native-async-storage/async-storage": "npm:^3.1.1"
     "@types/react": "npm:~19.1.0"
     eslint-config-expo: "npm:~8.0.1"
     expo: "npm:~54.0.30"

From b0ffd0d49ea54d61b03d046ff400d1f626994842 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Fri, 26 Jun 2026 20:31:57 +0200
Subject: [PATCH 10/19] Make screens be more consistent with fishjamchat
 example

---
 examples/mobile-client/voip-call/app/App.tsx  |  25 +-
 examples/mobile-client/voip-call/app/app.json |   1 +
 .../voip-call/app/src/callkit/index.ts        |   2 -
 .../voip-call/app/src/callkit/useCallKit.ts   |  23 --
 .../voip-call/app/src/components/Avatar.tsx   |  40 +++
 .../app/src/components/InCallButton.tsx       |  61 ++++
 .../app/src/components/VideoCallView.tsx      |  92 ++++++
 .../voip-call/app/src/components/index.ts     |   3 +
 .../app/src/screens/DirectoryScreen.tsx       |  88 ++---
 .../app/src/screens/InCallScreen.tsx          | 310 +++++++++---------
 .../voip-call/app/src/screens/LoginScreen.tsx | 141 ++++----
 .../app/src/screens/OutgoingCallScreen.tsx    |  78 ++---
 .../voip-call/app/src/theme/colors.ts         |  27 ++
 13 files changed, 549 insertions(+), 342 deletions(-)
 delete mode 100644 examples/mobile-client/voip-call/app/src/callkit/index.ts
 delete mode 100644 examples/mobile-client/voip-call/app/src/callkit/useCallKit.ts
 create mode 100644 examples/mobile-client/voip-call/app/src/components/Avatar.tsx
 create mode 100644 examples/mobile-client/voip-call/app/src/components/InCallButton.tsx
 create mode 100644 examples/mobile-client/voip-call/app/src/components/VideoCallView.tsx
 create mode 100644 examples/mobile-client/voip-call/app/src/components/index.ts
 create mode 100644 examples/mobile-client/voip-call/app/src/theme/colors.ts

diff --git a/examples/mobile-client/voip-call/app/App.tsx b/examples/mobile-client/voip-call/app/App.tsx
index 0d324c35..acd0936d 100644
--- a/examples/mobile-client/voip-call/app/App.tsx
+++ b/examples/mobile-client/voip-call/app/App.tsx
@@ -5,7 +5,7 @@ import {
 import { StatusBar } from 'expo-status-bar';
 import { useCallback, useEffect } from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import type { PropsWithChildren } from 'react';
 import { DirectoryScreen } from './src/screens/DirectoryScreen';
@@ -13,6 +13,7 @@ import { InCallScreen } from './src/screens/InCallScreen';
 import { LoginScreen } from './src/screens/LoginScreen';
 import { OutgoingCallScreen } from './src/screens/OutgoingCallScreen';
 import { UserProvider, useUser } from './src/user';
+import { BrandColors } from './src/theme/colors';
 import { VoipProvider, useVoip } from './src/voip';
 
 const SERVER_URL =
@@ -80,12 +81,12 @@ function DeviceRegistration() {
 
 function AppScreens() {
   const { username, isLoading } = useUser();
-  const { status, currentCall } = useVoip();
+  const { status } = useVoip();
 
   if (isLoading) {
     return (
       <View style={styles.center}>
-        <ActivityIndicator size="large" color="#6366f1" />
+        <ActivityIndicator size="large" color={BrandColors.darkBlue80} />
       </View>
     );
   }
@@ -96,11 +97,6 @@ function AppScreens() {
 
   if (status === 'connecting') {
     return <OutgoingCallScreen />;
-    return (
-      <View style={styles.center}>
-        <ActivityIndicator size="large" color="#6366f1" />
-      </View>
-    );
   }
 
   if (status === 'active') {
@@ -117,10 +113,10 @@ const App = () => (
     <SafeAreaProvider>
       <UserProvider>
         <VoipWrapper>
-          <SafeAreaView style={styles.safeArea}>
+          <View style={styles.root}>
             <StatusBar style="auto" />
             <AppScreens />
-          </SafeAreaView>
+          </View>
         </VoipWrapper>
       </UserProvider>
     </SafeAreaProvider>
@@ -130,6 +126,11 @@ const App = () => (
 export default App;
 
 const styles = StyleSheet.create({
-  safeArea: { flex: 1, backgroundColor: '#fff' },
-  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  root: { flex: 1, backgroundColor: BrandColors.seaBlue20 },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: BrandColors.seaBlue20,
+  },
 });
diff --git a/examples/mobile-client/voip-call/app/app.json b/examples/mobile-client/voip-call/app/app.json
index 622da1dd..a0331d0f 100644
--- a/examples/mobile-client/voip-call/app/app.json
+++ b/examples/mobile-client/voip-call/app/app.json
@@ -11,6 +11,7 @@
       "bundleIdentifier": "io.fishjam.example.voipcall",
       "infoPlist": {
         "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to access your microphone.",
+        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to access your camera for video calls.",
         "ITSAppUsesNonExemptEncryption": false
       },
       "appleTeamId": "J5FM626PE2"
diff --git a/examples/mobile-client/voip-call/app/src/callkit/index.ts b/examples/mobile-client/voip-call/app/src/callkit/index.ts
deleted file mode 100644
index 7540075e..00000000
--- a/examples/mobile-client/voip-call/app/src/callkit/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { useCallKitEvent } from './useCallKit';
-export type { ExtendedCallKitAction, VoipIncomingPayload } from './useCallKit';
diff --git a/examples/mobile-client/voip-call/app/src/callkit/useCallKit.ts b/examples/mobile-client/voip-call/app/src/callkit/useCallKit.ts
deleted file mode 100644
index 326be891..00000000
--- a/examples/mobile-client/voip-call/app/src/callkit/useCallKit.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-  type CallKitAction,
-  useCallKitEvent as useCallKitEventSdk,
-} from '@fishjam-cloud/react-native-client';
-
-export type VoipIncomingPayload = { roomId: string; username: string };
-
-/**
- * Just the temporary example to demostrate how the new api should look like
- */
-export type ExtendedCallKitAction = CallKitAction & {
-  incoming?: VoipIncomingPayload;
-  answer?: undefined;
-  end?: undefined;
-  registered?: string; // device id / VoIP push token
-};
-
-export const useCallKitEvent = useCallKitEventSdk as <
-  T extends keyof ExtendedCallKitAction,
->(
-  action: T,
-  callback: (event: ExtendedCallKitAction[T]) => void,
-) => {};
diff --git a/examples/mobile-client/voip-call/app/src/components/Avatar.tsx b/examples/mobile-client/voip-call/app/src/components/Avatar.tsx
new file mode 100644
index 00000000..ccdcbadb
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/components/Avatar.tsx
@@ -0,0 +1,40 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { BrandColors, TextColors } from '../theme/colors';
+
+type AvatarProps = {
+  name: string;
+  size?: number;
+  speaking?: boolean;
+};
+
+export function Avatar({ name, size = 96, speaking = false }: AvatarProps) {
+  const initial = name.trim()[0]?.toUpperCase() ?? '?';
+  return (
+    <View
+      style={[
+        styles.avatar,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: speaking ? 3 : 0,
+        },
+      ]}>
+      <Text style={[styles.text, { fontSize: size * 0.4 }]}>{initial}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  avatar: {
+    backgroundColor: BrandColors.darkBlue60,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: BrandColors.seaBlue80,
+  },
+  text: {
+    color: TextColors.white,
+    fontWeight: '700',
+  },
+});
diff --git a/examples/mobile-client/voip-call/app/src/components/InCallButton.tsx b/examples/mobile-client/voip-call/app/src/components/InCallButton.tsx
new file mode 100644
index 00000000..5082c888
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/components/InCallButton.tsx
@@ -0,0 +1,61 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import {
+  type GestureResponderEvent,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+
+import { AdditionalColors, BrandColors } from '../theme/colors';
+
+type InCallButtonType = 'primary' | 'disconnect';
+
+type InCallButtonProps = {
+  type?: InCallButtonType;
+  active?: boolean;
+  onPress: (event: GestureResponderEvent) => void;
+  iconName: keyof typeof MaterialCommunityIcons.glyphMap;
+  accessibilityLabel?: string;
+};
+
+export function InCallButton({
+  type = 'primary',
+  active = false,
+  onPress,
+  iconName,
+  accessibilityLabel,
+}: InCallButtonProps) {
+  const isDisconnect = type === 'disconnect';
+  const filled = isDisconnect || active;
+
+  const backgroundColor = isDisconnect
+    ? AdditionalColors.red80
+    : active
+      ? BrandColors.darkBlue100
+      : AdditionalColors.white;
+
+  const iconColor = filled ? AdditionalColors.white : BrandColors.darkBlue100;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.8}
+      accessibilityLabel={accessibilityLabel}
+      style={[styles.button, { backgroundColor }, !filled && styles.outline]}>
+      <MaterialCommunityIcons name={iconName} size={28} color={iconColor} />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  outline: {
+    borderWidth: 1,
+    borderColor: BrandColors.darkBlue80,
+  },
+});
diff --git a/examples/mobile-client/voip-call/app/src/components/VideoCallView.tsx b/examples/mobile-client/voip-call/app/src/components/VideoCallView.tsx
new file mode 100644
index 00000000..08e790b9
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/components/VideoCallView.tsx
@@ -0,0 +1,92 @@
+import {
+  RTCView,
+  type Track,
+  usePeers,
+} from '@fishjam-cloud/react-native-client';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { BrandColors } from '../theme/colors';
+import { Avatar } from './Avatar';
+
+type PeerMeta = { displayName?: string };
+
+function streamOf(track: Track | null | undefined) {
+  return track?.stream && !track?.metadata?.paused ? track.stream : null;
+}
+
+type VideoCallViewProps = {
+  remoteName: string;
+  localName: string;
+};
+
+export function VideoCallView({ remoteName, localName }: VideoCallViewProps) {
+  const insets = useSafeAreaInsets();
+  const { localPeer, remotePeers } = usePeers<PeerMeta>();
+
+  const primaryRemote = remotePeers[0];
+  const remoteStream = streamOf(primaryRemote?.cameraTrack);
+  const remoteDisplay =
+    primaryRemote?.metadata?.peer?.displayName ?? remoteName;
+  const localStream = streamOf(localPeer?.cameraTrack);
+
+  return (
+    <View style={styles.container}>
+      {remoteStream ? (
+        <RTCView
+          mediaStream={remoteStream}
+          objectFit="cover"
+          style={styles.remoteVideo}
+        />
+      ) : (
+        <View style={styles.remoteNoVideo}>
+          <Avatar name={remoteDisplay} size={132} />
+        </View>
+      )}
+
+      <View style={[styles.pip, { top: insets.top + 12 }]}>
+        {localStream ? (
+          <RTCView
+            mediaStream={localStream}
+            objectFit="cover"
+            style={styles.pipVideo}
+            mirror
+          />
+        ) : (
+          <View style={styles.pipNoVideo}>
+            <Avatar name={localName} size={44} />
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: BrandColors.darkBlue100 },
+  remoteVideo: { flex: 1 },
+  remoteNoVideo: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: BrandColors.darkBlue60,
+  },
+  pip: {
+    position: 'absolute',
+    right: 16,
+    width: 108,
+    height: 156,
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: BrandColors.seaBlue60,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.6)',
+    shadowColor: '#000',
+    shadowOpacity: 0.25,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 6,
+  },
+  pipVideo: { flex: 1 },
+  pipNoVideo: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
diff --git a/examples/mobile-client/voip-call/app/src/components/index.ts b/examples/mobile-client/voip-call/app/src/components/index.ts
new file mode 100644
index 00000000..d7e1cba0
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/components/index.ts
@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export { InCallButton } from './InCallButton';
+export { VideoCallView } from './VideoCallView';
diff --git a/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
index f435e0a3..aff98cd8 100644
--- a/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
@@ -1,3 +1,4 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useEffect } from 'react';
 import {
   ActivityIndicator,
@@ -8,7 +9,10 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { Avatar } from '../components';
+import { AdditionalColors, BrandColors, TextColors } from '../theme/colors';
 import { useUser } from '../user';
 import { useVoip } from '../voip';
 
@@ -36,27 +40,43 @@ export function DirectoryScreen() {
   };
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['top']}>
       <View style={styles.header}>
         <View style={styles.headerRow}>
           <Text style={styles.title}>Directory</Text>
           <TouchableOpacity
             style={styles.logoutButton}
-            onPress={() => logout()}>
+            onPress={() => logout()}
+            accessibilityLabel="Log out">
+            <MaterialCommunityIcons
+              name="logout"
+              size={16}
+              color={AdditionalColors.red80}
+            />
             <Text style={styles.logoutText}>Log out</Text>
           </TouchableOpacity>
         </View>
         <Text style={styles.me}>Signed in as {username}</Text>
       </View>
+
       <FlatList
         data={users}
         keyExtractor={(item) => item}
         contentContainerStyle={styles.list}
         refreshControl={
-          <RefreshControl refreshing={false} onRefresh={refreshUsers} />
+          <RefreshControl
+            refreshing={false}
+            onRefresh={refreshUsers}
+            tintColor={BrandColors.darkBlue80}
+          />
         }
         ListEmptyComponent={
           <View style={styles.empty}>
+            <MaterialCommunityIcons
+              name="account-multiple-outline"
+              size={48}
+              color={BrandColors.darkBlue60}
+            />
             <Text style={styles.emptyText}>No other users online yet.</Text>
             <Text style={styles.emptyHint}>
               Ask someone else to open the app.
@@ -67,67 +87,61 @@ export function DirectoryScreen() {
           <TouchableOpacity
             style={[styles.row, isCalling && styles.rowDisabled]}
             onPress={() => handleCall(item)}
-            disabled={isCalling}>
-            <View style={styles.avatar}>
-              <Text style={styles.avatarText}>{item[0]?.toUpperCase()}</Text>
-            </View>
+            disabled={isCalling}
+            activeOpacity={0.7}>
+            <Avatar name={item} size={44} />
             <Text style={styles.name}>{item}</Text>
             {isCalling ? (
-              <ActivityIndicator size="small" color="#6366f1" />
+              <ActivityIndicator size="small" color={BrandColors.darkBlue80} />
             ) : (
-              <Text style={styles.callIcon}>📞</Text>
+              <MaterialCommunityIcons
+                name="phone"
+                size={22}
+                color={BrandColors.seaBlue100}
+              />
             )}
           </TouchableOpacity>
         )}
       />
-    </View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#fff' },
+  container: { flex: 1, backgroundColor: BrandColors.seaBlue20 },
   header: {
     padding: 24,
     paddingBottom: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: '#f3f4f6',
   },
-  title: { fontSize: 28, fontWeight: '700', color: '#111827' },
-  me: { fontSize: 14, color: '#6b7280', marginTop: 2 },
   headerRow: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
+  title: { fontSize: 28, fontWeight: '700', color: TextColors.darkText },
+  me: { fontSize: 14, color: AdditionalColors.grey80, marginTop: 2 },
   logoutButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
     paddingVertical: 6,
     paddingHorizontal: 12,
-    borderRadius: 8,
-    backgroundColor: '#f3f4f6',
+    borderRadius: 100,
+    backgroundColor: AdditionalColors.white,
   },
-  logoutText: { fontSize: 14, fontWeight: '600', color: '#ef4444' },
-  list: { padding: 16, gap: 8, flex: 1 },
+  logoutText: { fontSize: 14, fontWeight: '600', color: AdditionalColors.red80 },
+  list: { padding: 16, gap: 10, flexGrow: 1 },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 14,
-    borderRadius: 12,
-    backgroundColor: '#f9fafb',
+    padding: 12,
+    borderRadius: 16,
+    backgroundColor: AdditionalColors.white,
     gap: 12,
   },
-  rowDisabled: { opacity: 0.6 },
-  avatar: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: '#e0e7ff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  avatarText: { fontSize: 18, fontWeight: '600', color: '#6366f1' },
-  name: { flex: 1, fontSize: 16, color: '#111827' },
-  callIcon: { fontSize: 20 },
-  empty: { paddingTop: 48, alignItems: 'center', gap: 8 },
-  emptyText: { fontSize: 16, fontWeight: '500', color: '#374151' },
-  emptyHint: { fontSize: 14, color: '#9ca3af' },
+  rowDisabled: { opacity: 0.5 },
+  name: { flex: 1, fontSize: 16, fontWeight: '500', color: TextColors.darkText },
+  empty: { paddingTop: 64, alignItems: 'center', gap: 10 },
+  emptyText: { fontSize: 16, fontWeight: '600', color: BrandColors.darkBlue80 },
+  emptyHint: { fontSize: 14, color: AdditionalColors.grey80 },
 });
diff --git a/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
index 56d106de..7e1d14a2 100644
--- a/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
@@ -1,59 +1,79 @@
 import {
   useAudioOutput,
+  useCamera,
+  useInitializeDevices,
   useMicrophone,
   usePeers,
   useVAD,
 } from '@fishjam-cloud/react-native-client';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { useEffect, useMemo, useState } from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { Avatar, InCallButton, VideoCallView } from '../components';
+import { AdditionalColors, BrandColors, TextColors } from '../theme/colors';
 import { useVoip } from '../voip';
 
 type PeerMeta = { displayName?: string };
 
-function formatDuration(seconds: number): string {
-  const m = Math.floor(seconds / 60)
+function formatDuration(totalSeconds: number): string {
+  const m = Math.floor(totalSeconds / 60)
     .toString()
     .padStart(2, '0');
-  const s = (seconds % 60).toString().padStart(2, '0');
+  const s = (totalSeconds % 60).toString().padStart(2, '0');
   return `${m}:${s}`;
 }
 
+function useElapsed(startedAt: number | null): number {
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    if (!startedAt) {
+      setElapsed(0);
+      return;
+    }
+    setElapsed(Math.floor((Date.now() - startedAt) / 1000));
+    const id = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startedAt) / 1000));
+    }, 1000);
+    return () => clearInterval(id);
+  }, [startedAt]);
+  return elapsed;
+}
+
 export function InCallScreen() {
   const { currentCall, endCall } = useVoip();
-  const { toggleMicrophone, isMicrophoneOn } = useMicrophone();
-  const isMicrophoneMuted = !isMicrophoneOn;
-  const { remotePeers } = usePeers<PeerMeta>();
+  const isVideo = currentCall?.isVideo ?? false;
+  const displayName = currentCall?.displayName ?? 'Caller';
+
+  const { isMicrophoneOn, toggleMicrophone } = useMicrophone();
+  const { isCameraOn, toggleCamera, startCamera, stopCamera } = useCamera();
+  const { initializeDevices } = useInitializeDevices();
   const { currentAudioOutput, ios, android } = useAudioOutput();
+  const { remotePeers } = usePeers<PeerMeta>();
 
   const peerIds = useMemo(() => remotePeers.map((p) => p.id), [remotePeers]);
   const speaking = useVAD({ peerIds });
 
+  const elapsed = useElapsed(currentCall?.startedAt ?? null);
   const isSpeaker = currentAudioOutput?.type === 'speaker';
 
-  const [elapsed, setElapsed] = useState(0);
-  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
-
+  // Bring up the camera for video calls and tear it down on leave.
   useEffect(() => {
-    if (!currentCall?.startedAt) {
-      setElapsed(0);
-      return;
-    }
-    const startedAt = currentCall.startedAt;
-    setElapsed(Math.floor((Date.now() - startedAt) / 1000));
-    intervalRef.current = setInterval(() => {
-      setElapsed(Math.floor((Date.now() - startedAt) / 1000));
-    }, 1000);
+    if (!isVideo) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        await initializeDevices({ enableVideo: true, enableAudio: false });
+        if (!cancelled) await startCamera();
+      } catch (err) {
+        console.error('Failed to start camera:', err);
+      }
+    })();
     return () => {
-      if (intervalRef.current) clearInterval(intervalRef.current);
+      cancelled = true;
+      stopCamera();
     };
-  }, [currentCall?.startedAt]);
+  }, [isVideo, initializeDevices, startCamera, stopCamera]);
 
   const toggleSpeaker = () => {
     if (Platform.OS === 'ios') {
@@ -64,163 +84,135 @@ export function InCallScreen() {
     }
   };
 
-  const displayName = currentCall?.displayName ?? '…';
+  const controls = (
+    <View style={styles.controls}>
+      <InCallButton
+        iconName={isMicrophoneOn ? 'microphone' : 'microphone-off'}
+        active={!isMicrophoneOn}
+        onPress={toggleMicrophone}
+        accessibilityLabel="Toggle microphone"
+      />
+      {isVideo && (
+        <InCallButton
+          iconName={isCameraOn ? 'camera' : 'camera-off'}
+          active={!isCameraOn}
+          onPress={toggleCamera}
+          accessibilityLabel="Toggle camera"
+        />
+      )}
+      <InCallButton
+        iconName={isSpeaker ? 'volume-high' : 'volume-medium'}
+        active={isSpeaker}
+        onPress={toggleSpeaker}
+        accessibilityLabel="Toggle speaker"
+      />
+      <InCallButton
+        type="disconnect"
+        iconName="phone-hangup"
+        onPress={endCall}
+        accessibilityLabel="End call"
+      />
+    </View>
+  );
+
+  if (isVideo) {
+    return (
+      <View style={styles.videoRoot}>
+        <VideoCallView remoteName={displayName} localName="You" />
+        <SafeAreaView
+          style={[StyleSheet.absoluteFill, styles.overlay]}
+          edges={['top', 'bottom']}
+          pointerEvents="box-none">
+          <View style={styles.videoHeader} pointerEvents="none">
+            <Text style={styles.videoName}>{displayName}</Text>
+            <Text style={styles.videoTimer}>{formatDuration(elapsed)}</Text>
+          </View>
+          <View style={styles.floatingControlsWrap}>{controls}</View>
+        </SafeAreaView>
+      </View>
+    );
+  }
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.label}>On call · {formatDuration(elapsed)}</Text>
-
-      {remotePeers.length === 0 ? (
-        <>
-          <View style={styles.avatar}>
-            <Text style={styles.avatarText}>
-              {displayName[0]?.toUpperCase() ?? '?'}
-            </Text>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <View style={styles.audioContent}>
+        <Text style={styles.label}>On call · {formatDuration(elapsed)}</Text>
+        {remotePeers.length === 0 ? (
+          <View style={styles.callee}>
+            <Avatar name={displayName} size={120} />
+            <Text style={styles.name}>{displayName}</Text>
           </View>
-          <Text style={styles.name}>{displayName}</Text>
-        </>
-      ) : (
-        <View style={styles.roster}>
-          {remotePeers.map((peer) => {
-            const name = peer.metadata?.peer?.displayName ?? peer.id;
-            const isTalking = speaking[peer.id] ?? false;
-            return (
-              <View
-                key={peer.id}
-                style={[
-                  styles.rosterItem,
-                  isTalking && styles.rosterItemSpeaking,
-                ]}>
-                <View
-                  style={[
-                    styles.rosterAvatar,
-                    isTalking && styles.rosterAvatarSpeaking,
-                  ]}>
-                  <Text style={styles.rosterAvatarText}>
-                    {name[0]?.toUpperCase() ?? '?'}
-                  </Text>
+        ) : (
+          <View style={styles.roster}>
+            {remotePeers.map((peer) => {
+              const name = peer.metadata?.peer?.displayName ?? displayName;
+              const isTalking = speaking[peer.id] ?? false;
+              return (
+                <View key={peer.id} style={styles.rosterItem}>
+                  <Avatar name={name} size={88} speaking={isTalking} />
+                  <Text style={styles.rosterName}>{name}</Text>
                 </View>
-                <Text style={styles.rosterName}>{name}</Text>
-                {isTalking && <Text style={styles.speakingDot}>●</Text>}
-              </View>
-            );
-          })}
-        </View>
-      )}
-
-      <View style={styles.controls}>
-        <TouchableOpacity
-          style={[
-            styles.controlButton,
-            isMicrophoneMuted && styles.controlButtonActive,
-          ]}
-          onPress={toggleMicrophone}>
-          <Text style={styles.controlIcon}>
-            {isMicrophoneMuted ? '🔇' : '🎤'}
-          </Text>
-          <Text style={styles.controlLabel}>
-            {isMicrophoneMuted ? 'Unmute' : 'Mute'}
-          </Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity style={styles.endButton} onPress={endCall}>
-          <Text style={styles.endIcon}>✕</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={[
-            styles.controlButton,
-            isSpeaker && styles.controlButtonActive,
-          ]}
-          onPress={toggleSpeaker}>
-          <Text style={styles.controlIcon}>{isSpeaker ? '🔊' : '🔈'}</Text>
-          <Text style={styles.controlLabel}>
-            {isSpeaker ? 'Earpiece' : 'Speaker'}
-          </Text>
-        </TouchableOpacity>
+              );
+            })}
+          </View>
+        )}
       </View>
-    </View>
+      <View style={styles.audioControlsWrap}>{controls}</View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  container: { flex: 1, backgroundColor: BrandColors.seaBlue20 },
+
+  // audio layout
+  audioContent: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#052e16',
     gap: 16,
     padding: 32,
   },
   label: {
-    fontSize: 14,
-    color: '#86efac',
-    letterSpacing: 1,
+    fontSize: 13,
+    color: BrandColors.seaBlue100,
+    letterSpacing: 1.5,
     textTransform: 'uppercase',
+    fontWeight: '600',
   },
-  avatar: {
-    marginVertical: 24,
-    width: 100,
-    height: 100,
-    borderRadius: 50,
-    backgroundColor: '#16a34a',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  avatarText: { fontSize: 40, fontWeight: '700', color: '#fff' },
-  name: { fontSize: 28, fontWeight: '700', color: '#fff' },
+  callee: { alignItems: 'center', gap: 16, marginTop: 8 },
+  name: { fontSize: 28, fontWeight: '700', color: TextColors.darkText },
   roster: {
     flexDirection: 'row',
     flexWrap: 'wrap',
     justifyContent: 'center',
-    gap: 16,
-    marginVertical: 16,
-  },
-  rosterItem: {
-    alignItems: 'center',
-    gap: 6,
-    padding: 12,
-    borderRadius: 16,
-    backgroundColor: 'rgba(255,255,255,0.07)',
-    minWidth: 80,
+    gap: 24,
+    marginTop: 8,
   },
-  rosterItemSpeaking: { backgroundColor: 'rgba(22,163,74,0.25)' },
-  rosterAvatar: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    backgroundColor: '#16a34a',
-    alignItems: 'center',
-    justifyContent: 'center',
+  rosterItem: { alignItems: 'center', gap: 8 },
+  rosterName: { fontSize: 14, color: TextColors.darkText, fontWeight: '500' },
+  audioControlsWrap: { paddingBottom: 24, alignItems: 'center' },
+
+  // video layout (FaceTime style)
+  videoRoot: { flex: 1, backgroundColor: BrandColors.darkBlue100 },
+  overlay: { justifyContent: 'space-between' },
+  videoHeader: { paddingTop: 8, alignItems: 'center' },
+  videoName: { fontSize: 18, fontWeight: '700', color: AdditionalColors.white },
+  videoTimer: {
+    fontSize: 13,
+    color: 'rgba(255, 255, 255, 0.85)',
+    marginTop: 2,
   },
-  rosterAvatarSpeaking: { borderWidth: 2, borderColor: '#4ade80' },
-  rosterAvatarText: { fontSize: 26, fontWeight: '700', color: '#fff' },
-  rosterName: { fontSize: 13, color: '#d1fae5', textAlign: 'center' },
-  speakingDot: { fontSize: 10, color: '#4ade80' },
+  floatingControlsWrap: { alignItems: 'center', paddingBottom: 12 },
+
+  // shared control bar
   controls: {
     flexDirection: 'row',
-    marginTop: 48,
+    gap: 14,
+    backgroundColor: 'rgba(255, 255, 255, 0.92)',
+    paddingHorizontal: 18,
+    paddingVertical: 14,
+    borderRadius: 40,
     alignItems: 'center',
-    gap: 32,
-  },
-  controlButton: {
-    alignItems: 'center',
-    gap: 6,
-    padding: 16,
-    borderRadius: 16,
-    backgroundColor: 'rgba(255,255,255,0.1)',
-    minWidth: 80,
-  },
-  controlButtonActive: { backgroundColor: 'rgba(239,68,68,0.3)' },
-  controlIcon: { fontSize: 28 },
-  controlLabel: { fontSize: 12, color: '#d1fae5' },
-  endButton: {
-    width: 72,
-    height: 72,
-    borderRadius: 36,
-    backgroundColor: '#ef4444',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
-  endIcon: { fontSize: 28, color: '#fff' },
 });
diff --git a/examples/mobile-client/voip-call/app/src/screens/LoginScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/LoginScreen.tsx
index 881b5c56..d0ac0270 100644
--- a/examples/mobile-client/voip-call/app/src/screens/LoginScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/LoginScreen.tsx
@@ -1,3 +1,4 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useState } from 'react';
 import {
   ActivityIndicator,
@@ -9,70 +10,86 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { AdditionalColors, BrandColors, TextColors } from '../theme/colors';
 import { useUser } from '../user';
 
 export function LoginScreen() {
   const { register } = useUser();
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
 
   const handleContinue = async () => {
     const name = input.trim();
     if (!name) return;
     setIsLoading(true);
-    await register(name);
-    setIsLoading(false);
+    try {
+      await register(name);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
+  const disabled = !input.trim() || isLoading;
+
   return (
-    <KeyboardAvoidingView
-      style={styles.root}
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-      <View style={styles.container}>
-        <View style={styles.iconWrap}>
-          <Text style={styles.icon}>📞</Text>
-        </View>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <KeyboardAvoidingView
+        style={styles.flex}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        <View style={styles.content}>
+          <View style={styles.iconWrap}>
+            <MaterialCommunityIcons
+              name="phone"
+              size={40}
+              color={AdditionalColors.white}
+            />
+          </View>
 
-        <Text style={styles.title}>Welcome</Text>
-        <Text style={styles.subtitle}>Choose a display name so others can call you.</Text>
+          <Text style={styles.title}>Welcome</Text>
+          <Text style={styles.subtitle}>
+            Choose a display name so others can call you.
+          </Text>
 
-        <TextInput
-          style={styles.input}
-          value={input}
-          onChangeText={setInput}
-          placeholder="Your name"
-          placeholderTextColor="#9ca3af"
-          autoCapitalize="words"
-          autoCorrect={false}
-          returnKeyType="go"
-          onSubmitEditing={handleContinue}
-          editable={!isLoading}
-          autoFocus
-        />
+          <TextInput
+            style={[styles.input, isFocused && styles.inputFocused]}
+            value={input}
+            onChangeText={setInput}
+            placeholder="Your name"
+            placeholderTextColor={AdditionalColors.grey80}
+            autoCapitalize="words"
+            autoCorrect={false}
+            returnKeyType="go"
+            onSubmitEditing={handleContinue}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            editable={!isLoading}
+            autoFocus
+          />
 
-        <TouchableOpacity
-          style={[styles.button, (!input.trim() || isLoading) && styles.buttonDisabled]}
-          onPress={handleContinue}
-          disabled={!input.trim() || isLoading}
-          activeOpacity={0.85}>
-          {isLoading ? (
-            <ActivityIndicator color="#fff" />
-          ) : (
-            <Text style={styles.buttonText}>Continue</Text>
-          )}
-        </TouchableOpacity>
-      </View>
-    </KeyboardAvoidingView>
+          <TouchableOpacity
+            style={[styles.button, disabled && styles.buttonDisabled]}
+            onPress={handleContinue}
+            disabled={disabled}
+            activeOpacity={0.85}>
+            {isLoading ? (
+              <ActivityIndicator color={AdditionalColors.white} />
+            ) : (
+              <Text style={styles.buttonText}>Continue</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  container: {
+  container: { flex: 1, backgroundColor: BrandColors.seaBlue20 },
+  flex: { flex: 1 },
+  content: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
@@ -83,49 +100,51 @@ const styles = StyleSheet.create({
     width: 88,
     height: 88,
     borderRadius: 44,
-    backgroundColor: '#eef2ff',
+    backgroundColor: BrandColors.darkBlue100,
     alignItems: 'center',
     justifyContent: 'center',
     marginBottom: 8,
   },
-  icon: {
-    fontSize: 40,
-  },
   title: {
     fontSize: 28,
     fontWeight: '700',
-    color: '#111827',
+    color: TextColors.darkText,
     textAlign: 'center',
   },
   subtitle: {
     fontSize: 15,
-    color: '#6b7280',
+    color: AdditionalColors.grey80,
     textAlign: 'center',
     marginBottom: 8,
   },
   input: {
     width: '100%',
-    borderWidth: 1.5,
-    borderColor: '#e5e7eb',
-    borderRadius: 14,
-    padding: 16,
-    fontSize: 17,
-    color: '#111827',
-    backgroundColor: '#f9fafb',
+    height: 56,
+    borderWidth: 2,
+    borderColor: BrandColors.darkBlue100,
+    borderRadius: 40,
+    paddingHorizontal: 20,
+    fontSize: 16,
+    color: TextColors.darkText,
+    backgroundColor: AdditionalColors.white,
+  },
+  inputFocused: {
+    borderColor: BrandColors.seaBlue80,
   },
   button: {
     width: '100%',
-    backgroundColor: '#6366f1',
-    borderRadius: 14,
-    padding: 16,
+    height: 56,
+    backgroundColor: BrandColors.darkBlue100,
+    borderRadius: 100,
     alignItems: 'center',
+    justifyContent: 'center',
   },
   buttonDisabled: {
-    opacity: 0.4,
+    backgroundColor: AdditionalColors.grey60,
   },
   buttonText: {
-    color: '#fff',
-    fontSize: 17,
+    color: AdditionalColors.white,
+    fontSize: 18,
     fontWeight: '600',
   },
 });
diff --git a/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
index 74406922..c4672bc2 100644
--- a/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -7,7 +7,10 @@ import Animated, {
   withSequence,
   withTiming,
 } from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { Avatar, InCallButton } from '../components';
+import { BrandColors, TextColors } from '../theme/colors';
 import { useVoip } from '../voip';
 
 export function OutgoingCallScreen() {
@@ -18,7 +21,7 @@ export function OutgoingCallScreen() {
   useEffect(() => {
     scale.value = withRepeat(
       withSequence(
-        withTiming(1.12, { duration: 800 }),
+        withTiming(1.1, { duration: 800 }),
         withTiming(1, { duration: 800 }),
       ),
       -1,
@@ -33,58 +36,37 @@ export function OutgoingCallScreen() {
   }));
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.label}>Calling</Text>
-      <Animated.View style={[styles.avatarWrap, animatedStyle]}>
-        <View style={styles.avatar}>
-          <Text style={styles.avatarText}>
-            {displayName[0]?.toUpperCase() ?? '?'}
-          </Text>
-        </View>
-      </Animated.View>
-      <Text style={styles.name}>{displayName}</Text>
-
-      <TouchableOpacity style={styles.endButton} onPress={endCall}>
-        <Text style={styles.endIcon}>✕</Text>
-      </TouchableOpacity>
-    </View>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <View style={styles.content}>
+        <Text style={styles.label}>Calling</Text>
+        <Animated.View style={[styles.avatarWrap, animatedStyle]}>
+          <Avatar name={displayName} size={120} />
+        </Animated.View>
+        <Text style={styles.name}>{displayName}</Text>
+      </View>
+      <View style={styles.controls}>
+        <InCallButton
+          type="disconnect"
+          iconName="phone-hangup"
+          onPress={endCall}
+          accessibilityLabel="Cancel call"
+        />
+      </View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#1e1b4b',
-    gap: 16,
-    padding: 32,
-  },
+  container: { flex: 1, backgroundColor: BrandColors.seaBlue20 },
+  content: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 },
   label: {
-    fontSize: 16,
-    color: '#a5b4fc',
-    letterSpacing: 1,
+    fontSize: 13,
+    color: BrandColors.seaBlue100,
+    letterSpacing: 1.5,
     textTransform: 'uppercase',
+    fontWeight: '600',
   },
   avatarWrap: { marginVertical: 24 },
-  avatar: {
-    width: 100,
-    height: 100,
-    borderRadius: 50,
-    backgroundColor: '#4f46e5',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  avatarText: { fontSize: 40, fontWeight: '700', color: '#fff' },
-  name: { fontSize: 28, fontWeight: '700', color: '#fff' },
-  endButton: {
-    marginTop: 48,
-    width: 72,
-    height: 72,
-    borderRadius: 36,
-    backgroundColor: '#ef4444',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  endIcon: { fontSize: 28, color: '#fff' },
+  name: { fontSize: 28, fontWeight: '700', color: TextColors.darkText },
+  controls: { paddingBottom: 32, alignItems: 'center' },
 });
diff --git a/examples/mobile-client/voip-call/app/src/theme/colors.ts b/examples/mobile-client/voip-call/app/src/theme/colors.ts
new file mode 100644
index 00000000..1fd92069
--- /dev/null
+++ b/examples/mobile-client/voip-call/app/src/theme/colors.ts
@@ -0,0 +1,27 @@
+export const BrandColors = {
+  seaBlue100: '#1F7193',
+  seaBlue80: '#46ADD8',
+  seaBlue60: '#87CCE8',
+  seaBlue40: '#BFE7F8',
+  seaBlue20: '#F1FAFE',
+
+  darkBlue100: '#001A72',
+  darkBlue80: '#3F57A6',
+  darkBlue60: '#7089DB',
+  darkBlue40: '#BFCCF8',
+  darkBlue20: '#F5F7FE',
+};
+
+export const AdditionalColors = {
+  red100: '#981B1B',
+  red80: '#C32222',
+  grey80: '#70778F',
+  grey60: '#B2B9CC',
+  white: '#FFFFFF',
+};
+
+export const TextColors = {
+  darkText: '#001A72',
+  additionalLightText: '#ACB5D2',
+  white: '#FFFFFF',
+};

From 66317733fd4b98b633aec40506825d4e8973b9fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Mon, 29 Jun 2026 09:43:38 +0200
Subject: [PATCH 11/19] Decouple VoIPProvider from room config

---
 .../voip-call/app/src/voip/VoipContext.ts     |  7 +-
 .../voip-call/app/src/voip/VoipProvider.tsx   | 74 ++++++-------------
 2 files changed, 26 insertions(+), 55 deletions(-)

diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts b/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
index a91cef29..23af187c 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipContext.ts
@@ -41,9 +41,10 @@ export type VoipContextValue = {
   startCall: (to: string, roomName: string) => Promise<void>;
   /** Answers the current incoming call and joins its room. */
   answerCall: () => Promise<void>;
-  /** Rejects the current incoming call without joining. */
-  rejectCall: () => Promise<void>;
-  /** Ends the active call and leaves the room. */
+  /**
+   * Ends or rejects the current call — dismisses CallKit, leaves the room, and
+   * resets state back to `available`.
+   */
   endCall: () => Promise<void>;
 };
 
diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
index 27f4b00b..96e040e1 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
@@ -1,7 +1,6 @@
 import {
   useCallKit,
   useConnection,
-  useMicrophone,
   usePeers,
   useVoIPEvents,
   type VoipIncomingPayload,
@@ -61,7 +60,6 @@ export function VoipProvider({
   const [currentCall, setCurrentCall] = useState<CurrentCall | null>(null);
 
   const { joinRoom, leaveRoom } = useConnection();
-  const { startMicrophone, stopMicrophone } = useMicrophone();
   const { startCallKitSession, endCallKitSession } = useCallKit();
   const { remotePeers } = usePeers();
 
@@ -69,34 +67,20 @@ export function VoipProvider({
     async (roomName: string) => {
       const token = await getPeerToken(roomName);
       await joinRoom({ peerToken: token });
-      await startMicrophone();
     },
-    [getPeerToken, joinRoom, startMicrophone],
+    [getPeerToken, joinRoom],
   );
 
-  const handleLeaveRoom = useCallback(async () => {
-    try {
-      await stopMicrophone();
-    } catch {
-      // ignore if mic was never started
-    }
+  const handleLeaveRoom = useCallback(() => {
     leaveRoom();
-  }, [leaveRoom, stopMicrophone]);
+  }, [leaveRoom]);
 
-  const resetCall = useCallback(async () => {
+  const endCall = useCallback(async () => {
+    await endCallKitSession();
     await handleLeaveRoom();
     setCurrentCall(null);
     setStatus('available');
-  }, [handleLeaveRoom]);
-
-  useEffect(() => {
-    if (status === 'connecting' && remotePeers.length > 0) {
-      setCurrentCall((prev) =>
-        prev ? { ...prev, startedAt: Date.now() } : prev,
-      );
-      setStatus('active');
-    }
-  }, [remotePeers.length, status]);
+  }, [handleLeaveRoom, endCallKitSession]);
 
   const startCall = useCallback(
     async (to: string, roomName: string) => {
@@ -122,27 +106,11 @@ export function VoipProvider({
     setStatus('connecting');
     try {
       await handleJoinRoom(currentCall.roomName);
-      setCurrentCall((prev) =>
-        prev ? { ...prev, startedAt: Date.now() } : prev,
-      );
-      setStatus('active');
     } catch (err) {
       console.error('Failed to join room on answer:', err);
-      await resetCall();
+      await endCall();
     }
-  }, [handleJoinRoom, resetCall, currentCall]);
-
-  const rejectCall = useCallback(async () => {
-    await endCallKitSession();
-    await resetCall();
-  }, [endCallKitSession, resetCall]);
-
-  const endCall = useCallback(async () => {
-    await endCallKitSession();
-    await handleLeaveRoom();
-    setCurrentCall(null);
-    setStatus('available');
-  }, [handleLeaveRoom, endCallKitSession]);
+  }, [handleJoinRoom, endCall, currentCall]);
 
   useVoIPEvents({
     onRegistered: useCallback((token: string) => {
@@ -164,10 +132,21 @@ export function VoipProvider({
     }, [answerCall]),
 
     onEnded: useCallback(async () => {
-      await resetCall();
-    }, [resetCall]),
+      await endCall();
+    }, [endCall]),
   });
 
+  useEffect(() => {
+    if (status === 'connecting' && remotePeers.length > 0) {
+      setCurrentCall((prev) =>
+        prev ? { ...prev, startedAt: Date.now() } : prev,
+      );
+      setStatus('active');
+    } else if (status === 'active' && remotePeers.length === 0) {
+      endCall();
+    }
+  }, [remotePeers.length, status, endCall]);
+
   const voipValue = useMemo(
     () => ({
       voipToken,
@@ -175,18 +154,9 @@ export function VoipProvider({
       currentCall,
       startCall,
       answerCall,
-      rejectCall,
       endCall,
     }),
-    [
-      voipToken,
-      status,
-      currentCall,
-      startCall,
-      answerCall,
-      rejectCall,
-      endCall,
-    ],
+    [voipToken, status, currentCall, startCall, answerCall, endCall],
   );
 
   return (

From 40158f8fb339103550fb2244cb504abbd6659ba2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Mon, 29 Jun 2026 12:05:50 +0200
Subject: [PATCH 12/19] Add camera handling into VoipProvider

---
 .../voip-call/app/src/voip/VoipProvider.tsx     | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
index 96e040e1..11ae4728 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
@@ -1,6 +1,9 @@
 import {
   useCallKit,
+  useCamera,
   useConnection,
+  useInitializeDevices,
+  useMicrophone,
   usePeers,
   useVoIPEvents,
   type VoipIncomingPayload,
@@ -58,7 +61,9 @@ export function VoipProvider({
   const [voipToken, setVoipToken] = useState<string | null>(null);
   const [status, setStatus] = useState<VoipCallStatus>('available');
   const [currentCall, setCurrentCall] = useState<CurrentCall | null>(null);
-
+  const { startCamera, stopCamera } = useCamera();
+  const { startMicrophone, stopMicrophone } = useMicrophone();
+  const { initializeDevices } = useInitializeDevices();
   const { joinRoom, leaveRoom } = useConnection();
   const { startCallKitSession, endCallKitSession } = useCallKit();
   const { remotePeers } = usePeers();
@@ -66,9 +71,13 @@ export function VoipProvider({
   const handleJoinRoom = useCallback(
     async (roomName: string) => {
       const token = await getPeerToken(roomName);
+      if (isVideo) {
+        await startCamera();
+      }
+      await startMicrophone();
       await joinRoom({ peerToken: token });
     },
-    [getPeerToken, joinRoom],
+    [getPeerToken, joinRoom, startMicrophone, startCamera, isVideo],
   );
 
   const handleLeaveRoom = useCallback(() => {
@@ -77,10 +86,12 @@ export function VoipProvider({
 
   const endCall = useCallback(async () => {
     await endCallKitSession();
+    await stopCamera();
+    await stopMicrophone();
     await handleLeaveRoom();
     setCurrentCall(null);
     setStatus('available');
-  }, [handleLeaveRoom, endCallKitSession]);
+  }, [handleLeaveRoom, endCallKitSession, stopCamera, stopMicrophone]);
 
   const startCall = useCallback(
     async (to: string, roomName: string) => {

From 81f3bab33f202c6b3613aca128f16eeb7a391977 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Mon, 29 Jun 2026 13:01:53 +0200
Subject: [PATCH 13/19] Make the call screens more visaully appealing

---
 examples/mobile-client/voip-call/app/App.tsx  |  4 +--
 .../app/src/components/VideoCallView.tsx      | 19 ++++--------
 .../app/src/screens/DirectoryScreen.tsx       | 17 +++++++---
 .../app/src/screens/InCallScreen.tsx          | 31 ++++---------------
 .../app/src/screens/OutgoingCallScreen.tsx    |  4 ++-
 5 files changed, 28 insertions(+), 47 deletions(-)

diff --git a/examples/mobile-client/voip-call/app/App.tsx b/examples/mobile-client/voip-call/app/App.tsx
index acd0936d..1799b002 100644
--- a/examples/mobile-client/voip-call/app/App.tsx
+++ b/examples/mobile-client/voip-call/app/App.tsx
@@ -12,8 +12,8 @@ import { DirectoryScreen } from './src/screens/DirectoryScreen';
 import { InCallScreen } from './src/screens/InCallScreen';
 import { LoginScreen } from './src/screens/LoginScreen';
 import { OutgoingCallScreen } from './src/screens/OutgoingCallScreen';
-import { UserProvider, useUser } from './src/user';
 import { BrandColors } from './src/theme/colors';
+import { UserProvider, useUser } from './src/user';
 import { VoipProvider, useVoip } from './src/voip';
 
 const SERVER_URL =
@@ -103,8 +103,6 @@ function AppScreens() {
     return <InCallScreen />;
   }
 
-  // available | incoming — directory is shown underneath;
-  // for 'incoming' the native CallKit sheet covers the screen anyway
   return <DirectoryScreen />;
 }
 
diff --git a/examples/mobile-client/voip-call/app/src/components/VideoCallView.tsx b/examples/mobile-client/voip-call/app/src/components/VideoCallView.tsx
index 08e790b9..83ecaf1b 100644
--- a/examples/mobile-client/voip-call/app/src/components/VideoCallView.tsx
+++ b/examples/mobile-client/voip-call/app/src/components/VideoCallView.tsx
@@ -1,6 +1,7 @@
 import {
   RTCView,
   type Track,
+  useCamera,
   usePeers,
 } from '@fishjam-cloud/react-native-client';
 import { StyleSheet, View } from 'react-native';
@@ -9,8 +10,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BrandColors } from '../theme/colors';
 import { Avatar } from './Avatar';
 
-type PeerMeta = { displayName?: string };
-
 function streamOf(track: Track | null | undefined) {
   return track?.stream && !track?.metadata?.paused ? track.stream : null;
 }
@@ -22,13 +21,12 @@ type VideoCallViewProps = {
 
 export function VideoCallView({ remoteName, localName }: VideoCallViewProps) {
   const insets = useSafeAreaInsets();
-  const { localPeer, remotePeers } = usePeers<PeerMeta>();
+  const { remotePeers } = usePeers();
+  const { cameraStream } = useCamera();
 
   const primaryRemote = remotePeers[0];
   const remoteStream = streamOf(primaryRemote?.cameraTrack);
-  const remoteDisplay =
-    primaryRemote?.metadata?.peer?.displayName ?? remoteName;
-  const localStream = streamOf(localPeer?.cameraTrack);
+  const localStream = cameraStream;
 
   return (
     <View style={styles.container}>
@@ -40,18 +38,13 @@ export function VideoCallView({ remoteName, localName }: VideoCallViewProps) {
         />
       ) : (
         <View style={styles.remoteNoVideo}>
-          <Avatar name={remoteDisplay} size={132} />
+          <Avatar name={remoteName} size={132} />
         </View>
       )}
 
       <View style={[styles.pip, { top: insets.top + 12 }]}>
         {localStream ? (
-          <RTCView
-            mediaStream={localStream}
-            objectFit="cover"
-            style={styles.pipVideo}
-            mirror
-          />
+          <RTCView mediaStream={localStream} style={styles.pipVideo} mirror />
         ) : (
           <View style={styles.pipNoVideo}>
             <Avatar name={localName} size={44} />
diff --git a/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
index aff98cd8..e180ab15 100644
--- a/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/DirectoryScreen.tsx
@@ -16,6 +16,7 @@ import { AdditionalColors, BrandColors, TextColors } from '../theme/colors';
 import { useUser } from '../user';
 import { useVoip } from '../voip';
 
+// Random room name for the call
 function makeRoomName() {
   const bytes = crypto.getRandomValues(new Uint8Array(6));
   const id = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
@@ -78,9 +79,6 @@ export function DirectoryScreen() {
               color={BrandColors.darkBlue60}
             />
             <Text style={styles.emptyText}>No other users online yet.</Text>
-            <Text style={styles.emptyHint}>
-              Ask someone else to open the app.
-            </Text>
           </View>
         }
         renderItem={({ item }) => (
@@ -129,7 +127,11 @@ const styles = StyleSheet.create({
     borderRadius: 100,
     backgroundColor: AdditionalColors.white,
   },
-  logoutText: { fontSize: 14, fontWeight: '600', color: AdditionalColors.red80 },
+  logoutText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: AdditionalColors.red80,
+  },
   list: { padding: 16, gap: 10, flexGrow: 1 },
   row: {
     flexDirection: 'row',
@@ -140,7 +142,12 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   rowDisabled: { opacity: 0.5 },
-  name: { flex: 1, fontSize: 16, fontWeight: '500', color: TextColors.darkText },
+  name: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '500',
+    color: TextColors.darkText,
+  },
   empty: { paddingTop: 64, alignItems: 'center', gap: 10 },
   emptyText: { fontSize: 16, fontWeight: '600', color: BrandColors.darkBlue80 },
   emptyHint: { fontSize: 14, color: AdditionalColors.grey80 },
diff --git a/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
index 7e1d14a2..a8596319 100644
--- a/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/InCallScreen.tsx
@@ -1,7 +1,6 @@
 import {
   useAudioOutput,
   useCamera,
-  useInitializeDevices,
   useMicrophone,
   usePeers,
   useVAD,
@@ -42,12 +41,9 @@ function useElapsed(startedAt: number | null): number {
 
 export function InCallScreen() {
   const { currentCall, endCall } = useVoip();
-  const isVideo = currentCall?.isVideo ?? false;
-  const displayName = currentCall?.displayName ?? 'Caller';
 
   const { isMicrophoneOn, toggleMicrophone } = useMicrophone();
-  const { isCameraOn, toggleCamera, startCamera, stopCamera } = useCamera();
-  const { initializeDevices } = useInitializeDevices();
+  const { isCameraOn, toggleCamera } = useCamera();
   const { currentAudioOutput, ios, android } = useAudioOutput();
   const { remotePeers } = usePeers<PeerMeta>();
 
@@ -57,31 +53,16 @@ export function InCallScreen() {
   const elapsed = useElapsed(currentCall?.startedAt ?? null);
   const isSpeaker = currentAudioOutput?.type === 'speaker';
 
-  // Bring up the camera for video calls and tear it down on leave.
-  useEffect(() => {
-    if (!isVideo) return;
-    let cancelled = false;
-    (async () => {
-      try {
-        await initializeDevices({ enableVideo: true, enableAudio: false });
-        if (!cancelled) await startCamera();
-      } catch (err) {
-        console.error('Failed to start camera:', err);
-      }
-    })();
-    return () => {
-      cancelled = true;
-      stopCamera();
-    };
-  }, [isVideo, initializeDevices, startCamera, stopCamera]);
+  if (!currentCall) return null;
+
+  const isVideo = currentCall.isVideo;
+  const displayName = currentCall.displayName;
 
   const toggleSpeaker = () => {
     if (Platform.OS === 'ios') {
       ios.overrideAudioOutput(isSpeaker ? 'none' : 'speaker');
-    } else if (Platform.OS === 'android') {
-      const target = isSpeaker ? null : currentAudioOutput;
-      if (target) android.selectAudioOutput(target.id);
     }
+    // add android later
   };
 
   const controls = (
diff --git a/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx b/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
index c4672bc2..e607d5d8 100644
--- a/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
+++ b/examples/mobile-client/voip-call/app/src/screens/OutgoingCallScreen.tsx
@@ -15,7 +15,6 @@ import { useVoip } from '../voip';
 
 export function OutgoingCallScreen() {
   const { currentCall, endCall } = useVoip();
-  const displayName = currentCall?.displayName ?? '…';
   const scale = useSharedValue(1);
 
   useEffect(() => {
@@ -35,6 +34,9 @@ export function OutgoingCallScreen() {
     transform: [{ scale: scale.value }],
   }));
 
+  if (!currentCall) return null;
+  const displayName = currentCall.displayName;
+
   return (
     <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
       <View style={styles.content}>

From 8a52dec1225470fe59d1d770a58cd404928a78cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Mon, 29 Jun 2026 13:03:21 +0200
Subject: [PATCH 14/19] Remove dead code and make handleLeaveRoom more useful

---
 .../voip-call/app/src/voip/VoipProvider.tsx        | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
index 11ae4728..23d7e797 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
@@ -2,7 +2,6 @@ import {
   useCallKit,
   useCamera,
   useConnection,
-  useInitializeDevices,
   useMicrophone,
   usePeers,
   useVoIPEvents,
@@ -63,7 +62,6 @@ export function VoipProvider({
   const [currentCall, setCurrentCall] = useState<CurrentCall | null>(null);
   const { startCamera, stopCamera } = useCamera();
   const { startMicrophone, stopMicrophone } = useMicrophone();
-  const { initializeDevices } = useInitializeDevices();
   const { joinRoom, leaveRoom } = useConnection();
   const { startCallKitSession, endCallKitSession } = useCallKit();
   const { remotePeers } = usePeers();
@@ -80,18 +78,18 @@ export function VoipProvider({
     [getPeerToken, joinRoom, startMicrophone, startCamera, isVideo],
   );
 
-  const handleLeaveRoom = useCallback(() => {
-    leaveRoom();
-  }, [leaveRoom]);
+  const handleLeaveRoom = useCallback(async () => {
+    await stopCamera();
+    await stopMicrophone();
+    await leaveRoom();
+  }, [leaveRoom, stopCamera, stopMicrophone]);
 
   const endCall = useCallback(async () => {
     await endCallKitSession();
-    await stopCamera();
-    await stopMicrophone();
     await handleLeaveRoom();
     setCurrentCall(null);
     setStatus('available');
-  }, [handleLeaveRoom, endCallKitSession, stopCamera, stopMicrophone]);
+  }, [endCallKitSession, handleLeaveRoom]);
 
   const startCall = useCallback(
     async (to: string, roomName: string) => {

From 6755d6b771f6414779aabaf81522f2f7afd17f80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Mon, 29 Jun 2026 13:23:26 +0200
Subject: [PATCH 15/19] Remove some cursed file

---
 app.json | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 app.json

diff --git a/app.json b/app.json
deleted file mode 100644
index c474f5ef..00000000
--- a/app.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "android": {
-    "package": "com.anonymous.fishjamwebsdk"
-  }
-}

From ec748c7fb9efbfb757b72fafeaafe6e4884fdc99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82?= <xpfk.098@gmail.com>
Date: Mon, 29 Jun 2026 13:48:05 +0200
Subject: [PATCH 16/19] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 examples/mobile-client/voip-call/README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/examples/mobile-client/voip-call/README.md b/examples/mobile-client/voip-call/README.md
index ddfda40a..e87b7279 100644
--- a/examples/mobile-client/voip-call/README.md
+++ b/examples/mobile-client/voip-call/README.md
@@ -80,11 +80,12 @@ public override func application(
 `VoipManager` is Objective-C; Swift needs it imported through the bridging
 header. `ios/voipcall/voipcall-Bridging-Header.h`:
 
-````objc
+~~~objc
 //
 // Use this file to import your target's public headers that you would like to expose to Swift.
 //
-np```
+#import "VoipManager.h"
+~~~
 
 > If `"VoipManager.h"` doesn't resolve, use the pod-qualified form instead:
 > `#import <FishjamReactNativeWebrtc/VoipManager.h>`.
@@ -95,10 +96,10 @@ np```
 (add the **Push Notifications** capability in Xcode → Signing & Capabilities,
 which writes this for you). Already present in this app:
 
-```xml
+~~~xml
 <key>aps-environment</key>
 <string>development</string>   <!-- use "production" for TestFlight / App Store -->
-````
+~~~
 
 ## 4. Info.plist — background modes & permissions
 

From 2dd8a59c874410a49261a7b13826982a3169a0bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Mon, 29 Jun 2026 14:23:10 +0200
Subject: [PATCH 17/19] Add better error handling

---
 .../voip-call/app/src/voip/VoipProvider.tsx   | 12 +++++++----
 .../mobile-client/voip-call/server/main.ts    | 20 ++++++++++++-------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
index 23d7e797..f3ed0dcf 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
@@ -93,8 +93,6 @@ export function VoipProvider({
 
   const startCall = useCallback(
     async (to: string, roomName: string) => {
-      await requestCall({ to, roomName, isVideo });
-
       setCurrentCall({
         roomName,
         displayName: to,
@@ -103,8 +101,14 @@ export function VoipProvider({
       });
       setStatus('connecting');
 
-      await startCallKitSession({ displayName: to, isVideo });
-      await handleJoinRoom(roomName);
+      try {
+        await requestCall({ to, roomName, isVideo });
+        await startCallKitSession({ displayName: to, isVideo });
+        await handleJoinRoom(roomName);
+      } catch (err) {
+        console.error('Failed to start call:', err);
+        await endCall();
+      }
     },
     [requestCall, handleJoinRoom, startCallKitSession, isVideo],
   );
diff --git a/examples/mobile-client/voip-call/server/main.ts b/examples/mobile-client/voip-call/server/main.ts
index 5b93cac1..82e14f8f 100644
--- a/examples/mobile-client/voip-call/server/main.ts
+++ b/examples/mobile-client/voip-call/server/main.ts
@@ -41,7 +41,8 @@ async function sendVoipPush(params: {
   });
 
   if (!res.ok) {
-    console.error(`APNs push failed ${res.status}:`, await res.text());
+    const text = await res.text();
+    throw new Error(`APNs push failed ${res.status}: ${text}`);
   }
 }
 
@@ -100,12 +101,17 @@ Deno.serve({ port: 4400 }, async (req) => {
       return json({ error: "callee not found" }, 404);
     const voipToken = calleeRows[0].voip_token;
 
-    await sendVoipPush({
-      voipToken,
-      roomName: roomName,
-      displayName: from,
-      isVideo: isVideo,
-    });
+    try {
+      await sendVoipPush({
+        voipToken,
+        roomName: roomName,
+        displayName: from,
+        isVideo: isVideo,
+      });
+    } catch (err) {
+      console.error("Failed to send VoIP push:", err);
+      return json({ error: "failed to send VoIP push" }, 502);
+    }
 
     return json({ ok: true });
   }

From 953725880079124f2b2f0728413580b4f4d76add Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Mon, 29 Jun 2026 14:36:33 +0200
Subject: [PATCH 18/19] Better error handling

---
 examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
index f3ed0dcf..1ecb5179 100644
--- a/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
+++ b/examples/mobile-client/voip-call/app/src/voip/VoipProvider.tsx
@@ -156,7 +156,7 @@ export function VoipProvider({
       );
       setStatus('active');
     } else if (status === 'active' && remotePeers.length === 0) {
-      endCall();
+      endCall().catch((err) => console.error('Failed to end call:', err));
     }
   }, [remotePeers.length, status, endCall]);
 

From c26257c8ee5d22e22c53c61dcae364fbbb2302d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Gadomski?= <xpfk.098@gmail.com>
Date: Mon, 29 Jun 2026 15:58:11 +0200
Subject: [PATCH 19/19] Remove weird line that idk how got there

---
 examples/mobile-client/fishjam-chat/app/room/[roomName].tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/mobile-client/fishjam-chat/app/room/[roomName].tsx b/examples/mobile-client/fishjam-chat/app/room/[roomName].tsx
index 408b74a1..800868df 100644
--- a/examples/mobile-client/fishjam-chat/app/room/[roomName].tsx
+++ b/examples/mobile-client/fishjam-chat/app/room/[roomName].tsx
@@ -81,7 +81,6 @@ export default function RoomScreen() {
     enableCamera: true,
     enableMicrophone: true,
     enableScreenSharing: true,
-    onlyAlertOnce: true,
   });
 
   useCallKitService({