@ethora/chat-component-rn 26.8.4 → 26.8.6

package/src/assets/icons.tsx

@@ -305,18 +305,18 @@ export const DeleteIcon = ({
   </Svg>
 );
 
-export const CopyIcon = ({ color = '#8C8C8C', ...props }) => (
+export const CopyIcon = ({ color = '#1F1F1F', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
       d="M8 4V16C8 16.5304 8.21071 17.0391 8.58579 17.4142C8.96086 17.7893 9.46957 18 10 18H18C18.5304 18 19.0391 17.7893 19.4142 17.4142C19.7893 17.0391 20 16.5304 20 16V7.242C20 6.97556 19.9467 6.71181 19.8433 6.46624C19.7399 6.22068 19.5885 5.99824 19.398 5.812L16.083 2.57C15.7094 2.20466 15.2076 2.00007 14.685 2H10C9.46957 2 8.96086 2.21071 8.58579 2.58579C8.21071 2.96086 8 3.46957 8 4Z"
-      stroke="#1F1F1F"
+      stroke={color}
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <Path
       d="M16 18V20C16 20.5304 15.7893 21.0391 15.4142 21.4142C15.0391 21.7893 14.5304 22 14 22H6C5.46957 22 4.96086 21.7893 4.58579 21.4142C4.21071 21.0391 4 20.5304 4 20V9C4 8.46957 4.21071 7.96086 4.58579 7.58579C4.96086 7.21071 5.46957 7 6 7H8"
-      stroke="#1F1F1F"
+      stroke={color}
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -324,11 +324,11 @@ export const CopyIcon = ({ color = '#8C8C8C', ...props }) => (
   </Svg>
 );
 
-export const ReplyIcon = ({ color = '#8C8C8C', ...props }) => (
+export const ReplyIcon = ({ color = '#1F1F1F', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
       d="M9.89797 7.51968C9.9311 7.5051 9.96737 7.49907 10.0034 7.50217C10.0395 7.50526 10.0742 7.51737 10.1044 7.53738C10.1346 7.55739 10.1592 7.58467 10.1761 7.6167C10.193 7.64873 10.2015 7.68448 10.201 7.72068V9.45018C10.201 9.6491 10.28 9.83986 10.4206 9.98051C10.5613 10.1212 10.7521 10.2002 10.951 10.2002C11.9515 10.2002 13.9705 10.2077 15.901 11.4332C17.377 12.3692 18.886 14.0732 19.7935 17.2472C18.2635 15.7727 16.516 14.9732 14.986 14.5487C14.0456 14.2884 13.0791 14.1345 12.1045 14.0897C11.7056 14.0709 11.3059 14.0749 10.9075 14.1017H10.888L10.8805 14.1032L10.951 14.8502L10.876 14.1032C10.6908 14.1218 10.5192 14.2085 10.3945 14.3466C10.2698 14.4846 10.2008 14.6641 10.201 14.8502V16.5797C10.201 16.7417 10.036 16.8437 9.89797 16.7807L3.92197 12.3812L3.85897 12.3392C3.82635 12.3196 3.79936 12.2919 3.78063 12.2588C3.76189 12.2256 3.75204 12.1882 3.75204 12.1502C3.75204 12.1121 3.76189 12.0747 3.78063 12.0416C3.79936 12.0085 3.82635 11.9808 3.85897 11.9612L3.92197 11.9192L9.89797 7.51968ZM11.701 15.5792C11.804 15.5792 11.9155 15.5822 12.0355 15.5882C12.6865 15.6182 13.5865 15.7172 14.5855 15.9947C16.5745 16.5467 18.9295 17.7977 20.4955 20.6147C20.5802 20.7667 20.7151 20.8846 20.8771 20.9481C21.0392 21.0116 21.2183 21.0167 21.3837 20.9626C21.5492 20.9086 21.6907 20.7986 21.7839 20.6517C21.8772 20.5047 21.9165 20.3299 21.895 20.1572C21.199 14.5922 19.066 11.6642 16.705 10.1672C14.8375 8.98218 12.9145 8.75418 11.701 8.71068V7.72068C11.7011 7.41179 11.6179 7.10858 11.46 6.84305C11.3022 6.57753 11.0756 6.35953 10.8042 6.21207C10.5327 6.06461 10.2265 5.99314 9.91788 6.00522C9.60922 6.01729 9.30954 6.11246 9.05047 6.28068L3.05947 10.6907C2.81179 10.8453 2.60753 11.0604 2.46591 11.3157C2.3243 11.571 2.25 11.8582 2.25 12.1502C2.25 12.4422 2.3243 12.7293 2.46591 12.9847C2.60753 13.24 2.81179 13.4551 3.05947 13.6097L9.05047 18.0197C9.30954 18.1879 9.60922 18.2831 9.91788 18.2951C10.2265 18.3072 10.5327 18.2358 10.8042 18.0883C11.0756 17.9408 11.3022 17.7228 11.46 17.4573C11.6179 17.1918 11.7011 16.8886 11.701 16.5797V15.5792Z"
-      fill="#1F1F1F"
+      fill={color}
     />
   </Svg>
 );

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/ChatHeader.tsx

@@ -16,7 +16,8 @@ import Button from '../styled/Button';
 import { BackIcon, BurgerMenuIcon } from '../../assets/icons';
 import { CallButtons } from '../VideoCalls/CallButtons';
 import { LanguageSelectorButton } from './LanguageSelectorButton';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import type { RootState } from '../../roomStore';
 import Composing from '../styled/StyledInputComponents/Composing';
 import {
   deleteRoom,
@@ -27,7 +28,6 @@ import { useXmppClient } from '../../context/xmppProvider';
 import { setActiveModal } from '../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { RoomMenu } from '../MenuRoom/MenuRoom';
-import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useFileToken } from '../../hooks/useFileToken';
 import { appendFileToken } from '../../helpers/secureFileUrl';
@@ -51,10 +51,18 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   const dispatch = useDispatch();
   const { client } = useXmppClient();
 
-  const { roomsList, activeRoomJID } = useRoomState(currentRoom.jid);
-  const roomState = useRoomState(currentRoom.jid).room;
-  const composing = roomState?.composing;
+  const reduxStore = useStore<RootState>();
+  const activeRoomJID = useSelector(
+    (state: RootState) => state.rooms.activeRoomJID
+  );
+  const roomState = useSelector((state: RootState) =>
+    currentRoom?.jid ? state.rooms.rooms?.[currentRoom.jid] : undefined
+  );
   const { config } = useChatSettingState();
+  const roomsList = useSelector((state: RootState) =>
+    config?.chatHeaderBurgerMenu ? state.rooms.rooms : null
+  );
+  const composing = roomState?.composing;
   const theme = useTheme();
   const t = useT();
 
@@ -67,11 +75,12 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
     client?.leaveTheRoomStanza(activeRoomJID!);
     dispatch(deleteRoom({ jid: activeRoomJID! }));
 
-    const nextRoomJID = Object.keys(roomsList)[0] || null;
+    const nextRoomJID =
+      Object.keys(reduxStore.getState().rooms.rooms || {})[0] || null;
     if (nextRoomJID) {
       dispatch(setCurrentRoom({ roomJID: nextRoomJID }));
     }
-  }, [activeRoomJID, roomsList, dispatch, client]);
+  }, [activeRoomJID, reduxStore, dispatch, client]);
 
   const handleHeaderChatMenu = () => {
     Keyboard.dismiss();

package/src/components/MainComponents/ChatRoom.tsx

@@ -2,7 +2,8 @@
 
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { ChatContainer, NonRoomChat } from '../styled/StyledComponents';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import type { RootState } from '../../roomStore';
 import MessageList from './MessageList';
 import SendInput from '../styled/SendInput';
 import {
@@ -27,8 +28,8 @@ import { ChooseChatMessage } from './ChooseChatMessage';
 import { useRoomUrl } from '../../hooks/useRoomUrl';
 import { useSendMessage } from '../../hooks/useSendMessage';
 import { IConfig } from '../../types/models/config.model';
+import type { IMessage } from '../../types/types';
 import { useRoomInitialization } from '../../hooks/useRoomInitialization';
-import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useTheme } from '../../hooks/useTheme';
 import { isOwnMessage } from '../../helpers/isOwnMessage';
@@ -48,6 +49,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 +60,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   getInputDockPaddingBottom,
   getKeyboardVerticalOffset,
+  getKeyboardAvoidingOffset,
+  getInputDockKeyboardPadding,
 } from '../../helpers/keyboardLayout';
 
 interface ChatRoomProps {
@@ -70,6 +74,8 @@ interface ChatRoomProps {
   eventHandlers?: IConfig['eventHandlers'];
 }
 
+const EMPTY_MESSAGES: IMessage[] = [];
+
 const ChatRoom: React.FC<ChatRoomProps> = React.memo(
   ({
     CustomMessageComponent,
@@ -101,14 +107,22 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       return storeConfig;
     }, [storeConfig, propsEventHandlers]);
 
-    const {
-      roomsList,
-      activeRoomJID,
-      editAction,
-      loading,
-      globalLoading,
-      roomMessages,
-    } = useRoomState();
+    const reduxStore = useStore<RootState>();
+    const activeRoomJID = useSelector(
+      (state: RootState) => state.rooms.activeRoomJID,
+    );
+    const activeRoom = useSelector((state: RootState) =>
+      activeRoomJID ? state.rooms.rooms?.[activeRoomJID] : undefined,
+    );
+    const hasRooms = useSelector(
+      (state: RootState) => Object.keys(state.rooms.rooms || {}).length > 0,
+    );
+    const editAction = useSelector((state: RootState) => state.rooms.editAction);
+    const globalLoading = useSelector(
+      (state: RootState) => state.rooms.isLoading,
+    );
+    const loading = !!activeRoom?.isLoading;
+    const roomMessages = activeRoom?.messages || EMPTY_MESSAGES;
     const {
       sendMessage: sendMs,
       sendMedia: sendMessageMedia,
@@ -180,15 +194,12 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
 
     const loadMoreMessages = useCallback(
       async (chatJID: string, max: number, idOfMessageBefore?: number) => {
-        if (isLoadingMore || roomsList?.[chatJID]?.historyComplete) {return;}
+        const room = reduxStore.getState().rooms.rooms?.[chatJID];
+        if (isLoadingMore || room?.historyComplete) {return;}
         const lastMsgId =
           typeof idOfMessageBefore !== 'string'
             ? idOfMessageBefore
-            : Number(
-                roomsList[chatJID].messages[
-                  roomsList[chatJID].messages.length - 2
-                ]?.id,
-              );
+            : Number(room?.messages?.[(room?.messages?.length || 0) - 2]?.id);
         setIsLoadingMore(true);
         try {
           // Return the promise so MessageList's `await loadMoreMessages`
@@ -202,7 +213,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         }
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [client?.client?.jid, isLoadingMore, roomsList],
+      [client?.client?.jid, isLoadingMore, reduxStore],
     );
 
     const onCloseEdit = () => {
@@ -328,12 +339,10 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
 
     useRoomInitialization(
       activeRoomJID || '',
-      roomsList,
       (configWithEventHandlers || storeConfig || {}) as IConfig,
-      roomMessages.length,
     );
 
-    if (Object.keys(roomsList)?.length < 1 && !loading && !globalLoading) {
+    if (!hasRooms && !loading && !globalLoading) {
       return (
         <NonRoomChat>
           {/* <Text>No room. Let's create one!</Text> */}
@@ -342,7 +351,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       );
     }
 
-    if (!activeRoomJID || !roomsList?.[activeRoomJID]) {
+    if (!activeRoomJID || !activeRoom) {
       return <ChooseChatMessage />;
     }
 
@@ -357,6 +366,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 +410,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 +448,12 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       ...(stickyInput
         ? { offset: { closed: 0, opened: keyboardVerticalOffset } }
         : {}),
+      ...(collapsingDock
+        ? {
+            closedPadding: inputDockPaddingBottom,
+            openedPadding: inputDockKeyboardPadding,
+          }
+        : {}),
     };
 
     return (
@@ -439,7 +471,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         >
           {!configWithEventHandlers?.disableHeader && (
             <ChatHeader
-              currentRoom={roomsList[activeRoomJID]}
+              currentRoom={activeRoom}
               handleBackClick={handleBackClick}
             />
           )}
@@ -456,7 +488,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               >
                 <Loader color={configWithEventHandlers?.colors?.primary} />
               </View>
-            ) : Object.keys(roomsList).length < 1 || !activeRoomJID ? (
+            ) : !hasRooms || !activeRoomJID ? (
               <View
                 style={{
                   flex: 1,
@@ -518,18 +550,18 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   resetNewMessageCounter: () => {},
                 }}
                 typingIndicator={
-                  roomsList[activeRoomJID]?.composing ? (
+                  activeRoom?.composing ? (
                     configWithEventHandlers?.customTypingIndicator
                       ?.customComponent ? (
                       <configWithEventHandlers.customTypingIndicator.customComponent
                         usersTyping={
-                          roomsList[activeRoomJID]?.composingList || []
+                          activeRoom?.composingList || []
                         }
                         text={
                           typeof configWithEventHandlers.customTypingIndicator
                             .text === 'function'
                             ? configWithEventHandlers.customTypingIndicator.text(
-                                roomsList[activeRoomJID]?.composingList || [],
+                                activeRoom?.composingList || [],
                               )
                             : configWithEventHandlers.customTypingIndicator
                                 .text || 'Typing...'
@@ -598,10 +630,10 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               'overlay' ||
               configWithEventHandlers.customTypingIndicator.position ===
                 'floating') &&
-            roomsList[activeRoomJID]?.composing && (
+            activeRoom?.composing && (
               <CustomTypingIndicator
                 usersTyping={
-                  roomsList[activeRoomJID]?.composingList || ['User']
+                  activeRoom?.composingList || ['User']
                 }
                 text={configWithEventHandlers.customTypingIndicator.text}
                 position={
@@ -611,7 +643,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 customComponent={
                   configWithEventHandlers.customTypingIndicator.customComponent
                 }
-                isVisible={roomsList[activeRoomJID]?.composing || false}
+                isVisible={activeRoom?.composing || false}
               />
             )}
         </ChatContainer>

package/src/components/MainComponents/ChatWrapper.tsx

@@ -1,6 +1,7 @@
-import React, {FC, useEffect, useMemo, useRef, useState} from 'react';
+import React, {FC, useCallback, 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,10 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   usePendingNotification();
   const theme = useTheme();
+  const roomStackRef = useRef<RoomStackHandle>(null);
+  // Stable, so ChatRoom's React.memo holds across this root's re-renders.
+  // (A hook: must stay above the early LoginForm return.)
+  const popRoom = useCallback(() => roomStackRef.current?.pop(), []);
 
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
@@ -92,15 +97,18 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     initMode,
   } = useXmppClient();
 
-  const {rooms, activeRoomJID} = useSelector((state: RootState) => state.rooms);
+  const rooms = useSelector((state: RootState) => state.rooms.rooms);
+  const activeRoomJID = useSelector(
+    (state: RootState) => state.rooms.activeRoomJID,
+  );
+  const activeRoomMessages = useSelector((state: RootState) =>
+    activeRoomJID ? state.rooms.rooms[activeRoomJID]?.messages : undefined,
+  );
 
-  const activeMessage = useMemo(() => {
-    if (activeRoomJID) {
-      return rooms[activeRoomJID]?.messages?.find(
-        message => message?.activeMessage,
-      );
-    }
-  }, [rooms, activeRoomJID]);
+  const activeMessage = useMemo(
+    () => activeRoomMessages?.find(message => message?.activeMessage),
+    [activeRoomMessages],
+  );
 
   const handleChangeChat = (chat: IRoom) => {
     dispatch(setCurrentRoom({roomJID: chat.jid}));
@@ -123,6 +131,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 +441,22 @@ 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;
+
+  // The open thread, over the room (a message with `activeMessage` set).
+  const threadView = activeMessage ? (
+    <ThreadWrapper
+      key={activeMessage.id}
+      activeMessage={activeMessage}
+      user={user}
+      customMessageComponent={CustomMessageComponent || Message}
+    />
+  ) : null;
+  const backToList = () => {
+    dispatch(setCurrentRoom({ roomJID: '' }));
+  };
 
   return (
     <>
@@ -489,10 +521,36 @@ 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={popRoom}
+                        />
+                        {threadView}
+                      </ChatWrapperBox>
+                    )
+                  }
                 />
               ) : (
                 <ChatWrapperBox
@@ -501,14 +559,8 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                   }}>
                   <ChatRoom
                     CustomMessageComponent={CustomMessageComponent || Message}
-                    handleBackClick={
-                      roomJID || config?.disableRooms
-                        ? undefined
-                        : () => {
-                            dispatch(setCurrentRoom({ roomJID: '' }));
-                          }
-                    }
                   />
+                  {threadView}
                 </ChatWrapperBox>
               )}
             </InteractionsOverlayProvider>

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/MessageContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment, useMemo } from 'react';
+import React, { FC, Fragment, memo, useMemo } from 'react';
 import { IConfig, IMessage } from '../../types/types';
 import { isOwnMessage } from '../../helpers/isOwnMessage';
 import DateLabel from '../styled/DateLabel';
@@ -6,9 +6,6 @@ import SystemMessage from './SystemMessage';
 import NewMessageLabel from '../styled/NewMessageLabel';
 import {
   Message,
-  MessageText,
-  MessageTimestamp,
-  UserName,
 } from '../styled/StyledComponents';
 import { View } from 'react-native';
 
@@ -35,7 +32,7 @@ interface MessageContainerProps {
   className?: string;
 }
 
-export const MessageContainer: FC<MessageContainerProps> = ({
+const MessageContainerImpl: FC<MessageContainerProps> = ({
   CustomMessage,
   CustomDaySeparator,
   CustomNewMessageLabel,
@@ -101,28 +98,23 @@ export const MessageContainer: FC<MessageContainerProps> = ({
           <DateLabel date={messageDate} colors={config?.colors} />
         )
       ) : null}
+
       <MessageComponent
         message={message}
         isUser={isUser}
         isReply={isReply}
         className={className}
       >
-        {!CustomMessage ? (
-          <>
-            <MessageTimestamp>
-              {messageDate.toLocaleTimeString()}
-            </MessageTimestamp>
-            <UserName>{message.user.name}: </UserName>
-            <MessageText>{message.body}</MessageText>
-          </>
-        ) : (
+        {CustomMessage ? (
           <MessageComponent
             message={message}
             isUser={isUser}
             isReply={isReply}
           />
-        )}
+        ) : null}
       </MessageComponent>
     </View>
   );
 };
+
+export const MessageContainer = memo(MessageContainerImpl);