@ethora/chat-component-rn 26.7.5 → 26.7.7

package/src/components/Modals/UserSettingsModal/UserSettingsModal.tsx

@@ -1,18 +1,16 @@
-import React, { useCallback, useMemo } from 'react';
+/** @format */
 
-import {
-  ModalContainerFullScreen,
-  Viewider,
-  Label,
-  LabelData,
-  BorderedContainer,
-  CenterContainer,
-} from '../styledModalComponents';
-import ModalHeaderComponent from '../ModalHeaderComponent';
-import Button from '../../styled/Button';
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useDispatch } from 'react-redux';
+import { ModalContainerFullScreen } from '../styledModalComponents';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { ArowDownIcon } from '../../../assets/icons';
 import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { chatTextStyle } from '../../../helpers/typography';
+import { useT } from '../../../i18n/useT';
 
 interface UserSettingsModalProps {
   handleCloseModal: any;
@@ -21,65 +19,84 @@ interface UserSettingsModalProps {
 const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
   handleCloseModal,
 }) => {
+  const t = useT();
+  const dispatch = useDispatch();
+  const { config } = useChatSettingState();
+
   const options = useMemo(
     () => [
-      { value: 'Manage Data', key: MODAL_TYPES.MANAGE_DATA },
-      { value: 'Visiblility', key: MODAL_TYPES.VISIBILITY },
-      // { value: 'Profile Shares', key: MODAL_TYPES.PROFILE_SHARES },
-      // { value: 'Document Shares', key: MODAL_TYPES.DOCUMENT_SHARES },
-      // { value: 'Blocked Users', key: MODAL_TYPES.BLOCKED_USERS },
-      // { value: 'Referrals', key: MODAL_TYPES.REFERRALS },
+      { label: t('settings.manageData.title'), key: MODAL_TYPES.MANAGE_DATA },
+      { label: t('settings.visibility.title'), key: MODAL_TYPES.VISIBILITY },
     ],
-    []
+    [t]
   );
 
-  const dispatch = useDispatch();
-
-  const handleClick = useCallback((key: string) => {
-    dispatch(setActiveModal(key as any));
-  }, []);
+  const handleClick = useCallback(
+    (key: string) => {
+      dispatch(setActiveModal(key as any));
+    },
+    [dispatch]
+  );
 
   return (
-    <ModalContainerFullScreen>
+    <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={'Settings'}
+        headerTitle={t('settings.menu.title')}
+        titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
       />
-      <CenterContainer>
-        <BorderedContainer
-          style={{
-            padding: 16,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-          }}
-        >
-          {options.map((option: { value: string; key: string }, index) => (
-            <>
-              <Button
-                variant="default"
-                style={{
-                  minHeight: 40,
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 2,
-                  width: '100%',
-                  justifyContent: 'center',
-                  borderRadius: 0,
-                  alignItems: 'flex-start',
-                }}
-                onPress={() => handleClick(option.key)}
-              >
-                <Label style={{ textAlign: 'center' }}>{option.value}</Label>
-                {[2, 3, 4].includes(index) && <LabelData>0</LabelData>}
-              </Button>
-              {index < 5 && <Viewider />}
-            </>
-          ))}
-        </BorderedContainer>
-      </CenterContainer>
+      {/* One card per entry, rather than a single bordered block with
+        * hairline dividers — the rows are separate destinations, and the
+        * design gives each its own surface. */}
+      <View style={styles.body}>
+        {options.map((option) => (
+          <TouchableOpacity
+            key={option.key}
+            testID={`settings-row-${option.key}`}
+            activeOpacity={0.7}
+            style={styles.card}
+            onPress={() => handleClick(option.key)}
+          >
+            <Text style={styles.label}>{option.label}</Text>
+            <ArowDownIcon color="#8C8C8C" width={20} height={20} style={styles.chevron} />
+          </TouchableOpacity>
+        ))}
+      </View>
     </ModalContainerFullScreen>
   );
 };
 
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#E8EDF2',
+  },
+  body: {
+    width: '100%',
+    padding: 12,
+    gap: 12,
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 22,
+    shadowColor: '#101828',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.06,
+    shadowRadius: 12,
+    elevation: 3,
+  },
+  label: {
+    fontSize: 17,
+    fontWeight: '500',
+    color: '#141414',
+  },
+  chevron: {
+    transform: [{ rotate: '-90deg' }],
+  },
+});
+
 export default UserSettingsModal;

package/src/components/Modals/styledModalComponents.tsx

@@ -86,8 +86,15 @@ export const HeaderContainer = styled.View`
    * button and 8px below — properly sized and properly centered. */
   padding: 8px 16px;
   background-color: #fff;
-  border-bottom-width: 1px;
-  border-bottom-color: #f0f0f0;
+  /* Same card treatment as the room-list header: rounded bottom corners
+   * and a soft drop shadow instead of a hairline rule. */
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  shadow-color: #101828;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.06;
+  shadow-radius: 12px;
+  elevation: 4;
   z-index: 1;
   flex-direction: row;
   justify-content: space-between;

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -90,11 +90,13 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
 
   return (
     <ChatItem key={index}>
-      <ProfileImagePlaceholder
-        name={displayName}
-        icon={appendFileToken(chat?.icon, fileToken)}
-        active={false}
-      />
+      <View pointerEvents="none">
+        <ProfileImagePlaceholder
+          name={displayName}
+          icon={appendFileToken(chat?.icon, fileToken)}
+          active={false}
+        />
+      </View>
       <View
         style={{
           flexDirection: 'column',
@@ -104,7 +106,9 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           paddingVertical: 8,
           paddingRight: 8,
           borderBottomWidth: 1,
-          borderBottomColor: '#F0F0F0',
+          // Reads against the list's #E8EDF2 ground; #F0F0F0 was lighter
+          // than the ground itself, so the row separators vanished.
+          borderBottomColor: '#C6CFDA',
         }}
       >
         <View
@@ -215,8 +219,11 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
           ) : null}
         </View>
         {isDriver && (
+          // Darker than the list's own ground (#E8EDF2), otherwise the
+          // separator disappears into it — white and the old #0052CD0D
+          // hairline both did.
           <View
-            style={{ height: 1, backgroundColor: '#0052CD0D', marginTop: 8 }}
+            style={{ height: 1, backgroundColor: '#C6CFDA', marginTop: 8 }}
           />
         )}
       </View>

package/src/components/styled/SendInput.tsx

@@ -10,14 +10,16 @@ import { IConfig, MediaFile } from '../../types/types';
 import Button from './Button';
 import { SendIcon, AttachIcon, RecordIcon } from '../../assets/icons';
 import { KeyboardAvoidingView, Platform, View, Text, TouchableOpacity, Alert, Linking } from 'react-native';
-import AttachSheet from '../Modals/AttachSheet/AttachSheet';
+import AttachSheet, { PickedMedia } from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getElementFont } from '../../helpers/getElementFont';
 import { useT } from '../../i18n/useT';
+import { getMediaLibrary } from '../../helpers/mediaLibraryRuntime';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
+import * as FileSystem from 'expo-file-system/legacy';
 // expo-audio replaces the discontinued expo-av: `useAudioRecorder` owns a
 // single reusable recorder for this input's lifetime (prepare → record →
 // stop → prepare again), and the module-level helpers cover permissions
@@ -259,22 +261,59 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
+  // A tap on a thumbnail in the attach sheet's recents strip. The sheet
+  // already resolved the asset to a real on-disk uri (iOS `ph://` ids are
+  // not uploadable); here we apply the same treatment the full-blown
+  // pickers get — HEIC→JPEG for images, and a size probe so the 50 MB cap
+  // is enforced before anything hits the network.
+  const handleRecentMediaSelection = async (media: PickedMedia) => {
+    try {
+      let size: number | undefined;
+      try {
+        const info = await FileSystem.getInfoAsync(media.uri);
+        if (info.exists && typeof (info as any).size === 'number') {
+          size = (info as any).size;
+        }
+      } catch {
+        // Size is a nice-to-have; the backend still rejects oversized bodies.
+      }
+
+      if (media.isVideo) {
+        handleFileSelect([
+          {
+            uri: media.uri,
+            type: media.mimeType || 'video/mp4',
+            name: media.name,
+            size,
+          },
+        ]);
+        return;
+      }
+
+      const normalized = await normalizeImageAsset({
+        uri: media.uri,
+        mimeType: media.mimeType,
+        fileName: media.name,
+      } as ImagePicker.ImagePickerAsset);
+      handleFileSelect([
+        {
+          uri: normalized.uri,
+          type: normalized.mime,
+          name: normalized.name,
+          size,
+        },
+      ]);
+    } catch (error) {
+      console.error('Recent media error:', error);
+    }
+  };
+
   const handleFileSelection = async () => {
     // Drop overlapping invocations — a second getDocumentAsync while the
     // first is still presented throws PickingInProgressException on iOS.
     if (pickingDocRef.current) {return;}
     pickingDocRef.current = true;
     try {
-      // Let the attach-sheet's modal finish its NATIVE dismissal before we
-      // present the picker. The sheet fires this handler right after its
-      // slide-out animation, but the underlying RN Modal view-controller
-      // dismissal is async — presenting the document picker over a still-
-      // dismissing modal makes iOS tear it down without a cancel callback,
-      // which strands expo-document-picker's pickingContext and makes every
-      // subsequent open throw "Different document picking in progress".
-      if (Platform.OS === 'ios') {
-        await new Promise((resolve) => setTimeout(resolve, 350));
-      }
       const result = await DocumentPicker.getDocumentAsync({
         type: '*/*',
         multiple: false,
@@ -297,8 +336,39 @@ const SendInput: React.FC<SendInputProps> = ({
     }
   };
 
+  // Photo-library access is requested HERE, not inside the sheet: iOS
+  // cannot present the permission alert while an RN <Modal> owns the
+  // screen (the same UIKit limitation that used to swallow the pickers),
+  // so asking from inside resolved to a silent "denied" and the recents
+  // strip stayed empty forever. Asking on the paperclip tap puts the
+  // system alert over the plain chat screen, where it can actually show.
+  // Only the first tap ever waits on it — afterwards the status is
+  // already determined and `getPermissionsAsync` returns immediately.
+  const ensureLibraryPermission = async () => {
+    const MediaLibrary = getMediaLibrary();
+    if (!MediaLibrary?.getPermissionsAsync) {return;}
+    try {
+      const perm = await MediaLibrary.getPermissionsAsync();
+      if (perm?.granted || perm?.canAskAgain === false) {return;}
+      await MediaLibrary.requestPermissionsAsync();
+    } catch (err) {
+      // Optional peer / unsupported platform: the sheet just shows the
+      // camera tile and the full-library route.
+      console.warn('Media library permission check failed:', err);
+    }
+  };
+
+  // Only the very first tap of a session goes through the permission
+  // check; afterwards the sheet opens with zero added latency.
+  const libraryPermissionCheckedRef = useRef(false);
+
   const handleAttachPress = () => {
-    setShowMediaMenu(true);
+    if (libraryPermissionCheckedRef.current) {
+      setShowMediaMenu(true);
+      return;
+    }
+    libraryPermissionCheckedRef.current = true;
+    ensureLibraryPermission().finally(() => setShowMediaMenu(true));
   };
 
   // ─── Voice recording ──────────────────────────────────────────────
@@ -702,6 +772,7 @@ const SendInput: React.FC<SendInputProps> = ({
           onCamera={handleCameraSelection}
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
+          onPickMedia={handleRecentMediaSelection}
           primaryColor={getIconColor(config)}
         />
       </InputContainer>

package/src/components/styled/StyledComponents.ts

@@ -28,9 +28,15 @@ export const ChatContainerHeader = styled.View`
   background-color: #ffffff;
   align-items: center;
   justify-content: space-between;
-  border-bottom-width: 1px;
-  border-bottom-color: #e5e7eb;
-  border-style: solid;
+  /* Rounded bottom corners + a soft drop shadow instead of the hairline
+   * rule, so the header reads as a card over the conversation. */
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  shadow-color: #101828;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.06;
+  shadow-radius: 12px;
+  elevation: 4;
   z-index: 1000;
 `;
 

package/src/components/styled/StyledInputComponents/StyledInputComponents.tsx

@@ -13,14 +13,21 @@ const colors = {
 
 export const InputContainer = styled.View<{ isText?: boolean }>`
   flex-direction: column;
-  padding: 8px 16px 4px 16px;
-  background-color: ${colors.white};
+  padding: 12px 16px 8px 16px;
+  /* Transparent, so the dock's white surface — and its rounded top
+   * corners — are what shows. An opaque child painted straight over those
+   * corners (a parent's border radius does not clip children without
+   * overflow:hidden, and that would clip the dock's shadow too). */
+  background-color: transparent;
   z-index: 100;
   width: 100%;
   bottom: 0;
   left: 0;
-  border-top-width: 1px;
-  border-top-color: #e5e7eb;
+  /* No radius or shadow here: the dock this sits in (ChatRoom's
+   * InputDockTag) is the composer's outer surface and carries both. Having
+   * them on this inner view too drew its shadow onto the dock's white
+   * background — the faint seam that made the strip below look like a
+   * different colour. */
 `;
 
 export const MediaContainer = styled.View`

package/src/context/xmppProvider.tsx

@@ -37,6 +37,7 @@ import {
 import { ensureScopedChatCache } from '../helpers/ensureScopedChatCache';
 import { getRooms as prefetchRoomsViaRest } from '../networking/api-requests/rooms.api';
 import { allRoomPresences } from '../networking/xmpp/allRoomPresences.xmpp';
+import { pushSubscriptionService } from '../services/pushSubscriptionService';
 import { store } from '../roomStore';
 import { logout, setStoreClient, setConfig } from '../roomStore/chatSettingsSlice';
 import {
@@ -83,6 +84,16 @@ interface XmppProviderProps {
 
 const LOGOUT_EVENT = 'ethora-xmpp-logout';
 
+const subscribeAllRoomsForPush = (client: any, reason: string) => {
+  const rooms = Object.keys(store.getState().rooms.rooms || {});
+  if (!client || !rooms.length) {return;}
+  const nick = client.jid?.getLocal();
+  pushSubscriptionService
+    .subscribeToRooms(client, rooms, nick)
+    .then(() => devPushLog('xmpp', `${reason}: mucsub ok for ${rooms.length} rooms`))
+    .catch((e) => devPushLog('warn', `${reason}: mucsub subscribe failed`, e));
+};
+
 export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, isVisible }) => {
   const [client, setClient] = useState<XmppClient | null>(null);
   const [providerBootstrapStatus, setProviderBootstrapStatus] =
@@ -115,7 +126,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       //    the shared rotation point covers both the consumer-supplied
       //    function and the built-in endpoint.
       if (config?.refreshTokens?.enabled) {
-        const rotated = await refreshAuthTokensQuietly();
+        const rotated = await refreshAuthTokensQuietly({ force: true });
 
         if (rotated?.xmppPassword) {
           const rotatedUser = store.getState().chatSettingStore.user;
@@ -229,9 +240,11 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       created.setOnOnline(() => {
         const underlying = (created as any).client;
         if (!underlying) {return;}
-        allRoomPresences(underlying).catch((e) =>
-          devPushLog('warn', 'reconnect: allRoomPresences re-join failed', e)
-        );
+        allRoomPresences(underlying)
+          .catch((e) =>
+            devPushLog('warn', 'reconnect: allRoomPresences re-join failed', e)
+          )
+          .finally(() => subscribeAllRoomsForPush(underlying, 'reconnect'));
         // 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.
@@ -384,7 +397,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         // jwtLogin is skipped: /users/client just minted fresh creds.
         let connectPassword = resolved.xmppPassword;
         if (config?.refreshTokens?.enabled && !config?.jwtLogin?.enabled) {
-          const rotated = await refreshAuthTokensQuietly();
+          const rotated = await refreshAuthTokensQuietly({ force: true });
           if (cancelled) {return;}
           if (rotated?.xmppPassword) {
             connectPassword = rotated.xmppPassword;
@@ -436,6 +449,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         } catch (e) {
           devPushLog('warn', 'initBeforeLoad: allRoomPresences failed', e);
         }
+        subscribeAllRoomsForPush((c as any).client, 'initBeforeLoad');
 
         store.dispatch(setStoreClient(c));
         completedBootstrapKeyRef.current = key;
@@ -557,9 +571,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         devPushLog('rn', `watchdog: client ${client.status} → forceReconnect`);
         client.forceReconnect();
       } else {
-        // The periodic health check is the probe's primary owner, so it
-        // bypasses the throttle that keeps send-path probes rare.
-        client.ensureStreamAlive?.({ force: true, reason: 'watchdog' });
+        client.ensureStreamAlive?.();
       }
     }, 30000);
     return () => clearInterval(id);
@@ -582,9 +594,14 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
     // 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 suspendInBackground = !config?.xmppSettings?.keepAliveInBackground;
     const sub = AppState.addEventListener('change', (next) => {
       const c = client;
       if (next === 'active') {
+        if (c?.isSuspended) {
+          devPushLog('rn', 'AppState active: resuming suspended XMPP client');
+          c.resume();
+        }
         // 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
@@ -612,6 +629,9 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       }
       // Going to background/inactive (sleep / app switcher / tray):
       if (!c) {return;}
+      if (next === 'background' && suspendInBackground) {
+        c.suspend().catch(() => undefined);
+      }
       const state = store.getState();
       const rooms = state.rooms?.rooms;
       const visibleRoomJID = state.rooms?.visibleRoomJID || null;
@@ -624,19 +644,9 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       // the provider so consumers using the component as a package get
       // correct unread without reaching into the chat store themselves.
       visibleBeforeBackground = visibleRoomJID;
-      // Prefer the read boundary the user actually reached. Stamping
-      // `Date.now()` while they are scrolled up marks unseen messages as
-      // read, and because we flush to the server private store below the
-      // loss survives an app restart. Customer-reported #33.
-      const bgBoundaryTs = visibleRoomJID
-        ? rooms?.[visibleRoomJID]?.readBoundaryTs ?? null
-        : null;
       if (visibleRoomJID) {
         store.dispatch(
-          setLastViewedTimestamp({
-            chatJID: visibleRoomJID,
-            timestamp: bgBoundaryTs ?? Date.now(),
-          })
+          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
@@ -648,13 +658,12 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       }
       // Fire-and-forget — we're going to the background and don't
       // care about the resolution path.
-      c.flushLastViewedToPrivateStoreStanza(rooms, {
-        visibleRoomJID,
-        visibleRoomTs: bgBoundaryTs,
-      }).catch(() => {});
+      c.flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID }).catch(
+        () => {}
+      );
     });
     return () => sub.remove();
-  }, [client]);
+  }, [client, config?.xmppSettings?.keepAliveInBackground]);
 
   // -----------------------------------------------------------
   // Consumer visibility signal (`isVisible` prop). For hosts that keep
@@ -682,16 +691,9 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         store.dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       }
     } else {
-      // Same read-boundary rule as the AppState path above (#33).
-      const hideBoundaryTs = activeRoomJID
-        ? rooms?.[activeRoomJID]?.readBoundaryTs ?? null
-        : null;
       if (wasVisible && activeRoomJID) {
         store.dispatch(
-          setLastViewedTimestamp({
-            chatJID: activeRoomJID,
-            timestamp: hideBoundaryTs ?? Date.now(),
-          })
+          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).
@@ -703,10 +705,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       store.dispatch(clearVisibleRoom());
       if (wasVisible && client?.flushLastViewedToPrivateStoreStanza) {
         client
-          .flushLastViewedToPrivateStoreStanza(rooms, {
-            visibleRoomJID: activeRoomJID,
-            visibleRoomTs: hideBoundaryTs,
-          })
+          .flushLastViewedToPrivateStoreStanza(rooms, { visibleRoomJID: activeRoomJID })
           .catch(() => {});
       }
     }
@@ -727,15 +726,6 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       if (room.messages === lastMessagesRef) {return;}
       lastMessagesRef = room.messages;
 
-      // "Chat is on screen" does NOT mean "user is looking at the newest
-      // message". While they are scrolled up, MessageList publishes a read
-      // boundary; advancing the marker to `now` here would clear the very
-      // unread messages the scroll-up state exists to preserve — and the
-      // 2s flush below would push that loss to the server, making it
-      // survive an app restart. Leave the marker alone until they come
-      // back to the bottom (boundary back to null). Customer-reported #33.
-      if (room.readBoundaryTs != null) {return;}
-
       let newest = 0;
       const list = room.messages || [];
       for (const m of list) {
@@ -794,8 +784,7 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
         devPushLog('rn', `NetInfo: reachable & client ${client.status} → forceReconnect`);
         client.forceReconnect();
       } else if (client.status === 'online') {
-        // Connectivity just came back — worth an immediate check.
-        client.ensureStreamAlive?.({ force: true, reason: 'netinfo' });
+        client.ensureStreamAlive?.();
       }
     });
     return () => unsub();

package/src/helpers/getChatBackground.ts

@@ -0,0 +1,18 @@
+/** @format */
+
+import type { IConfig } from '../types/types';
+
+/** Ground behind the conversation, and behind the rounded corners of the
+ * header and the composer that sit over it. */
+export const DEFAULT_CHAT_BACKGROUND = '#F3F6FC';
+
+/**
+ * One place for the conversation's background colour.
+ *
+ * The message list has always painted it; the chat container behind it was
+ * plain white, which is what made the header's rounded bottom corners and
+ * the composer's rounded top corners invisible — the corners revealed the
+ * white parent, not the conversation.
+ */
+export const getChatBackgroundColor = (config?: IConfig): string =>
+  config?.backgroundChat?.color || DEFAULT_CHAT_BACKGROUND;

package/src/helpers/mediaLibraryRuntime.ts

@@ -0,0 +1,25 @@
+let cached: any | undefined;
+
+export const getMediaLibrary = (): any | null => {
+  if (cached !== undefined) {return cached;}
+  try {
+    const legacy = require('expo-media-library/legacy');
+
+    if (legacy?.getAssetsAsync) {
+      cached = legacy;
+      return cached;
+    }
+  } catch {
+  }
+
+  try {
+    cached = require('expo-media-library') ?? null;
+  } catch {
+    cached = null;
+  }
+  return cached;
+};
+
+export const __resetMediaLibraryCache = () => {
+  cached = undefined;
+};