@ethora/chat-component-rn 26.5.7 → 26.5.10

package/src/context/xmppProvider.tsx

@@ -9,6 +9,7 @@ import React, {
   useState,
 } from 'react';
 import { AppState, DeviceEventEmitter } from 'react-native';
+import NetInfo from '@react-native-community/netinfo';
 import XmppClient, {
   XmppCredentialsProvider,
 } from '../networking/xmppClient';
@@ -21,6 +22,7 @@ import {
 } from '../types/types';
 import {
   buildXmppClientKey,
+  getGlobalXmppClient,
   getReusableXmppClientByKey,
   isXmppClientReusable,
   setGlobalXmppClient,
@@ -36,7 +38,13 @@ import { getRooms as prefetchRoomsViaRest } from '../networking/api-requests/roo
 import { allRoomPresences } from '../networking/xmpp/allRoomPresences.xmpp';
 import { store } from '../roomStore';
 import { logout, setStoreClient } from '../roomStore/chatSettingsSlice';
-import { setLogoutState } from '../roomStore/roomsSlice';
+import {
+  setLogoutState,
+  setVisibleRoom,
+  clearVisibleRoom,
+  setLastViewedTimestamp,
+  deleteRoomMessage,
+} from '../roomStore/roomsSlice';
 import { runHistoryPreloadScheduler } from '../helpers/historyPreloadScheduler';
 import { asyncLocalStorage } from '../hooks/useLocalStorage';
 import { localStorageConstants } from '../helpers/constants/LOCAL_STORAGE';
@@ -64,15 +72,18 @@ const XmppContext = createContext<XmppContextType | null>(null);
 interface XmppProviderProps {
   children: ReactNode;
   config?: IConfig;
+  // Consumer-supplied "is the chat surface shown" signal for hosts that
+  // keep <Chat> mounted while hidden (tab/route navigators). See the
+  // visibility effect below. Omit when you unmount <Chat> on hide.
+  isVisible?: boolean;
 }
 
 const LOGOUT_EVENT = 'ethora-xmpp-logout';
 
-export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config }) => {
+export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, isVisible }) => {
   const [client, setClient] = useState<XmppClient | null>(null);
   const [providerBootstrapStatus, setProviderBootstrapStatus] =
     useState<ProviderBootstrapStatus>('idle');
-  const [reconnectAttempts, setReconnectAttempts] = useState(0);
 
   // Track which "init mode" this provider runs in. When config.initBeforeLoad
   // is true, the provider owns bootstrap and ChatWrapper just waits.
@@ -181,6 +192,10 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
       // 3. Otherwise create a new client under the init lock to dedup
       //    concurrent calls for the same key.
       const created = await withXmppClientInitLock(key, async () => {
+        const prevGlobal = getGlobalXmppClient();
+        if (prevGlobal) {
+          try { await prevGlobal.close(); } catch {}
+        }
         const newClient = new XmppClient(username, password, settings);
         // Wire up the credentialsProvider so SASL `not-authorized`
         // after idle triggers a refresh chain (jwtLogin →
@@ -200,9 +215,30 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
       // may have changed since the singleton was created.
       created.setCredentialsProvider(credentialsProvider);
 
+      // Re-join MUC rooms on every 'online'. After a reconnect the new
+      // XMPP stream isn't a member of any room, so a sent message gets a
+      // local double-tick but never reaches the room (bug #21). Re-sending
+      // presence on reconnect fixes delivery. On the very first connect
+      // the room list isn't loaded yet so this joins nothing — the
+      // bootstrap's own allRoomPresences handles that pass.
+      created.setOnOnline(() => {
+        const underlying = (created as any).client;
+        if (!underlying) {return;}
+        allRoomPresences(underlying).catch((e) =>
+          devPushLog('warn', 'reconnect: allRoomPresences re-join failed', e)
+        );
+        // Also refresh the private store so unread / lastViewed markers
+        // are accurate after a long reconnect — the MUC re-join above only
+        // restores delivery, not unread state. Idempotent on first connect.
+        created
+          .getChatsPrivateStoreRequestStanza()
+          .catch((e: unknown) =>
+            devPushLog('warn', 'reconnect: privateStore refresh failed', e)
+          );
+      });
+
       setClient(created);
       lastCredsRef.current = { username, password, settings };
-      setReconnectAttempts(0);
       return created;
     },
     [client, config?.xmppSettings, credentialsProvider]
@@ -219,6 +255,30 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
 
     const abortController = new AbortController();
     let cancelled = false;
+    // Auto-retry a TRANSIENT bootstrap failure a few times with backoff
+    // before surfacing the error modal — a flaky network at launch should
+    // self-heal, not dead-end the user on a Retry button. (Bad-creds
+    // failures resolve to null below and fail fast — they never reach the
+    // catch, so they aren't retried.)
+    const MAX_BOOTSTRAP_ATTEMPTS = 3;
+    let bootstrapAttempt = 0;
+    // Overall time budget: if we never reach 'ready' (a step hangs), abort
+    // the in-flight work and fail so the loader can't spin forever.
+    const BOOTSTRAP_BUDGET_MS = 45000;
+    let reachedReady = false;
+    let budgetTimer: ReturnType<typeof setTimeout> | null = setTimeout(() => {
+      if (cancelled || reachedReady) {return;}
+      devPushLog('warn', 'initBeforeLoad: time budget exceeded → failed');
+      abortController.abort();
+      inflightBootstrapKeyRef.current = '';
+      setProviderBootstrapStatus('failed');
+    }, BOOTSTRAP_BUDGET_MS);
+    const clearBudget = () => {
+      if (budgetTimer) {
+        clearTimeout(budgetTimer);
+        budgetTimer = null;
+      }
+    };
 
     const run = async () => {
       // Stable bootstrap key — re-run only when these change.
@@ -332,6 +392,8 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
         store.dispatch(setStoreClient(c));
         completedBootstrapKeyRef.current = key;
         inflightBootstrapKeyRef.current = '';
+        reachedReady = true;
+        clearBudget();
         setProviderBootstrapStatus('ready');
         devPushLog('rn', 'initBeforeLoad: READY');
 
@@ -352,13 +414,34 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
           roomLimit: qos?.preloadTopKRooms,
         }).catch((err) => console.warn('History preload scheduler failed', err));
       } catch (error: any) {
-        if (cancelled) {return;}
-        devPushLog('error', 'initBeforeLoad: bootstrap threw', {
+        if (cancelled || abortController.signal.aborted) {return;}
+        bootstrapAttempt += 1;
+        // Throws here are transient (network / XMPP connect). A bad-creds
+        // failure resolves to null above and fails fast without throwing,
+        // so it never reaches this catch. Retry with backoff before the
+        // modal; release the in-flight key so the recursive run() isn't
+        // short-circuited by its own guard.
+        if (bootstrapAttempt < MAX_BOOTSTRAP_ATTEMPTS) {
+          const backoff = Math.min(8000, 1000 * 2 ** (bootstrapAttempt - 1));
+          devPushLog(
+            'rn',
+            `initBeforeLoad: attempt ${bootstrapAttempt} failed (${error?.message}); retrying in ${backoff}ms`
+          );
+          inflightBootstrapKeyRef.current = '';
+          setTimeout(() => {
+            if (!cancelled && !abortController.signal.aborted) {
+              run();
+            }
+          }, backoff);
+          return;
+        }
+        devPushLog('error', 'initBeforeLoad: bootstrap threw (giving up)', {
           message: error?.message,
           status: error?.response?.status,
           data: error?.response?.data,
         });
         inflightBootstrapKeyRef.current = '';
+        clearBudget();
         setProviderBootstrapStatus('failed');
       }
     };
@@ -367,6 +450,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
 
     return () => {
       cancelled = true;
+      clearBudget();
       abortController.abort();
       // Re-running this effect (deps changed or unmount) must release the
       // in-flight bootstrap key so the next render isn't permanently
@@ -396,29 +480,30 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
   ]);
 
   // -----------------------------------------------------------
-  // Reconnect / reinit on disconnect
+  // Reconnect watchdog. The client now owns reconnection (onDisconnect →
+  // scheduleReconnect with uncapped, clamped backoff; a connect 'error'
+  // reschedules too). This is the single provider-side safety net for the
+  // states the event-driven triggers miss: a stuck 'connecting', a connect
+  // 'error', or a server-side outage where NetInfo never reported the
+  // device offline. While foregrounded, if we're not provably online and
+  // not suppressed, force a reconnect (debounced inside forceReconnect).
+  //
+  // Replaces the old status-keyed reconnect effect, which keyed on
+  // `client.status` — a mutated class field React does NOT track — so on a
+  // silent socket drop it frequently never re-ran (and its 3-attempts-then-
+  // full-reinit path was effectively dead).
   // -----------------------------------------------------------
   useEffect(() => {
     if (!client) {return;}
-    if (client.status !== 'offline') {return;}
-
-    if (reconnectAttempts < 3) {
-      console.log(`xmpp reconnect attempt ${reconnectAttempts + 1}`);
-      client.scheduleReconnect();
-      setReconnectAttempts((prev) => prev + 1);
-      return;
-    }
-
-    // After 3 failed reconnects, drop the client and re-init from scratch.
-    if (lastCredsRef.current) {
-      const { username, password, settings } = lastCredsRef.current;
-      setGlobalXmppClient(null);
-      setClient(null);
-      initializeClient(username, password, settings).catch((err) =>
-        console.error('Full reinit failed:', err)
-      );
-    }
-  }, [client, client?.status, reconnectAttempts, initializeClient]);
+    const id = setInterval(() => {
+      if (AppState.currentState !== 'active') {return;}
+      if (client.status !== 'online' && !client.suppressReconnect) {
+        devPushLog('rn', `watchdog: client ${client.status} → forceReconnect`);
+        client.forceReconnect();
+      }
+    }, 30000);
+    return () => clearInterval(id);
+  }, [client]);
 
   // -----------------------------------------------------------
   // AppState → background: flush lastViewedTimestamp into the
@@ -433,22 +518,143 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
   // entry, or when this build has `disableLastRead`.
   // -----------------------------------------------------------
   useEffect(() => {
+    // Remembers the room that was visible when we backgrounded so it can
+    // be re-marked visible on return. Lives in the effect closure (one per
+    // client) — persists across the listener's many invocations.
+    let visibleBeforeBackground: string | null = null;
     const sub = AppState.addEventListener('change', (next) => {
-      if (next === 'active') {return;}
       const c = client;
+      if (next === 'active') {
+        // Returned to foreground. If the socket died while backgrounded
+        // (iOS suspends the WebSocket; long background kills it), the
+        // status may still read 'online' until xmpp.js notices the dead
+        // TCP — which can take a full timeout. Force an immediate
+        // reconnect when we're not provably online so cached UI gets
+        // live again fast instead of "100 years".
+        // Only force a reconnect from a genuinely dead state. Don't
+        // interrupt an in-progress 'connecting' (iOS delivers spurious
+        // inactive→active flaps for control-center / notifications /
+        // biometric prompts that would otherwise restart a healthy
+        // connect).
+        if (c && (c.status === 'offline' || c.status === 'error')) {
+          devPushLog('rn', `AppState active: client ${c.status} → forceReconnect`);
+          c.forceReconnect();
+        }
+        // Re-mark the previously-open room visible so its unread clears
+        // now that the user is looking again. We restore ONLY what was
+        // visible at background time, so a chat the consumer had already
+        // blurred (e.g. on a non-chat tab/route) correctly stays cleared.
+        if (visibleBeforeBackground) {
+          store.dispatch(setVisibleRoom({ roomJID: visibleBeforeBackground }));
+          visibleBeforeBackground = null;
+        }
+        return;
+      }
+      // Going to background/inactive (sleep / app switcher / tray):
       if (!c) {return;}
       const state = store.getState();
       const rooms = state.rooms?.rooms;
-      const activeRoomJID = state.rooms?.activeRoomJID || null;
+      const visibleRoomJID = state.rooms?.visibleRoomJID || null;
+      // Mark the open room "not visible" while backgrounded so messages
+      // that arrive (or MAM-replay on reconnect) count as unread instead
+      // of being silently treated as read — the "mounted == visible ==
+      // read" gap. Stamp lastViewed=now as the read baseline, clear
+      // visibility, then flush that marker to the server private store.
+      // Restored on the next 'active' transition above. Handled here in
+      // the provider so consumers using the component as a package get
+      // correct unread without reaching into the chat store themselves.
+      visibleBeforeBackground = visibleRoomJID;
+      if (visibleRoomJID) {
+        store.dispatch(
+          setLastViewedTimestamp({ chatJID: visibleRoomJID, timestamp: Date.now() })
+        );
+        // Drop the "New messages" divider for the room we're leaving so it
+        // doesn't linger when the user comes back (mirrors ChatRoom's
+        // unmount cleanup, which never runs while the pane stays mounted).
+        store.dispatch(
+          deleteRoomMessage({ roomJID: visibleRoomJID, messageId: 'delimiter-new' })
+        );
+        store.dispatch(clearVisibleRoom());
+      }
       // Fire-and-forget — we're going to the background and don't
       // care about the resolution path.
-      c.flushLastViewedToPrivateStoreStanza(rooms, { activeRoomJID }).catch(
+      c.flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID }).catch(
         () => {}
       );
     });
     return () => sub.remove();
   }, [client]);
 
+  // -----------------------------------------------------------
+  // Consumer visibility signal (`isVisible` prop). For hosts that keep
+  // <Chat> MOUNTED while hidden (tab/route navigators — so the XMPP
+  // connection survives tab switches), ChatRoom's mount/unmount can't tell
+  // "shown" from "hidden", so the unread middleware would keep the open
+  // room's badge at 0 and messages arriving while you're elsewhere look
+  // already-read. When the host passes `isVisible`, mirror the AppState
+  // background/foreground handling: hidden → stamp lastViewed=now + clear
+  // room visibility (so later messages count) + flush; shown → restore
+  // visibility for the open room. Doing it here means consumers never
+  // touch the chat store themselves. (Undefined = host unmounts on hide,
+  // nothing to do.)
+  // -----------------------------------------------------------
+  useEffect(() => {
+    if (typeof isVisible !== 'boolean') {return;}
+    const state = store.getState();
+    const rooms = state.rooms?.rooms;
+    const activeRoomJID = state.rooms?.activeRoomJID || null;
+    if (isVisible) {
+      if (activeRoomJID) {
+        store.dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
+      }
+    } else {
+      if (activeRoomJID) {
+        store.dispatch(
+          setLastViewedTimestamp({ chatJID: activeRoomJID, timestamp: Date.now() })
+        );
+        // Drop the "New messages" divider so it's gone when the user
+        // returns to the chat (mirrors ChatRoom's unmount cleanup).
+        store.dispatch(
+          deleteRoomMessage({ roomJID: activeRoomJID, messageId: 'delimiter-new' })
+        );
+      }
+      store.dispatch(clearVisibleRoom());
+      if (client?.flushLastViewedToPrivateStoreStanza) {
+        client
+          .flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID: activeRoomJID })
+          .catch(() => {});
+      }
+    }
+  }, [isVisible, client]);
+
+  // -----------------------------------------------------------
+  // NetInfo → proactive reconnect on network restore. Without this the
+  // only reconnect trigger is xmpp.js noticing the socket is dead, which
+  // on a Wi-Fi/cellular drop can hang on the TCP timeout for tens of
+  // seconds. NetInfo tells us the instant connectivity returns so we can
+  // force a reconnect immediately (and reset the backoff budget).
+  // -----------------------------------------------------------
+  useEffect(() => {
+    if (!client) {return;}
+    const unsub = NetInfo.addEventListener((state) => {
+      // Guard against undefined/partial state (jest mock, early emit).
+      const reachable =
+        !!state?.isConnected && state?.isInternetReachable !== false;
+      if (!reachable) {return;}
+      // Reachable. If we're in a dead state, kick a reconnect — do NOT
+      // require a prior offline→online transition (a missed/coalesced
+      // offline event otherwise left us stuck offline forever). Skip
+      // 'connecting' so we don't interrupt an in-progress connect; the
+      // watchdog covers a stuck 'connecting'. forceReconnect() debounces
+      // bursts and resets the backoff itself.
+      if (client.status === 'offline' || client.status === 'error') {
+        devPushLog('rn', `NetInfo: reachable & client ${client.status} → forceReconnect`);
+        client.forceReconnect();
+      }
+    });
+    return () => unsub();
+  }, [client]);
+
   // -----------------------------------------------------------
   // Retry-bootstrap listener — fired by ChatWrapper's error modal so
   // a transient failure (bad endpoint, server hiccup, etc.) can be
@@ -479,7 +685,6 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
       setClient(null);
       completedBootstrapKeyRef.current = '';
       inflightBootstrapKeyRef.current = '';
-      setReconnectAttempts(0);
       setProviderBootstrapStatus('idle');
       await clearPersistedState();
     });
@@ -506,6 +711,18 @@ export const useXmppClient = () => {
   if (!context) {
     throw new Error('useXmppClient must be used within an XmppProvider');
   }
+  if (!context.client) {
+    const candidates: Array<XmppClient | null | undefined> = [
+      getGlobalXmppClient(),
+      store.getState()?.chatSettingStore?.client as XmppClient | undefined,
+    ];
+    const live = candidates.find(
+      (c) => c && (c as any).status === 'online'
+    );
+    if (live) {
+      return { ...context, client: live };
+    }
+  }
   return context;
 };
 

package/src/helpers/chatAutoEnterer.ts

@@ -2,6 +2,7 @@
 
 import { AppDispatch } from '../roomStore';
 import { setCurrentRoom } from '../roomStore/roomsSlice';
+import { normalizeRoomJid } from './normalizeRoomJid';
 
 interface XmppConfig {
   xmppSettings?: {
@@ -25,15 +26,8 @@ export const chatAutoEnterer = ({
   console.log('🟡 chatAutoEnterer: Called', { roomJID, wasAutoSelected });
 
   if (roomJID) {
-    // If roomJID is already a full JID, use it directly
-    // Otherwise, construct it from chatId if needed
     const conferenceDomain = config.xmppSettings?.conference ?? '';
-    let finalRoomJID = roomJID;
-
-    if (!roomJID.includes('@') && conferenceDomain) {
-      finalRoomJID = `${roomJID}@${conferenceDomain}`;
-      console.log('🟡 chatAutoEnterer: Constructed roomJID', finalRoomJID);
-    }
+    const finalRoomJID = normalizeRoomJid(roomJID, conferenceDomain);
 
     console.log('🟡 chatAutoEnterer: Setting current room', finalRoomJID);
     dispatch(setCurrentRoom({ roomJID: finalRoomJID }));

package/src/helpers/historyPreloadScheduler.ts

@@ -25,7 +25,10 @@ interface QueueItem {
 }
 
 const DEFAULT_CONCURRENCY = 3;
-const DEFAULT_PAGE_SIZE = 10;
+// Fetch the most recent ~20 on re-entry (mirrors web). A larger first page
+// also means more id-overlap with cache, so the merge in
+// `mergeHistoryIntoCache` rarely has to fall back to clear-and-replace.
+const DEFAULT_PAGE_SIZE = 20;
 const DEFAULT_RETRY_LIMIT = 2;
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

package/src/helpers/insertMessageWithDelimiter.ts

@@ -29,10 +29,21 @@ export function insertMessageWithDelimiter(
   );
 
   if (existingIndex !== -1) {
-    roomMessages[existingIndex] = deepMerge(
-      { ...roomMessages[existingIndex] },
-      { ...message, pending: false }
-    );
+    const existing = roomMessages[existingIndex];
+    // Preserve the sender identity captured on first insert. The MUC echo
+    // parses user.id from the stanza's `from`/senderJID (the room nick or
+    // bare-jid local part), which often differs from the optimistic
+    // sender id (xmppUsername / walletAddress) set when WE sent it.
+    // deepMerge would overwrite it, flipping an own message to the "other"
+    // side (rendered on the left, "as if someone else wrote it"). Keep the
+    // original id so ownership (user.id === self) stays correct.
+    const preservedUserId =
+      (existing as any)?.user?.id || (message as any)?.user?.id;
+    const merged = deepMerge({ ...existing }, { ...message, pending: false });
+    if (merged.user && preservedUserId) {
+      merged.user.id = preservedUserId;
+    }
+    roomMessages[existingIndex] = merged;
     return;
   }
 
@@ -60,25 +71,21 @@ export function insertMessageWithDelimiter(
         isDateAfter(msg.date?.toString() ?? '', lastViewedTimestamp.toString())
       );
 
-      if (delimiterIndex !== -1) {
-        roomMessages.splice(delimiterIndex, 0, {
-          id: 'delimiter-new',
-          user: {
+        if (delimiterIndex !== -1) {
+          roomMessages.splice(delimiterIndex, 0, {
+            id: 'delimiter-new',
+            user: {
             id: 'system',
             name: undefined,
             token: '',
             refreshToken: '',
           },
           date: new Date().toString(),
-          body: 'New Messages',
-          roomJid: '',
-        });
-
-        if (lastViewedTimestamp.toString() === '0') {
-          roomMessages.splice(delimiterIndex, 1);
+            body: 'New Messages',
+            roomJid: '',
+          });
         }
       }
-    }
   } else if (
     isDateBefore(newMessageDate.toString(), firstMessage?.date?.toString() ?? '')
   ) {

package/src/helpers/keyboardLayout.ts

@@ -0,0 +1,18 @@
+type KeyboardLayoutArgs = {
+  platform: string;
+  configuredOffset?: number;
+  bottomInset?: number;
+};
+
+export const getKeyboardVerticalOffset = ({
+  platform,
+  configuredOffset = 0,
+  bottomInset = 0,
+}: KeyboardLayoutArgs): number =>
+  configuredOffset + (platform === 'ios' ? bottomInset : 0);
+
+export const getInputDockPaddingBottom = ({
+  platform,
+  bottomInset = 0,
+}: Omit<KeyboardLayoutArgs, 'configuredOffset'>): number =>
+  platform === 'ios' ? bottomInset : 0;

package/src/helpers/mediaDimensions.ts

@@ -0,0 +1,47 @@
+import { Dimensions } from 'react-native';
+
+// Shared sizing for inline media bubbles (images + video posters).
+// Goal: show the media UNCROPPED, just scaled, preserving aspect ratio —
+// portrait stays portrait, landscape stays landscape.
+const screenW = Dimensions.get('window').width;
+
+// Box the media must fit inside. Width adapts to the screen so it never
+// blows past the bubble's max-width on small phones, but caps on tablets.
+export const MEDIA_MAX_W = Math.min(260, Math.round(screenW * 0.64));
+export const MEDIA_MAX_H = 320;
+// Keep thumbnails from collapsing into a sliver (very wide/tall media).
+const MEDIA_MIN_W = 140;
+const MEDIA_MIN_H = 120;
+
+export interface MediaDims {
+  width: number;
+  height: number;
+}
+
+// Neutral 4:3 placeholder used before the natural size is known.
+export const defaultMediaDims = (): MediaDims => ({
+  width: MEDIA_MAX_W,
+  height: Math.round(MEDIA_MAX_W * 0.75),
+});
+
+// Fit (natW × natH) inside the box, preserving aspect ratio. Never
+// upscales beyond the source resolution (avoids blur), but bumps very
+// small media up to a sensible minimum so it stays tappable.
+export const fitMediaDimensions = (natW: number, natH: number): MediaDims => {
+  if (!natW || !natH) {
+    return defaultMediaDims();
+  }
+  let scale = Math.min(MEDIA_MAX_W / natW, MEDIA_MAX_H / natH);
+  if (scale > 1) {
+    scale = 1;
+  }
+  let width = Math.round(natW * scale);
+  let height = Math.round(natH * scale);
+
+  if (width < MEDIA_MIN_W || height < MEDIA_MIN_H) {
+    const up = Math.max(MEDIA_MIN_W / width, MEDIA_MIN_H / height);
+    width = Math.min(MEDIA_MAX_W, Math.round(width * up));
+    height = Math.min(MEDIA_MAX_H, Math.round(height * up));
+  }
+  return { width, height };
+};

package/src/helpers/normalizeRoomJid.ts

@@ -0,0 +1,6 @@
+export const normalizeRoomJid = (roomJID: string, conference?: string) => {
+  if (!roomJID) {return roomJID;}
+  if (roomJID.includes('@')) {return roomJID;}
+  if (!conference) {return roomJID;}
+  return `${roomJID}@${conference}`;
+};

package/src/hooks/useChatRoomFocus.ts

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  clearVisibleRoom,
+  setCurrentRoom,
+  setLastViewedTimestamp,
+  setVisibleRoom,
+} from '../roomStore/roomsSlice';
+import { store } from '../roomStore';
+
+interface UseChatRoomFocusOptions {
+  /** The room JID that the consumer's tab/screen is currently showing. */
+  roomJID: string | null | undefined;
+  /**
+   * Whether the chat tab/screen is currently focused. In tab-based
+   * navigators where `<ChatRoom>` never unmounts, the SDK can't tell
+   * "user is looking at this tab" from "user is on a different tab"
+   * — pass this from `useFocusEffect` (React Navigation) or a similar
+   * focus signal so the unread counter clears on focus and starts
+   * counting again on blur.
+   */
+  isFocused: boolean;
+}
+
+/**
+ * Public hook for consumers embedding `<ChatRoom>` inside a tab-based
+ * navigator. Mirrors the mount/unmount unread-tracking that ChatRoom
+ * does internally — but driven by an explicit focus signal so the
+ * unread counter behaves correctly when the chat tab is not focused
+ * but the component is still mounted.
+ *
+ * Without this hook, `useUnread()` will always return 0 for the chat
+ * room because the SDK assumes "mounted == active". With this hook,
+ * focus marks the room visible (clearing the badge) and blur stamps
+ * `lastViewedTimestamp = Date.now()` so future messages count as unread.
+ *
+ * Usage with React Navigation:
+ *
+ * ```tsx
+ * import { useIsFocused } from '@react-navigation/native';
+ *
+ * function ChatTab() {
+ *   const isFocused = useIsFocused();
+ *   useChatRoomFocus({ roomJID: 'general@conference.host', isFocused });
+ *   return <Chat config={...} />;
+ * }
+ * ```
+ *
+ * Bug #18-adjacent / unread-tracking bug from sdk-bug-tracker.md.
+ */
+export const useChatRoomFocus = ({
+  roomJID,
+  isFocused,
+}: UseChatRoomFocusOptions) => {
+  const dispatch = useDispatch();
+  const prevRef = useRef<{ roomJID: string | null; isFocused: boolean }>({
+    roomJID: null,
+    isFocused: false,
+  });
+
+  const leaveRoom = (jid: string) => {
+    const timestamp = Date.now();
+    dispatch(setLastViewedTimestamp({ chatJID: jid, timestamp }));
+    dispatch(clearVisibleRoom());
+    const rooms = store.getState().rooms?.rooms;
+    (store.getState().chatSettingStore as any)?.client
+      ?.flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID: jid })
+      .catch(() => {});
+  };
+
+  useEffect(() => {
+    const prev = prevRef.current;
+    if (prev.isFocused && prev.roomJID && (prev.roomJID !== roomJID || !isFocused)) {
+      leaveRoom(prev.roomJID);
+    }
+
+    if (roomJID && isFocused) {
+      dispatch(setCurrentRoom({ roomJID }));
+      dispatch(setVisibleRoom({ roomJID }));
+    }
+
+    prevRef.current = { roomJID: roomJID || null, isFocused };
+  }, [roomJID, isFocused, dispatch]);
+
+  useEffect(() => {
+    return () => {
+      const prev = prevRef.current;
+      if (prev.isFocused && prev.roomJID) {
+        leaveRoom(prev.roomJID);
+      }
+    };
+  }, []);
+};
+
+export default useChatRoomFocus;