@ethora/chat-component-rn 26.7.4 → 26.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.7.4",
+  "version": "26.7.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",
@@ -48,7 +48,6 @@
     "@react-native-async-storage/async-storage": ">=1.21.0",
     "@react-native-community/netinfo": ">=11.0.0",
     "expo-audio": ">=1.0.0",
-    "expo-blur": ">=13.0.0",
     "expo-clipboard": ">=7.0.0",
     "expo-document-picker": ">=13.0.0",
     "expo-file-system": ">=19.0.0",
@@ -94,9 +93,6 @@
     "expo-audio": {
       "optional": true
     },
-    "expo-blur": {
-      "optional": true
-    },
     "expo-clipboard": {
       "optional": true
     },
@@ -171,7 +167,6 @@
     "eslint-config-expo": "~57.0.1",
     "expo": "~57.0.0",
     "expo-audio": "~57.0.3",
-    "expo-blur": "~57.0.2",
     "expo-build-properties": "~57.0.10",
     "expo-clipboard": "~57.0.1",
     "expo-document-picker": "~57.0.1",

package/src/assets/icons.tsx

@@ -271,18 +271,18 @@ export const NoMessages = ({
   </Svg>
 );
 
-export const ReportIcon = ({ color = '#E53935', ...props }) => (
+export const ReportIcon = ({ color = '#8C8C8C', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
       d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-      stroke={color}
+      stroke="#E53935"
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <Path
       d="M12 7V13M12 16H12.01"
-      stroke={color}
+      stroke="#E53935"
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -333,26 +333,6 @@ export const ReplyIcon = ({ color = '#8C8C8C', ...props }) => (
   </Svg>
 );
 
-/**
- * Classic "share" glyph — three nodes joined by two links — for the
- * profile's Share button. `SendItemIcon`, which used to stand in here, is
- * a textured item/token badge with a hardcoded blue outline: wrong shape,
- * and it ignores the button's tint.
- */
-export const ShareIcon = ({ color = '#8C8C8C', width = 24, height = 24, ...props }) => (
-  <Svg width={width} height={height} viewBox="0 0 24 24" fill="none" {...props}>
-    <Circle cx="18" cy="5" r="3" stroke={color} strokeWidth="2" />
-    <Circle cx="6" cy="12" r="3" stroke={color} strokeWidth="2" />
-    <Circle cx="18" cy="19" r="3" stroke={color} strokeWidth="2" />
-    <Path
-      d="M8.59 13.51L15.42 17.49M15.41 6.51L8.59 10.49"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-    />
-  </Svg>
-);
-
 export const SendItemIcon = ({ color = '#8C8C8C', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
@@ -457,18 +437,18 @@ export const BurgerMenuIcon = ({ color = '#fff', ...props }) => (
   </Svg>
 );
 
-export const LeaveIcon = ({ color = '#E53935', ...props }) => (
+export const LeaveIcon = ({ color = '#fff', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
     <Path
       d="M14 8V6C14 5.46957 13.7893 4.96086 13.4142 4.58579C13.0391 4.21071 12.5304 4 12 4H5C4.46957 4 3.96086 4.21071 3.58579 4.58579C3.21071 4.96086 3 5.46957 3 6V18C3 18.5304 3.21071 19.0391 3.58579 19.4142C3.96086 19.7893 4.46957 20 5 20H12C12.5304 20 13.0391 19.7893 13.4142 19.4142C13.7893 19.0391 14 18.5304 14 18V16"
-      stroke={color}
+      stroke="#E53935"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <Path
       d="M9 12H21M21 12L18 9M21 12L18 15"
-      stroke={color}
+      stroke="#E53935"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -476,12 +456,12 @@ export const LeaveIcon = ({ color = '#E53935', ...props }) => (
   </Svg>
 );
 
-export const BackIcon = ({ color = '#8C8C8C', ...props }) => (
+export const BackIcon = ({ color = '#fff', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
-    <Path d="M5 12H19H5ZM5 12L9 8L5 12ZM5 12L9 16L5 12Z" fill={color} />
+    <Path d="M5 12H19H5ZM5 12L9 8L5 12ZM5 12L9 16L5 12Z" fill="#8C8C8C" />
     <Path
       d="M5 12H19M5 12L9 8M5 12L9 16"
-      stroke={color}
+      stroke="#8C8C8C"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -598,25 +578,6 @@ export const SettingIcon = ({ color = '#8C8C8C', ...props }) => (
   </Svg>
 );
 
-export const LogoutIcon = ({ color = '#8C8C8C', ...props }) => (
-  <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
-    <Path
-      d="M15 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H15"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M10 8L14 12L10 16M14 12H4"
-      stroke={color}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </Svg>
-);
-
 export const FileIcon = ({ width = 46, height = 46, ...props }) => (
   <Svg width={width} height={height} viewBox="0 0 40 40" fill="none">
     <Rect width="40" height="40" rx="8" fill="#F2E6F6" />

package/src/components/Header/HeaderRoomList.tsx

@@ -38,16 +38,11 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
       {!config?.disableRoomMenu && config?.headerMenu ? (
         <View style={styles.leftContainer}>
           <Button
-            testID="room-list-burger"
             style={styles.menuButton}
             color="black"
             unstyled
             EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
-            onPress={() =>
-              typeof config?.headerMenu === 'function'
-                ? config.headerMenu()
-                : setDrawerOpen()
-            }
+            onPress={() => config?.headerMenu && config?.headerMenu()}
           />
         </View>
       ) : (
@@ -64,7 +59,7 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
         <ProfileImagePlaceholder
           icon={modalUser?.profileImage ?? null}
           name={modalUser?.name ?? modalUser?.firstName}
-          size={36}
+          size={30}
           click={{
             isClick: true,
             onPress: setDrawerOpen,
@@ -81,19 +76,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 16,
     paddingTop: 16,
-    paddingBottom: 12,
+    paddingBottom: 8,
     minHeight: 56,
     justifyContent: 'space-between',
-    backgroundColor: '#FFFFFF',
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 20,
-    // Lifts the header off the page ground behind it.
-    shadowColor: '#101828',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.06,
-    shadowRadius: 12,
-    elevation: 4,
-    zIndex: 2,
   },
   menuButton: {
     padding: 8,
@@ -101,7 +86,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   leftContainer: {
-    width: 44,
+    width: 40,
     alignItems: 'flex-start',
     justifyContent: 'center',
   },
@@ -113,7 +98,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   rightContainer: {
-    width: 44,
+    width: 40,
     alignItems: 'flex-end',
     justifyContent: 'center',
   },

package/src/components/MainComponents/ChatRoom.tsx

@@ -20,7 +20,6 @@ import NewChatModal from '../Modals/NewChatModal/NewChatModal';
 import { EditWrapper } from './EditWrapper';
 import { EmptyChatIllustration } from '../../assets/EmptyChatIllustration';
 import { getIconColor } from '../../helpers/getIconColor';
-import { getChatBackgroundColor } from '../../helpers/getChatBackground';
 import { ChooseChatMessage } from './ChooseChatMessage';
 import { useRoomUrl } from '../../hooks/useRoomUrl';
 import { useSendMessage } from '../../hooks/useSendMessage';
@@ -216,25 +215,30 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     // Tracks what the user actually saw: `null` while they're at the
     // bottom (safe to mark everything read), or the timestamp of the
     // newest message visible when they scrolled away from it. Reported
-    // by MessageList via onReadBoundaryChange. Without this, leaving a
+    // published by MessageList into the store. Without this, leaving a
     // room (or backgrounding) while scrolled up stamped `now()` as read
     // and silently discarded genuinely-unread messages. Customer-
     // reported #33.
-    const readBoundaryRef = useRef<number | null>(null);
-    const handleReadBoundaryChange = useCallback((boundaryTs: number | null) => {
-      readBoundaryRef.current = boundaryTs;
-    }, []);
+    // MessageList publishes the boundary straight into the store, so the
+    // cleanup below reads it from there rather than keeping a second copy
+    // in a ref — the out-of-component paths (AppState background, the
+    // `isVisible` signal, useChatRoomFocus, logout) read the same field.
+    const getReadBoundary = useCallback(
+      (jid: string): number | null =>
+        store.getState().rooms?.rooms?.[jid]?.readBoundaryTs ?? null,
+      []
+    );
 
     useEffect(() => {
       if (!activeRoomJID) {
         return;
       }
 
-      readBoundaryRef.current = null;
       dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       setIsLoadingMore(false);
       return () => {
-        const timestamp = readBoundaryRef.current ?? new Date().getTime();
+        const boundaryTs = getReadBoundary(activeRoomJID);
+        const timestamp = boundaryTs ?? new Date().getTime();
         dispatch(
           setLastViewedTimestamp({
             chatJID: activeRoomJID,
@@ -252,7 +256,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               // room, so messages the user never scrolled down to come
               // back as read on the next login — the local count was
               // right but the server overrode it.
-              visibleRoomTs: readBoundaryRef.current,
+              visibleRoomTs: boundaryTs,
             })
             .catch(() => {});
         }
@@ -341,20 +345,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       ? KeyboardStickyView
       : 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 —
-      // a square white block behind a rounded composer just hid the corners.
-      style: {
-        paddingBottom: inputDockPaddingBottom,
-        backgroundColor: '#fff',
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        shadowColor: '#101828',
-        shadowOffset: { width: 0, height: -4 },
-        shadowOpacity: 0.06,
-        shadowRadius: 12,
-        elevation: 8,
-      },
+      style: { paddingBottom: inputDockPaddingBottom, backgroundColor: '#fff' },
       ...(stickyInput
         ? { offset: { closed: 0, opened: keyboardVerticalOffset } }
         : {}),
@@ -363,15 +354,11 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     return (
       <KeyboardWrapper {...keyboardWrapperProps}>
         <ChatContainer
-          // The conversation's own colour, not white: the header's rounded
-          // bottom corners and the composer's rounded top corners reveal
-          // THIS view, so a white parent made both look square.
-          style={[
-            { backgroundColor: getChatBackgroundColor(configWithEventHandlers) },
-            configWithEventHandlers?.chatRoomStyles as
-              | import('react-native').ViewStyle
-              | undefined,
-          ]}
+          style={
+            configWithEventHandlers?.chatRoomStyles
+              ? (configWithEventHandlers.chatRoomStyles as import('react-native').ViewStyle)
+              : undefined
+          }
         >
           {!configWithEventHandlers?.disableHeader && (
             <ChatHeader
@@ -410,11 +397,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   flex: 1,
                   justifyContent: 'center',
                   alignItems: 'center',
-                  // Empty rooms used to flip to white, which broke the
-                  // header's rounded corners in exactly the same way.
-                  backgroundColor: getChatBackgroundColor(
-                    configWithEventHandlers
-                  ),
+                  backgroundColor: '#ffffff',
                 }}
               >
                 <NoMessagesPlaceholder />
@@ -487,7 +470,6 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 config={configWithEventHandlers}
                 loading={isLoadingMore}
                 isReply={false}
-                onReadBoundaryChange={handleReadBoundaryChange}
               />
             )}
           </View>

package/src/components/MainComponents/MessageList.tsx

@@ -18,8 +18,9 @@ import {
   TouchableOpacity,
   ImageSourcePropType,
 } from 'react-native';
+import { useDispatch } from 'react-redux';
 import { IMessage, User, IConfig, IRoom } from '../../types/types';
-import { msgSortableMs } from '../../roomStore/roomsSlice';
+import { msgSortableMs, setReadBoundary } from '../../roomStore/roomsSlice';
 import Composing from '../styled/StyledInputComponents/Composing';
 import TreadLabel from '../styled/TreadLabel';
 import { MessageContainer } from './MessageContainer';
@@ -28,7 +29,6 @@ import Loader from '../styled/Loader';
 import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { getIconColor } from '../../helpers/getIconColor';
-import { getChatBackgroundColor } from '../../helpers/getChatBackground';
 
 interface MessageListProps<TMessage extends IMessage> {
   CustomMessage?: React.ComponentType<{
@@ -78,6 +78,7 @@ const MessageList = <TMessage extends IMessage>({
   activeMessage,
   onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
+  const dispatch = useDispatch();
   const { composing, messages, composingList } = useRoomState(roomJID)
     .room! as IRoom;
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
@@ -103,6 +104,21 @@ const MessageList = <TMessage extends IMessage>({
 
   const flatListRef = useRef<FlatList<IMessage>>(null);
 
+  // Single writer for the read boundary. Publishes to the store (so the
+  // out-of-component paths that mark a room read — AppState background,
+  // the `isVisible` signal, the visible-room auto-advance, focus hooks,
+  // logout — can stamp what the user actually saw) AND to the optional
+  // host callback. Customer-reported #33.
+  const reportReadBoundary = useCallback(
+    (boundaryTs: number | null) => {
+      if (roomJID) {
+        dispatch(setReadBoundary({ chatJID: roomJID, boundaryTs }));
+      }
+      onReadBoundaryChange?.(boundaryTs);
+    },
+    [dispatch, roomJID, onReadBoundaryChange]
+  );
+
   const addReplyMessages = useMemo(() => {
     return messages.map((message: IMessage) => {
       const newMessage = {
@@ -343,7 +359,7 @@ const MessageList = <TMessage extends IMessage>({
         // counter so the badge disappears with the arrow.
         setUnreadWhileScrolledUp(0);
         newestSeenTsRef.current = null;
-        onReadBoundaryChange?.(null);
+        reportReadBoundary(null);
       } else {
         isUserAtBottomRef.current = false;
         if (hasUserScrolledRef.current) {
@@ -361,12 +377,12 @@ const MessageList = <TMessage extends IMessage>({
             },
             0
           );
-          onReadBoundaryChange?.(newestSeenTsRef.current);
+          reportReadBoundary(newestSeenTsRef.current);
         }
         setIsUserAtBottom(false);
       }
     },
-    [memoizedMessages, onReadBoundaryChange]
+    [memoizedMessages, reportReadBoundary]
   );
 
   // Keep the badge in sync with messages that arrive while the user is
@@ -395,7 +411,7 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
-    onReadBoundaryChange?.(null);
+    reportReadBoundary(null);
     scrollToBottom();
   };
 
@@ -406,7 +422,7 @@ const MessageList = <TMessage extends IMessage>({
     setIsUserAtBottom(true);
     setUnreadWhileScrolledUp(0);
     newestSeenTsRef.current = null;
-    onReadBoundaryChange?.(null);
+    reportReadBoundary(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [roomJID]);
 
@@ -429,7 +445,7 @@ const MessageList = <TMessage extends IMessage>({
     <View
       style={[
         styles.container,
-        { backgroundColor: getChatBackgroundColor(config) },
+        { backgroundColor: config?.backgroundChat?.color || '#F3F6FC' },
       ]}
     >
       <View style={styles.backgroundImageContainer}>{BackgroundImage}</View>

package/src/components/MainComponents/ProfileImagePlaceholder.tsx

@@ -69,27 +69,27 @@ export const ProfileImagePlaceholder: React.FC<
     if (words.length === 0) {return '';}
 
     if (words.length >= 2) {
-      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0]?.[0] || '')
+      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0]?.[0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[1]?.[0] || '')
+      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[1]?.[0] || '')
         ? words[1][0].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length >= 2) {
-      const firstLetter = /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
+      const firstLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
-      const secondLetter = /^[\p{L}\p{N}]$/u.test(words[0][1] || '')
+      const secondLetter = /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][1] || '')
         ? words[0][1].toUpperCase()
         : '';
       return firstLetter + secondLetter;
     }
 
     if (words.length === 1 && words[0].length === 1) {
-      return /^[\p{L}\p{N}]$/u.test(words[0][0] || '')
+      return /^[a-zA-Zа-яА-ЯёЁ]$/.test(words[0][0] || '')
         ? words[0][0].toUpperCase()
         : '';
     }
@@ -97,26 +97,16 @@ export const ProfileImagePlaceholder: React.FC<
     return '';
   };
 
-  const getInitials = () =>
-    !imageSource && name ? getTwoUppercaseLetters(name) : '';
-
-  const imageSource =
-    typeof icon === 'string' && icon
-      ? { uri: icon }
-      : typeof icon === 'number'
-      ? icon
-      : icon && typeof (icon as any).uri === 'string' && (icon as any).uri
-      ? (icon as any)
-      : null;
+  const getInitials = () => (!icon && name ? getTwoUppercaseLetters(name) : '');
 
   return (
     <Wrapper
-      bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
+      bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
       size={size}
       isClickable={active || !!upload?.active}
     >
       <AvatarCircle
-        bgColor={imageSource ? 'transparent' : backgroundColor?.backgroundColor}
+        bgColor={icon ? 'transparent' : backgroundColor?.backgroundColor}
         size={size}
         isClickable={active || !!upload?.active}
         onPress={
@@ -127,8 +117,11 @@ export const ProfileImagePlaceholder: React.FC<
             : undefined
         }
       >
-        {imageSource ? (
-          <AvatarImage source={imageSource} size={size} />
+        {icon ? (
+          <AvatarImage
+            source={typeof icon === 'string' ? { uri: icon } : icon as any}
+            size={size}
+          />
         ) : placeholderIcon ? (
           placeholderIcon
         ) : (
@@ -147,7 +140,7 @@ export const ProfileImagePlaceholder: React.FC<
           </Overlay>
         )}
       </AvatarCircle>
-      {remove?.enabled && imageSource && role !== 'participant' && (
+      {remove?.enabled && icon && role !== 'participant' && (
         <RemoveButton onPress={remove.onRemoveClick}>
           <RemoveButtonText>&times;</RemoveButtonText>
         </RemoveButton>

package/src/components/MainComponents/RoomList.tsx

@@ -35,14 +35,6 @@ interface RoomListProps {
   onRoomClick?: (chat: IRoom) => void;
 }
 
-/** Page ground behind the room list, the search field and the header's
- * rounded bottom corners. */
-const LIST_BACKGROUND = '#E8EDF2';
-
-/** First-paint fallback until the floating search strip reports its real
- * height; the list's top padding follows the measurement after that. */
-const SEARCH_BAR_ESTIMATE = 60;
-
 const RoomList: React.FC<RoomListProps> = ({
   chats,
   burgerMenu = false,
@@ -128,10 +120,6 @@ const RoomList: React.FC<RoomListProps> = ({
     }
   }, [burgerMenu]);
 
-  // Measured, so the list's top padding always matches the floating
-  // search strip — including when a larger font or a taller field grows it.
-  const [searchBarHeight, setSearchBarHeight] = useState(SEARCH_BAR_ESTIMATE);
-
   const toggleDrawer = () => {
     if (isDrawerOpen) {
       closeDrawer();
@@ -192,50 +180,39 @@ const RoomList: React.FC<RoomListProps> = ({
           <>
             <View style={styles.scrollContainer}>
               <HeaderRoomList setDrawerOpen={toggleDrawer} />
-              {/* The search field floats OVER the list rather than
-                  sitting above it in the column: its strip is transparent
-                  and the rooms scroll underneath, which is what the design
-                  shows. It is still fixed (not a ListHeaderComponent), so
-                  it stays reachable however far the list is scrolled — as a
-                  list header it scrolled away behind the opaque header. */}
-              <View style={styles.listArea}>
-                <FlatList
-                  data={filteredChats}
-                  keyExtractor={(item) => item.jid}
-                  // Clears the floating field on first paint; scrolling
-                  // then slides the rooms under it.
-                  contentContainerStyle={{ paddingTop: searchBarHeight }}
-                  renderItem={({ item }) => (
-                    <Pressable
-                      // Stable testID so e2e drivers can target a room
-                      // row by its jid local-part (e.g. Main chat under
-                      // app id `..._...759` → testID `room-...759`).
-                      testID={`room-${(item.jid || '').split('@')[0]}`}
-                      accessibilityLabel={`room-${item.title || item.name}`}
-                      onPress={() => performClick(item)}
-                      onPressIn={handlePressIn}
-                      onPressOut={handlePressOut}
-                    >
-                      <ChatRoomItem chat={item} config={config} />
-                    </Pressable>
-                  )}
-                  style={styles.chatList}
+              {/* Search sits ABOVE the list rather than in its
+                  ListHeaderComponent. As a list header it was simply the
+                  first scrolling row, so the moment you scrolled the rooms
+                  it slid up and disappeared behind the opaque header band.
+                  Fixed here it stays reachable, which is the entire point
+                  of a search field over a long list. */}
+              <View style={styles.searchBar}>
+                <SearchInput
+                  icon={<SearchIcon height={20} />}
+                  value={searchTerm}
+                  onChangeText={handleSearchChange}
+                  placeholder={t('search.placeholder')}
                 />
-                <View
-                  testID="room-list-search"
-                  style={styles.searchBar}
-                  onLayout={(e) =>
-                    setSearchBarHeight(e.nativeEvent.layout.height)
-                  }
-                >
-                  <SearchInput
-                    icon={<SearchIcon height={20} />}
-                    value={searchTerm}
-                    onChangeText={handleSearchChange}
-                    placeholder={t('search.placeholder')}
-                  />
-                </View>
               </View>
+              <FlatList
+                data={filteredChats}
+                keyExtractor={(item) => item.jid}
+                renderItem={({ item }) => (
+                  <Pressable
+                    // Stable testID so e2e drivers can target a room
+                    // row by its jid local-part (e.g. Main chat under
+                    // app id `..._...759` → testID `room-...759`).
+                    testID={`room-${(item.jid || '').split('@')[0]}`}
+                    accessibilityLabel={`room-${item.title || item.name}`}
+                    onPress={() => performClick(item)}
+                    onPressIn={handlePressIn}
+                    onPressOut={handlePressOut}
+                  >
+                    <ChatRoomItem chat={item} config={config} />
+                  </Pressable>
+                )}
+                style={styles.chatList}
+              />
 
               <HeaderRoomListMenu
                 closeDrawer={closeDrawer}
@@ -261,7 +238,7 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     flex: 1,
-    backgroundColor: LIST_BACKGROUND,
+    backgroundColor: '#fff',
   },
   scrollContainer: {
     flexGrow: 1,
@@ -272,9 +249,6 @@ const styles = StyleSheet.create({
     padding: 16,
     justifyContent: 'space-between',
   },
-  listArea: {
-    flex: 1,
-  },
   searchBar: {
     // `row` matters: SearchInputWrapper is `flex: 1` plus a fixed 44px
     // height. In a column parent that flex resolves VERTICALLY against a
@@ -282,19 +256,14 @@ const styles = StyleSheet.create({
     // but its magnifier. As a row it resolves to width, which is what it
     // meant back when the field was a list-header child.
     flexDirection: 'row',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
     paddingTop: 8,
-    paddingBottom: 8,
     paddingHorizontal: 16,
-    backgroundColor: 'transparent',
+    backgroundColor: '#FAFAFA',
   },
   chatList: {
     flex: 1,
     paddingHorizontal: 16,
-    backgroundColor: LIST_BACKGROUND,
+    backgroundColor: '#FAFAFA',
   },
 });