@ethora/chat-component-rn 26.10.4 → 26.10.5

package/src/components/VideoCalls/useCallKeep.ts

@@ -1,9 +1,13 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState, store } from '../../roomStore';
 import { acceptIncomingCall, declineIncomingCall } from '../../roomStore/callSlice';
 import { sendCallStateSignal } from '../../networking/callTokenStanza';
+import { terminateActiveCall } from './callActions';
+import { setCallMicEnabled, useCallSession } from './callSessionController';
+import { loadLiveKit } from './livekitRuntime';
+import { setCallSystemRinging } from './callUiStore';
 
 /**
  * Native incoming-call UI (Android ConnectionService / iOS CallKit) via
@@ -14,6 +18,12 @@ import { sendCallStateSignal } from '../../networking/callTokenStanza';
  * loaded lazily exactly like the LiveKit packages, so hosts that don't
  * install it get the plain in-app ring screen and nothing breaks.
  *
+ * On iOS every call, incoming or outgoing, is also reported to CallKit for
+ * as long as it lasts. That is what puts it in the Dynamic Island / the
+ * green status-bar pill when the app is in the background, with the
+ * system's own mute and end buttons, and what keeps the call's audio
+ * running in the background.
+ *
  * Platform reality, stated plainly:
  *  - Android: full value. A ConnectionService call shows the system
  *    incoming-call screen over the lock screen.
@@ -35,6 +45,18 @@ interface CallKeepModule {
   ) => void;
   endCall: (uuid: string) => void;
   endAllCalls: () => void;
+  startCall?: (
+    uuid: string,
+    handle: string,
+    contactIdentifier?: string,
+    handleType?: string,
+    hasVideo?: boolean
+  ) => void;
+  answerIncomingCall?: (uuid: string) => void;
+  reportConnectingOutgoingCallWithUUID?: (uuid: string) => void;
+  reportConnectedOutgoingCallWithUUID?: (uuid: string) => void;
+  reportEndCallWithUUID?: (uuid: string, reason: number) => void;
+  setMutedCall?: (uuid: string, muted: boolean) => void;
   addEventListener: (event: string, handler: (payload: any) => void) => void;
   removeEventListener: (event: string) => void;
   setAvailable?: (available: boolean) => void;
@@ -95,16 +117,32 @@ const toUuid = (seed: string): string => {
   ].join('-');
 };
 
+const trace = (...args: unknown[]) => {
+  if (__DEV__) {console.log('[calls] CallKit:', ...args);}
+};
+
 export const useCallKeep = (): void => {
   const dispatch = useDispatch();
   const call = useSelector((state: RootState) => state.call);
+  const session = useCallSession();
   const callKeep = useMemo(() => loadCallKeep(), []);
+  const [ready, setReady] = useState(false);
   const activeUuidRef = useRef<string | null>(null);
-  const readyRef = useRef(false);
+  // The CallKit call has been answered (from the system screen or in-app).
+  const answeredRef = useRef(false);
+  const outgoingReportedRef = useRef<'none' | 'connecting' | 'connected'>('none');
+  const isIOS = Platform.OS === 'ios';
 
   // One-time native setup.
   useEffect(() => {
-    if (!callKeep) {return;}
+    if (!callKeep) {
+      if (isIOS) {
+        // The usual reason for "no Dynamic Island": the JS package is there
+        // but the binary was built without the RNCallKeep pod.
+        trace('unavailable (react-native-callkeep is not linked in this build)');
+      }
+      return;
+    }
     let cancelled = false;
 
     (async () => {
@@ -113,6 +151,11 @@ export const useCallKeep = (): void => {
           ios: {
             appName: 'Ethora',
             supportsVideo: true,
+            maximumCallGroups: '1',
+            maximumCallsPerCallGroup: '1',
+            // Our calls are not phone calls: keep them out of the Phone
+            // app's Recents, whose entries would dial back into nowhere.
+            includesCallsInRecents: false,
           },
           android: {
             alertTitle: 'Permissions required',
@@ -130,28 +173,35 @@ export const useCallKeep = (): void => {
         });
         if (cancelled) {return;}
         callKeep.setAvailable?.(true);
-        readyRef.current = true;
-      } catch {
+        trace('ready');
+        setReady(true);
+      } catch (error) {
+        trace('setup failed', error);
         // Host didn't grant phone-account permission, or the module isn't
         // linked. The in-app ring screen still works, so stay quiet.
-        readyRef.current = false;
+        setReady(false);
       }
     })();
 
     return () => {
       cancelled = true;
     };
-  }, [callKeep]);
+  }, [callKeep, isIOS]);
 
-  // Bridge native answer/end actions back into Redux.
+  // Bridge native actions back into the call.
   useEffect(() => {
     if (!callKeep) {return;}
 
     const onAnswer = () => {
+      answeredRef.current = true;
       // The user answered from the system screen, which on Android may
       // mean the app was not even in the foreground.
       callKeep.backToForeground?.();
-      if (store.getState().call.direction === 'incoming') {
+      // Only from the ring: CallKit also reports the answer we make on its
+      // behalf after an in-app accept, and re-accepting then would drop an
+      // in-progress call back to 'connecting'.
+      const current = store.getState().call;
+      if (current.direction === 'incoming' && current.phase === 'ringing-incoming') {
         dispatch(acceptIncomingCall());
       }
     };
@@ -165,73 +215,198 @@ export const useCallKeep = (): void => {
       ) {
         sendCallStateSignal('declined');
         dispatch(declineIncomingCall());
+        return;
+      }
+      // Ended from the Dynamic Island, the lock screen or a headset.
+      if (snapshot.phase === 'error') {return;}
+      terminateActiveCall(snapshot.phase === 'requesting' ? 'cancelled' : 'ended');
+    };
+
+    // The system mute button (Dynamic Island, lock screen, CarPlay).
+    const onMuted = ({ muted }: { muted: boolean }) => {
+      void setCallMicEnabled(!muted);
+    };
+
+    // Another call (e.g. a phone call) put ours on hold: stop sending audio.
+    const onHold = ({ hold }: { hold: boolean }) => {
+      if (hold) {void setCallMicEnabled(false);}
+    };
+
+    // CallKit owns the iOS audio session: WebRTC may only start its audio
+    // unit once CallKit has activated the session.
+    const onAudioActivated = () => {
+      try {
+        loadLiveKit()?.RTCAudioSession?.audioSessionDidActivate?.();
+      } catch {
+        // Older webrtc builds manage the session on their own.
+      }
+    };
+    const onAudioDeactivated = () => {
+      try {
+        loadLiveKit()?.RTCAudioSession?.audioSessionDidDeactivate?.();
+      } catch {
+        // noop
       }
     };
 
     callKeep.addEventListener('answerCall', onAnswer);
     callKeep.addEventListener('endCall', onEnd);
+    callKeep.addEventListener('didPerformSetMutedCallAction', onMuted);
+    callKeep.addEventListener('didToggleHoldCallAction', onHold);
+    callKeep.addEventListener('didActivateAudioSession', onAudioActivated);
+    // CallKit rejected or dropped our calls (e.g. a build without the voip
+    // background mode): there is nothing to end any more.
+    const onReset = () => {
+      trace('provider reset');
+    };
+    callKeep.addEventListener('didResetProvider', onReset);
+    // The system's verdict on displayIncomingCall ("Unentitled" means the
+    // app lacks the voip background mode).
+    const onDisplayed = ({ error, errorCode }: { error?: string; errorCode?: string }) => {
+      trace('incoming call shown', error ? `failed: ${errorCode || ''} ${error}` : 'ok');
+      // CallKit refused it (Do Not Disturb, unentitled...): bring the
+      // in-app ring card back so the call can still be answered.
+      if (error) {setCallSystemRinging(false);}
+    };
+    callKeep.addEventListener('didDisplayIncomingCall', onDisplayed);
+    callKeep.addEventListener('didDeactivateAudioSession', onAudioDeactivated);
 
     return () => {
       callKeep.removeEventListener('answerCall');
       callKeep.removeEventListener('endCall');
+      callKeep.removeEventListener('didPerformSetMutedCallAction');
+      callKeep.removeEventListener('didToggleHoldCallAction');
+      callKeep.removeEventListener('didActivateAudioSession');
+      callKeep.removeEventListener('didDeactivateAudioSession');
+      callKeep.removeEventListener('didResetProvider');
+      callKeep.removeEventListener('didDisplayIncomingCall');
     };
   }, [callKeep, dispatch]);
 
-  // Show / dismiss the native screen as the call state changes.
+  const displayName = call.roomName || 'Ethora';
+  const isRinging =
+    call.direction === 'incoming' && call.phase === 'ringing-incoming';
+  const isLive = call.phase === 'connecting' || call.phase === 'in-call';
+  const isOutgoing = call.direction === 'outgoing';
+  const peerConnected = session.anchorAt !== null;
+
+  // Report the call to the system as its state changes.
   useEffect(() => {
-    if (!callKeep || !readyRef.current) {return;}
+    if (!callKeep || !ready) {return;}
 
-    const isRinging =
-      call.direction === 'incoming' && call.phase === 'ringing-incoming';
+    const release = () => {
+      if (!activeUuidRef.current) {return;}
+      try {
+        callKeep.endCall(activeUuidRef.current);
+      } catch {
+        // Screen already gone.
+      }
+      activeUuidRef.current = null;
+      answeredRef.current = false;
+      outgoingReportedRef.current = 'none';
+    };
 
-    if (isRinging && !activeUuidRef.current) {
+    if (call.phase === 'idle' || call.phase === 'error') {
+      release();
+      return;
+    }
+
+    if (isRinging) {
+      if (activeUuidRef.current) {return;}
       const uuid = toUuid(call.callId || call.roomJid || String(Date.now()));
       activeUuidRef.current = uuid;
+      answeredRef.current = false;
+      // iOS: the system banner is the ring UI (Telegram-style); the in-app
+      // card would only cover the screen under it.
+      if (isIOS) {setCallSystemRinging(true);}
       try {
         callKeep.displayIncomingCall(
           uuid,
-          call.peerXmppUsername || call.roomName || 'Ethora',
-          call.roomName || undefined,
+          displayName,
+          displayName,
           'generic',
           call.kind === 'video'
         );
       } catch {
         activeUuidRef.current = null;
+        setCallSystemRinging(false);
       }
       return;
     }
 
-    // Any exit from ringing (answered in-app, declined, peer cancelled)
-    // must tear the system screen down or it hangs around ringing.
-    if (!isRinging && activeUuidRef.current && call.phase !== 'connecting' && call.phase !== 'in-call') {
+    // iOS: an outgoing call is a CallKit call from the first ring, so it
+    // shows in the Dynamic Island even before the peer answers.
+    if (isIOS && isOutgoing && !activeUuidRef.current && callKeep.startCall) {
+      // Unique per call: CallKit refuses a UUID it has seen before, and
+      // the callId only arrives with the token.
+      const uuid = toUuid(`${call.roomJid || ''}|${call.startedAt || Date.now()}`);
+      activeUuidRef.current = uuid;
+      outgoingReportedRef.current = 'none';
+      trace('startCall', uuid);
       try {
-        callKeep.endCall(activeUuidRef.current);
+        callKeep.startCall(uuid, displayName, displayName, 'generic', call.kind === 'video');
       } catch {
-        // Screen already gone.
+        activeUuidRef.current = null;
       }
-      activeUuidRef.current = null;
+      return;
+    }
+
+    const uuid = activeUuidRef.current;
+    if (!uuid) {return;}
+
+    if (isIOS && isOutgoing) {
+      if (peerConnected && outgoingReportedRef.current !== 'connected') {
+        outgoingReportedRef.current = 'connected';
+        callKeep.reportConnectedOutgoingCallWithUUID?.(uuid);
+      } else if (
+        isLive &&
+        !peerConnected &&
+        outgoingReportedRef.current === 'none'
+      ) {
+        outgoingReportedRef.current = 'connecting';
+        callKeep.reportConnectingOutgoingCallWithUUID?.(uuid);
+      }
+      return;
     }
 
-    if (call.phase === 'idle' && activeUuidRef.current) {
+    // Incoming, accepted with the in-app button: tell CallKit, or its
+    // screen keeps ringing on top of the call.
+    if (isIOS && isLive && !answeredRef.current) {
+      answeredRef.current = true;
       try {
-        callKeep.endCall(activeUuidRef.current);
+        callKeep.answerIncomingCall?.(uuid);
       } catch {
         // noop
       }
-      activeUuidRef.current = null;
     }
   }, [
     callKeep,
-    call.direction,
+    ready,
+    isIOS,
+    isRinging,
+    isLive,
+    isOutgoing,
+    peerConnected,
+    displayName,
     call.phase,
     call.callId,
     call.roomJid,
-    call.roomName,
-    call.peerXmppUsername,
+    call.startedAt,
     call.kind,
   ]);
 
-  // Nothing to clean up on unmount beyond the active screen: this hook
+  // Keep the system mute button in step with ours.
+  useEffect(() => {
+    const uuid = activeUuidRef.current;
+    if (!callKeep || !ready || !isIOS || !uuid || !isLive) {return;}
+    try {
+      callKeep.setMutedCall?.(uuid, !session.micOn);
+    } catch {
+      // noop
+    }
+  }, [callKeep, ready, isIOS, isLive, session.micOn]);
+
+  // Nothing to clean up on unmount beyond the active call: this hook
   // lives for the lifetime of the provider.
   useEffect(
     () => () => {
@@ -245,8 +420,4 @@ export const useCallKeep = (): void => {
     },
     [callKeep]
   );
-
-  // iOS-only note kept as a runtime no-op so the import isn't unused when
-  // the platform check is tree-shaken in release builds.
-  void Platform.OS;
 };

package/src/components/VideoCalls/useOngoingCallNotification.ts

@@ -0,0 +1,113 @@
+import { useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../roomStore';
+import { useT } from '../../i18n/useT';
+import type {
+  OngoingCallNotification,
+  OngoingCallNotificationAction,
+} from '../../types/types';
+import { terminateActiveCall } from './callActions';
+import { toggleCallCamera, toggleCallMic, useCallSession } from './callSessionController';
+import { setCallMinimized } from './callUiStore';
+
+/**
+ * Drives the host's ongoing-call notification (`videoCalls.
+ * ongoingCallNotification`, an Android foreground-service notification in
+ * the Ethora app): shown while a call is connecting or connected, updated
+ * when the mic, camera or timer anchor change, and its buttons act on the
+ * call like the in-app ones.
+ */
+export const useOngoingCallNotification = (
+  adapter: OngoingCallNotification | undefined
+): void => {
+  const t = useT();
+  const call = useSelector((state: RootState) => state.call);
+  const session = useCallSession();
+  const shownRef = useRef(false);
+
+  const live =
+    !!call.token && (call.phase === 'connecting' || call.phase === 'in-call');
+
+  useEffect(() => {
+    if (!adapter) {return;}
+    return adapter.addActionListener((action: OngoingCallNotificationAction) => {
+      switch (action) {
+        case 'hangUp':
+          terminateActiveCall('ended');
+          break;
+        case 'toggleMic':
+          void toggleCallMic();
+          break;
+        case 'toggleCamera':
+          void toggleCallCamera();
+          break;
+        case 'open':
+          // Back from the notification: show the call, not the strip.
+          setCallMinimized(false);
+          break;
+      }
+    });
+  }, [adapter]);
+
+  const isVideo = call.kind === 'video';
+  const connectedAt = session.anchorAt;
+  const text =
+    connectedAt !== null
+      ? isVideo
+        ? t('call.notification.ongoingVideo')
+        : t('call.notification.ongoing')
+      : !session.connected
+        ? t('call.status.connecting')
+        : t('call.status.waitingForPeer');
+
+  useEffect(() => {
+    if (!adapter) {return;}
+    if (!live) {
+      if (shownRef.current) {
+        shownRef.current = false;
+        adapter.hide();
+      }
+      return;
+    }
+    shownRef.current = true;
+    adapter.show({
+      callId: call.callId || call.roomJid || 'call',
+      title: call.roomName || t('call.unknownCaller'),
+      text,
+      kind: call.kind,
+      connectedAt,
+      micOn: session.micOn,
+      cameraOn: isVideo && session.cameraOn,
+      labels: {
+        hangUp: t('call.action.hangUp'),
+        mute: t('call.notification.mute'),
+        unmute: t('call.notification.unmute'),
+        cameraOn: t('call.notification.cameraOn'),
+        cameraOff: t('call.notification.cameraOff'),
+      },
+    });
+  }, [
+    adapter,
+    live,
+    t,
+    text,
+    connectedAt,
+    isVideo,
+    call.callId,
+    call.roomJid,
+    call.roomName,
+    call.kind,
+    session.micOn,
+    session.cameraOn,
+  ]);
+
+  useEffect(
+    () => () => {
+      if (adapter && shownRef.current) {
+        shownRef.current = false;
+        adapter.hide();
+      }
+    },
+    [adapter]
+  );
+};

package/src/components/VideoCalls/usePipTile.ts

@@ -0,0 +1,214 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, LayoutChangeEvent, PanResponder } from 'react-native';
+
+/**
+ * The small video tile of a call, Telegram-style: drag it anywhere and it
+ * snaps to the nearest corner when released (a flick carries it towards
+ * the flick), pinch it to switch between a small and a large size.
+ *
+ * Positions are kept per corner rather than per pixel, so the tile stays
+ * glued to its corner when the stage changes size (rotation, iPad split
+ * view) or the tile itself changes size.
+ */
+
+export type PipTileSize = 'small' | 'large';
+
+export const PIP_TILE_SIZES: Record<PipTileSize, { width: number; height: number }> = {
+  small: { width: 104, height: 148 },
+  large: { width: 156, height: 222 },
+};
+
+const MARGIN = 12;
+// How far a flick carries the tile before picking a corner, in ms of velocity.
+const FLICK_PROJECTION_MS = 160;
+// Pinch past these ratios to change size; in between keeps the current one.
+const GROW_RATIO = 1.12;
+const SHRINK_RATIO = 0.9;
+
+interface Corner {
+  right: boolean;
+  bottom: boolean;
+}
+
+interface Stage {
+  width: number;
+  height: number;
+}
+
+const SPRING = { useNativeDriver: false, damping: 20, stiffness: 220, mass: 0.8 };
+
+const touchDistance = (touches: ReadonlyArray<{ pageX: number; pageY: number }>) => {
+  const [a, b] = touches;
+  return Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY);
+};
+
+export const usePipTile = ({ topInset = 0 }: { topInset?: number } = {}) => {
+  const [stage, setStage] = useState<Stage | null>(null);
+  const [size, setSize] = useState<PipTileSize>('small');
+  const stageRef = useRef<Stage | null>(null);
+  const sizeRef = useRef<PipTileSize>('small');
+  const cornerRef = useRef<Corner>({ right: true, bottom: false });
+  const topInsetRef = useRef(topInset);
+  topInsetRef.current = topInset;
+
+  const position = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const width = useRef(new Animated.Value(PIP_TILE_SIZES.small.width)).current;
+  const height = useRef(new Animated.Value(PIP_TILE_SIZES.small.height)).current;
+  const pinchScale = useRef(new Animated.Value(1)).current;
+  // Where the tile rests, i.e. where a drag starts from.
+  const restRef = useRef({ x: 0, y: 0 });
+  const gestureRef = useRef({ pinching: false, startDistance: 0, scale: 1 });
+
+  const cornerPoint = useCallback((corner: Corner, tileSize: PipTileSize) => {
+    const area = stageRef.current;
+    if (!area) {return { x: 0, y: 0 };}
+    const tile = PIP_TILE_SIZES[tileSize];
+    const top = MARGIN + topInsetRef.current;
+    return {
+      x: corner.right ? Math.max(MARGIN, area.width - tile.width - MARGIN) : MARGIN,
+      y: corner.bottom ? Math.max(top, area.height - tile.height - MARGIN) : top,
+    };
+  }, []);
+
+  const settle = useCallback(
+    (animated: boolean) => {
+      const tileSize = sizeRef.current;
+      const target = cornerPoint(cornerRef.current, tileSize);
+      const tile = PIP_TILE_SIZES[tileSize];
+      restRef.current = target;
+      if (!animated) {
+        position.setValue(target);
+        width.setValue(tile.width);
+        height.setValue(tile.height);
+        pinchScale.setValue(1);
+        return;
+      }
+      Animated.parallel([
+        Animated.spring(position, { ...SPRING, toValue: target }),
+        Animated.spring(width, { ...SPRING, toValue: tile.width }),
+        Animated.spring(height, { ...SPRING, toValue: tile.height }),
+        Animated.spring(pinchScale, { ...SPRING, toValue: 1 }),
+      ]).start();
+    },
+    [cornerPoint, position, width, height, pinchScale]
+  );
+
+  const onStageLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width: w, height: h } = event.nativeEvent.layout;
+      const prev = stageRef.current;
+      if (prev && prev.width === w && prev.height === h) {return;}
+      stageRef.current = { width: w, height: h };
+      setStage(stageRef.current);
+      settle(false);
+    },
+    [settle]
+  );
+
+  // The safe-area inset arrives after the first layout on some devices.
+  useEffect(() => {
+    if (stageRef.current) {settle(false);}
+  }, [topInset, settle]);
+
+  const panHandlers = useMemo(
+    () =>
+      PanResponder.create({
+        // Two fingers are always ours (pinch); one finger only once it
+        // moves, so a tap still reaches the tile's onPress (swap videos).
+        onStartShouldSetPanResponderCapture: (event) =>
+          event.nativeEvent.touches.length >= 2,
+        // Own the touch from the start when the tile has no tap target
+        // (nothing to swap): an ancestor outside the call Modal would take
+        // it otherwise, and the move-capture below would never be asked.
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponderCapture: (event, gesture) =>
+          event.nativeEvent.touches.length >= 2 ||
+          Math.abs(gesture.dx) > 4 ||
+          Math.abs(gesture.dy) > 4,
+        // Never hand the tile over to the swipe-to-minimize of the screen.
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: () => {
+          position.stopAnimation();
+          width.stopAnimation();
+          height.stopAnimation();
+          pinchScale.stopAnimation();
+          gestureRef.current = { pinching: false, startDistance: 0, scale: 1 };
+        },
+        onPanResponderMove: (event, gesture) => {
+          const touches = event.nativeEvent.touches;
+          const state = gestureRef.current;
+          if (touches.length >= 2) {
+            const distance = touchDistance(touches);
+            if (!state.pinching || state.startDistance <= 0) {
+              state.pinching = true;
+              state.startDistance = distance;
+            } else {
+              state.scale = Math.min(1.8, Math.max(0.6, distance / state.startDistance));
+              pinchScale.setValue(state.scale);
+            }
+          }
+          position.setValue({
+            x: restRef.current.x + gesture.dx,
+            y: restRef.current.y + gesture.dy,
+          });
+        },
+        onPanResponderRelease: (_event, gesture) => {
+          const area = stageRef.current;
+          const state = gestureRef.current;
+          if (state.pinching) {
+            const next: PipTileSize =
+              state.scale >= GROW_RATIO
+                ? 'large'
+                : state.scale <= SHRINK_RATIO
+                  ? 'small'
+                  : sizeRef.current;
+            if (next !== sizeRef.current) {
+              // Keep the size the finger left it at, then let the spring
+              // carry it to the new one, so the tile doesn't jump.
+              const from = PIP_TILE_SIZES[sizeRef.current];
+              width.setValue(from.width * state.scale);
+              height.setValue(from.height * state.scale);
+              pinchScale.setValue(1);
+              sizeRef.current = next;
+              setSize(next);
+            }
+          }
+          if (area) {
+            const tile = PIP_TILE_SIZES[sizeRef.current];
+            const centerX =
+              restRef.current.x + gesture.dx + gesture.vx * FLICK_PROJECTION_MS + tile.width / 2;
+            const centerY =
+              restRef.current.y + gesture.dy + gesture.vy * FLICK_PROJECTION_MS + tile.height / 2;
+            cornerRef.current = {
+              right: centerX > area.width / 2,
+              bottom: centerY > area.height / 2,
+            };
+          }
+          settle(true);
+        },
+        onPanResponderTerminate: () => settle(true),
+      }).panHandlers,
+    [position, width, height, pinchScale, settle]
+  );
+
+  return {
+    /** Put on the area the tile moves within. */
+    onStageLayout,
+    panHandlers,
+    size,
+    /** Hidden until the stage is measured, so it never flashes at 0,0. */
+    style: {
+      position: 'absolute' as const,
+      left: 0,
+      top: 0,
+      width,
+      height,
+      opacity: stage ? 1 : 0,
+      transform: [
+        { translateX: position.x },
+        { translateY: position.y },
+        { scale: pinchScale },
+      ],
+    },
+  };
+};