@ethora/chat-component-rn 26.8.4 → 26.8.5

package/lib/typescript/components/Modals/Modal/SwipeBackLayer.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+interface SwipeBackLayerProps {
+    /** Called once the screen has left (swipe, back button, hardware back). */
+    onClose: () => void;
+    /** Receives the animated close, to hand to the screen's own back button. */
+    children: (close: () => void) => ReactNode;
+}
+/**
+ * Full-screen modal layer with the same navigation feel as RoomStack: it
+ * slides in from the right, and a swipe from the left edge drags it back
+ * out over whatever is underneath (the room or the list).
+ */
+export declare const SwipeBackLayer: React.FC<SwipeBackLayerProps>;
+export {};
+//# sourceMappingURL=SwipeBackLayer.d.ts.map

package/lib/typescript/components/Modals/Modal/SwipeBackLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeBackLayer.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/Modal/SwipeBackLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAyBzE,UAAU,mBAAmB;IAC3B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;CAC5C;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqGxD,CAAC"}

package/lib/typescript/components/Modals/ProfileHeader/ProfileHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/ProfileHeader/ProfileHeader.tsx"],"names":[],"mappings":"AAAA,cAAc;AAEd,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,QAAQ,EAER,SAAS,EAGT,SAAS,EAGV,MAAM,cAAc,CAAC;AAKtB,yCAAyC;AACzC,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,2DAA2D;AAC3D,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,qEAAqE;AACrE,eAAO,MAAM,YAAY,QAAiC,CAAC;AAyC3D,wEAAwE;AACxE,eAAO,MAAM,aAAa,eAAmB,CAAC;AAyC9C,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,4EAA4E;IAC5E,aAAa,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB;;;IAMzB,uEAAuE;;CAG1E,CAAC;AAYF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAChC,WAAW,GAAG;IACZ,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,sEAAsE;IACtE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACtC,CAyKF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,WAAW,GAAG;IACZ,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC,CAyGF,CAAC"}
+{"version":3,"file":"ProfileHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/ProfileHeader/ProfileHeader.tsx"],"names":[],"mappings":"AAAA,cAAc;AAEd,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,QAAQ,EAGR,SAAS,EAGT,SAAS,EAGV,MAAM,cAAc,CAAC;AAKtB,yCAAyC;AACzC,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,2DAA2D;AAC3D,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,qEAAqE;AACrE,eAAO,MAAM,YAAY,QAAiC,CAAC;AA+C3D,wEAAwE;AACxE,eAAO,MAAM,aAAa,eAAmB,CAAC;AAyC9C,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,4EAA4E;IAC5E,aAAa,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB;;;IAMzB,uEAAuE;;CAG1E,CAAC;AAYF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAChC,WAAW,GAAG;IACZ,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,sEAAsE;IACtE,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACtC,CAsLF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,WAAW,GAAG;IACZ,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC,CA0GF,CAAC"}

package/lib/typescript/components/Modals/UserProfileModal/UserProfileModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfileModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/UserProfileModal/UserProfileModal.tsx"],"names":[],"mappings":"AAAA,cAAc;AAEd,OAAO,KAA4D,MAAM,OAAO,CAAC;AAgEjF,KAAK,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;AAEjD,4DAA4D;AAC5D,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,GAAG,IAAI,KAAG,MAOnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM;IAChC,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB,KAAG,MAAM,EAOT,CAAC;AAEF,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,GAAG,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6erD,CAAC;AAqIF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UserProfileModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/Modals/UserProfileModal/UserProfileModal.tsx"],"names":[],"mappings":"AAAA,cAAc;AAEd,OAAO,KAA4D,MAAM,OAAO,CAAC;AA+DjF,KAAK,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;AAEjD,4DAA4D;AAC5D,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,GAAG,IAAI,KAAG,MAOnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM;IAChC,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB,KAAG,MAAM,EAOT,CAAC;AAEF,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,GAAG,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAifrD,CAAC;AAqIF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/helpers/keyboardLayout.d.ts

@@ -5,7 +5,13 @@ type KeyboardLayoutArgs = {
     keyboardVisible?: boolean;
 };
 export declare const ANDROID_INPUT_DOCK_GAP = 12;
+export declare const IOS_KEYBOARD_DOCK_GAP = 4;
 export declare const getKeyboardVerticalOffset: ({ platform, configuredOffset, bottomInset, }: KeyboardLayoutArgs) => number;
+export declare const getKeyboardAvoidingOffset: ({ configuredOffset, }: Pick<KeyboardLayoutArgs, "configuredOffset">) => number;
+export declare const getInputDockKeyboardPadding: ({ platform, inputDockPaddingBottom, }: {
+    platform: string;
+    inputDockPaddingBottom: number;
+}) => number;
 type InputDockPaddingArgs = Omit<KeyboardLayoutArgs, 'configuredOffset'> & {
     configuredPadding?: number;
     hostOwnsLayout?: boolean;

package/lib/typescript/helpers/keyboardLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboardLayout.d.ts","sourceRoot":"","sources":["../../../src/helpers/keyboardLayout.ts"],"names":[],"mappings":"AAAA,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAEzC,eAAO,MAAM,yBAAyB,GAAI,8CAIvC,kBAAkB,KAAG,MACmC,CAAC;AAE5D,KAAK,oBAAoB,GAAG,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,GAAG;IAIzE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAK3B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,gFAMvC,oBAAoB,KAAG,MAQzB,CAAC"}
+{"version":3,"file":"keyboardLayout.d.ts","sourceRoot":"","sources":["../../../src/helpers/keyboardLayout.ts"],"names":[],"mappings":"AAAA,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAGzC,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,eAAO,MAAM,yBAAyB,GAAI,8CAIvC,kBAAkB,KAAG,MACmC,CAAC;AAO5D,eAAO,MAAM,yBAAyB,GAAI,uBAEvC,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,KAAG,MAA0B,CAAC;AAK7E,eAAO,MAAM,2BAA2B,GAAI,uCAGzC;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,sBAAsB,EAAE,MAAM,CAAC;CAChC,KAAG,MAGwB,CAAC;AAE7B,KAAK,oBAAoB,GAAG,IAAI,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,GAAG;IAIzE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAK3B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,gFAMvC,oBAAoB,KAAG,MAQzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.8.4",
+  "version": "26.8.5",
   "description": "Drop-in XMPP chat component for React Native / Expo. <Chat config={...}/> and you're done.",
   "main": "index.js",
   "module": "lib/module/main.js",

package/src/components/Header/HeaderRoomList.tsx

@@ -9,6 +9,7 @@ import { BurgerMenuIcon } from '../../assets/icons';
 import Button from '../styled/Button';
 import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
+import { resolveHeaderHeight } from '../../helpers/headerLayout';
 
 interface HeaderRoomListProps {
   setDrawerOpen: () => void;
@@ -20,6 +21,9 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   const t = useT();
   const insets = useSafeAreaInsets();
   const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
+  // Same fixed band as ChatHeader / modal headers: the safe-area inset is
+  // padded on top and the row (buttons + title) centers in the band below it.
+  const headerHeight = resolveHeaderHeight(config?.headerLayout?.height) + topInset;
 
   const modalUser: any = selectedUser ?? user;
 
@@ -45,7 +49,7 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
       style={[
         styles.headerContainer,
         { backgroundColor: theme.surface, shadowColor: theme.shadow },
-        topInset ? { paddingTop: 16 + topInset } : null,
+        { height: headerHeight, paddingTop: topInset },
       ]}
     >
       {!config?.disableRoomMenu && config?.headerMenu ? (
@@ -66,7 +70,7 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
       ) : (
         <View style={styles.leftContainer} />
       )}
-      <View style={styles.centerContainer}>
+      <View style={[styles.centerContainer, { top: topInset }]}>
         {config?.headerLogo ? (
           HeaderLogo
         ) : (
@@ -95,9 +99,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: 16,
-    paddingTop: 16,
-    paddingBottom: 12,
-    minHeight: 56,
     justifyContent: 'space-between',
     borderBottomLeftRadius: 20,
     borderBottomRightRadius: 20,
@@ -121,6 +122,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 0,
     right: 0,
+    bottom: 0,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/src/components/MainComponents/ChatRoom.tsx

@@ -48,6 +48,7 @@ import {
   KeyboardAvoidingView,
   KeyboardStickyView,
 } from 'react-native-keyboard-controller';
+import { KeyboardInputDock } from './KeyboardInputDock';
 import useComposing from '../../hooks/useComposing';
 import { store } from '../../roomStore';
 import {
@@ -58,6 +59,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   getInputDockPaddingBottom,
   getKeyboardVerticalOffset,
+  getKeyboardAvoidingOffset,
+  getInputDockKeyboardPadding,
 } from '../../helpers/keyboardLayout';
 
 interface ChatRoomProps {
@@ -357,6 +360,13 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       configuredPadding: configWithEventHandlers?.inputDockPaddingBottom,
       hostOwnsLayout: !!configWithEventHandlers?.disableKeyboardAvoidingView,
     });
+    const keyboardAvoidingOffset = getKeyboardAvoidingOffset({
+      configuredOffset: configWithEventHandlers?.keyboardVerticalOffset ?? 0,
+    });
+    const inputDockKeyboardPadding = getInputDockKeyboardPadding({
+      platform: Platform.OS,
+      inputDockPaddingBottom,
+    });
 
     // Keyboard avoidance is delegated to react-native-keyboard-controller's
     // KeyboardAvoidingView. When the HOST app supplies its own keyboard
@@ -394,16 +404,26 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       : View;
     const keyboardWrapperProps = avoidKeyboard
       ? {
-          style: { flex: 1 },
+          // The dock's colour: the keyboard-height padding below the dock is
+          // this view's own box, and it shows around the keyboard's rounded
+          // top corners — it must read as a continuation of the dock.
+          style: { flex: 1, backgroundColor: theme.surface },
           behavior: 'padding' as const,
-          keyboardVerticalOffset,
+          keyboardVerticalOffset: keyboardAvoidingOffset,
         }
       : { style: { flex: 1 } };
     // Input dock: a plain View normally; under the sticky strategy it becomes
     // a KeyboardStickyView so it (and only it) lifts with the keyboard.
+    // Under the avoiding-view strategy the dock's safe-area padding collapses
+    // while the keyboard is open (KeyboardInputDock), so the composer is glued
+    // to the keyboard.
+    const collapsingDock =
+      avoidKeyboard && inputDockKeyboardPadding !== inputDockPaddingBottom;
     const InputDockTag: React.ComponentType<any> = stickyInput
       ? KeyboardStickyView
-      : View;
+      : collapsingDock
+        ? KeyboardInputDock
+        : View;
     const inputDockProps: any = {
       // The dock carries the composer's white surface all the way to the
       // bottom edge, so it needs the same rounded top and upward shadow —
@@ -422,6 +442,12 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       ...(stickyInput
         ? { offset: { closed: 0, opened: keyboardVerticalOffset } }
         : {}),
+      ...(collapsingDock
+        ? {
+            closedPadding: inputDockPaddingBottom,
+            openedPadding: inputDockKeyboardPadding,
+          }
+        : {}),
     };
 
     return (

package/src/components/MainComponents/ChatWrapper.tsx

@@ -1,6 +1,7 @@
 import React, {FC, useEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import ChatRoom from './ChatRoom';
+import {RoomStack, RoomStackHandle} from './RoomStack';
 import {
   setActiveModal,
   setConfig,
@@ -37,7 +38,7 @@ import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
 import {useTheme} from '../../hooks/useTheme';
 import { usePendingNotification } from '../../hooks/usePendingNotification';
-import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
+import {DeviceEventEmitter, Keyboard, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
 import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
 import {buildSeedRoom} from '../../helpers/buildSeedRoom';
@@ -70,6 +71,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   usePendingNotification();
   const theme = useTheme();
+  const roomStackRef = useRef<RoomStackHandle>(null);
 
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
@@ -123,6 +125,14 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     dispatch(setDeleteModal({isDeleteModal: false}));
   };
 
+  // A modal (chat profile, user profile, ...) covers the chat, so the
+  // composer's keyboard must not stay open on top of it.
+  useEffect(() => {
+    if (activeModal) {
+      Keyboard.dismiss();
+    }
+  }, [activeModal]);
+
   // A host drives the reader's language from OUTSIDE the component through
   // `config.translates.readerLocale` (their own switcher, or the testbed's
   // Setup tab). Nothing was syncing it into `langSource`, so pinning it only
@@ -425,6 +435,12 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
   // the list. With `roomJID` or `disableRooms`, skip the list entirely.
   const showRoomList =
     !config?.disableRooms && !roomJID && !activeRoomJID;
+  // List mode: the room is pushed over the list and can be swiped back
+  // (RoomStack). With `roomJID` / `disableRooms` there is no list to return to.
+  const listMode = !config?.disableRooms && !roomJID;
+  const backToList = () => {
+    dispatch(setCurrentRoom({ roomJID: '' }));
+  };
 
   return (
     <>
@@ -489,10 +505,35 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 Android. Wraps only the chat area — the global Modal /
                 ModalWrapper below stay above it. */}
             <InteractionsOverlayProvider>
-              {showRoomList ? (
-                <RoomList
-                  chats={Object.values(rooms)}
-                  onRoomClick={handleChangeChat}
+              {listMode ? (
+                <RoomStack
+                  ref={roomStackRef}
+                  onBack={backToList}
+                  roomBackground={theme.chatBackground}
+                  // An open modal covers the room: back must not pull the
+                  // room out from under it.
+                  hardwareBack={!activeModal}
+                  list={
+                    <RoomList
+                      chats={Object.values(rooms)}
+                      onRoomClick={handleChangeChat}
+                    />
+                  }
+                  room={
+                    showRoomList ? null : (
+                      <ChatWrapperBox
+                        style={{
+                          ...MainComponentStyles,
+                        }}>
+                        <ChatRoom
+                          CustomMessageComponent={
+                            CustomMessageComponent || Message
+                          }
+                          handleBackClick={() => roomStackRef.current?.pop()}
+                        />
+                      </ChatWrapperBox>
+                    )
+                  }
                 />
               ) : (
                 <ChatWrapperBox
@@ -501,13 +542,6 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                   }}>
                   <ChatRoom
                     CustomMessageComponent={CustomMessageComponent || Message}
-                    handleBackClick={
-                      roomJID || config?.disableRooms
-                        ? undefined
-                        : () => {
-                            dispatch(setCurrentRoom({ roomJID: '' }));
-                          }
-                    }
                   />
                 </ChatWrapperBox>
               )}

package/src/components/MainComponents/KeyboardInputDock.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+import { ViewProps } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
+
+interface KeyboardInputDockProps extends ViewProps {
+  // Bottom padding while the keyboard is closed (the safe-area inset).
+  closedPadding: number;
+  // Bottom padding while the keyboard is open.
+  openedPadding: number;
+}
+
+/**
+ * Input dock for the KeyboardAvoidingView strategy on iOS. The dock's
+ * safe-area padding is only needed while the keyboard is closed; with the
+ * keyboard open it collapses in sync with the keyboard animation, so the
+ * composer sits right on top of the keyboard instead of leaving a band of
+ * dock (or chat background) between them.
+ */
+export const KeyboardInputDock: FC<KeyboardInputDockProps> = ({
+  closedPadding,
+  openedPadding,
+  style,
+  children,
+  ...rest
+}) => {
+  const { progress } = useReanimatedKeyboardAnimation();
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      paddingBottom: interpolate(
+        progress.value,
+        [0, 1],
+        [closedPadding, openedPadding]
+      ),
+    }),
+    [closedPadding, openedPadding]
+  );
+
+  return (
+    <Animated.View {...rest} style={[style, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+};

package/src/components/MainComponents/RoomStack.tsx

@@ -0,0 +1,236 @@
+import React, {
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import {
+  BackHandler,
+  Keyboard,
+  LayoutChangeEvent,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import Animated, {
+  Easing,
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+// Width of the left-edge strip that starts the back swipe.
+export const EDGE_WIDTH = 28;
+// Released past this share of the width (or faster than the velocity
+// below), the swipe completes; otherwise the room settles back.
+export const COMPLETE_DISTANCE = 0.35;
+export const COMPLETE_VELOCITY = 600;
+// How far the list underneath is shifted left while fully covered.
+const LIST_PARALLAX = 0.3;
+export const LIST_DIM = 0.25;
+
+export const PUSH = { duration: 320, easing: Easing.bezier(0.2, 0.8, 0.2, 1) };
+export const POP = { duration: 240, easing: Easing.out(Easing.cubic) };
+
+export interface RoomStackHandle {
+  /** Slide the room out, then call `onBack`. */
+  pop: () => void;
+}
+
+interface RoomStackProps {
+  /** The room list — stays mounted under the room so it is there to reveal. */
+  list: ReactNode;
+  /** The open room, or null while only the list is shown. */
+  room: ReactNode | null;
+  /** Called once the room has left the screen (swipe, back button, pop()). */
+  onBack: () => void;
+  /** Background behind the room's content. */
+  roomBackground?: string;
+  /** Android hardware back / system back gesture returns to the list. */
+  hardwareBack?: boolean;
+}
+
+/**
+ * Two-layer stack for the list → room navigation: the room slides in over
+ * the list, and a swipe from the left edge drags it back out, following the
+ * finger, with the list parallaxing in underneath (the iOS navigation feel).
+ */
+export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
+  ({ list, room, onBack, roomBackground, hardwareBack = true }, ref) => {
+    const { width: windowWidth } = useWindowDimensions();
+    const width = useSharedValue(windowWidth);
+    const hasRoom = !!room;
+    // Room's horizontal offset: 0 = covering the list, `width` = off-screen.
+    // A room already open on the first render is shown in place.
+    const x = useSharedValue(hasRoom ? 0 : windowWidth);
+    const closing = useSharedValue(false);
+
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+      if (isFirstRender.current) {
+        isFirstRender.current = false;
+        return;
+      }
+      closing.value = false;
+      if (hasRoom) {
+        x.value = width.value;
+        x.value = withTiming(0, PUSH);
+      } else {
+        x.value = width.value;
+      }
+    }, [hasRoom]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onBackRef = useRef(onBack);
+    onBackRef.current = onBack;
+    const finish = useCallback(() => onBackRef.current(), []);
+
+    const pop = useCallback(() => {
+      if (closing.value) {
+        return;
+      }
+      closing.value = true;
+      Keyboard.dismiss();
+      x.value = withTiming(width.value, POP, finished => {
+        if (finished) {
+          runOnJS(finish)();
+        }
+      });
+    }, [finish]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useImperativeHandle(ref, () => ({ pop }), [pop]);
+
+    useEffect(() => {
+      if (!hasRoom || !hardwareBack) {
+        return undefined;
+      }
+      const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+        pop();
+        return true;
+      });
+      return () => sub.remove();
+    }, [hasRoom, hardwareBack, pop]);
+
+    const dismissKeyboard = useCallback(() => Keyboard.dismiss(), []);
+
+    const swipeBack = Gesture.Pan()
+      .hitSlop({ left: 0, width: EDGE_WIDTH })
+      .activeOffsetX(12)
+      .failOffsetY([-16, 16])
+      .onStart(() => {
+        runOnJS(dismissKeyboard)();
+      })
+      .onUpdate(e => {
+        if (closing.value) {
+          return;
+        }
+        x.value = Math.min(Math.max(e.translationX, 0), width.value);
+      })
+      .onEnd(e => {
+        if (closing.value) {
+          return;
+        }
+        const complete =
+          x.value > width.value * COMPLETE_DISTANCE ||
+          e.velocityX > COMPLETE_VELOCITY;
+        if (complete) {
+          closing.value = true;
+          x.value = withTiming(width.value, POP, finished => {
+            if (finished) {
+              runOnJS(finish)();
+            }
+          });
+        } else {
+          x.value = withTiming(0, POP);
+        }
+      });
+
+    const onLayout = useCallback((e: LayoutChangeEvent) => {
+      const next = e.nativeEvent.layout.width;
+      if (next > 0 && next !== width.value) {
+        // Keep an off-screen room off-screen when the container resizes.
+        if (x.value === width.value) {
+          x.value = next;
+        }
+        width.value = next;
+      }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const roomStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: x.value }],
+    }));
+    // 1 while the room fully covers the list, 0 once it is gone.
+    const listStyle = useAnimatedStyle(() => {
+      const covered = 1 - Math.min(Math.max(x.value / width.value, 0), 1);
+      return {
+        transform: [{ translateX: -width.value * LIST_PARALLAX * covered }],
+      };
+    });
+    const dimStyle = useAnimatedStyle(() => ({
+      opacity: interpolate(x.value, [0, width.value], [LIST_DIM, 0]),
+    }));
+
+    return (
+      <View style={styles.container} onLayout={onLayout}>
+        <Animated.View
+          style={[styles.layer, listStyle]}
+          pointerEvents={hasRoom ? 'none' : 'auto'}
+          accessibilityElementsHidden={hasRoom}
+          importantForAccessibility={hasRoom ? 'no-hide-descendants' : 'auto'}
+        >
+          {list}
+        </Animated.View>
+        {hasRoom && (
+          <>
+            <Animated.View
+              pointerEvents="none"
+              style={[styles.layer, styles.dim, dimStyle]}
+            />
+            <GestureDetector gesture={swipeBack}>
+              <Animated.View
+                style={[
+                  styles.layer,
+                  styles.room,
+                  { backgroundColor: roomBackground },
+                  roomStyle,
+                ]}
+              >
+                {room}
+              </Animated.View>
+            </GestureDetector>
+          </>
+        )}
+      </View>
+    );
+  }
+);
+
+RoomStack.displayName = 'RoomStack';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    overflow: 'hidden',
+  },
+  layer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  dim: {
+    backgroundColor: '#000',
+  },
+  room: {
+    shadowColor: '#000',
+    shadowOffset: { width: -4, height: 0 },
+    shadowOpacity: 0.18,
+    shadowRadius: 12,
+  },
+});

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -510,6 +510,10 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         ]}
         onLayout={(e) => setViewportHeight(e.nativeEvent.layout.height)}
         showsVerticalScrollIndicator={false}
+        // Magnet: a header released part-way settles fully open or fully
+        // collapsed; past the collapsed point the content scrolls freely.
+        snapToOffsets={[0, collapseDistance]}
+        snapToEnd={false}
         keyboardShouldPersistTaps="handled"
         scrollEventThrottle={16}
         onScroll={Animated.event(

package/src/components/Modals/Modal/Modal.tsx

@@ -2,9 +2,13 @@ import React from 'react';
 import { ModalBackground } from '../styledModalComponents';
 import { ModalType } from '../../../types/types';
 import { useDispatch } from 'react-redux';
-import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import {
+  setActiveModal,
+  setSelectedUser,
+} from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import { MODAL_COMPONENTS } from '../../../helpers/constants/MODAL_COMPONENTS';
+import { SwipeBackLayer } from './SwipeBackLayer';
 
 interface ModalProps {
   children?: React.ReactNode;
@@ -44,6 +48,33 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
     return <>{renderModalContent()}{children}</>;
   }
 
+  // The profile screens are full-screen pages rather than dialogs: they
+  // slide in and can be swiped back from the left edge, like a room. One
+  // layer serves both, so going chat profile → member profile swaps the
+  // page in place instead of replaying the entrance.
+  if (modal === MODAL_TYPES.PROFILE || modal === MODAL_TYPES.CHAT_PROFILE) {
+    const ProfileComponent = MODAL_COMPONENTS[modal];
+    if (ProfileComponent) {
+      return (
+        <SwipeBackLayer
+          onClose={() => {
+            // The viewed member is cleared only once the page is gone, so
+            // it doesn't flip to the user's own profile mid-slide.
+            dispatch(setSelectedUser(undefined));
+            setOpenModal();
+          }}
+        >
+          {(close) => (
+            <>
+              <ProfileComponent handleCloseModal={close} />
+              {children}
+            </>
+          )}
+        </SwipeBackLayer>
+      );
+    }
+  }
+
   return (
     modal && (
       <ModalBackground