@ethora/chat-component-rn 26.8.5 → 26.8.6

package/src/components/MainComponents/RoomList.tsx

@@ -121,10 +121,16 @@ const RoomList: React.FC<RoomListProps> = ({
     setSearchTerm(text);
   }, []);
 
-  const getLastMessage = useCallback(
-    (chat: IRoom) => chat?.messages?.[chat?.messages.length - 1],
-    []
-  );
+  const activityOf = useCallback((chat: IRoom): number => {
+    const last = chat?.messages?.[chat?.messages.length - 1];
+    const fromLive = Number(last?.id);
+    if (Number.isFinite(fromLive) && fromLive > 0) {return fromLive;}
+    const fromStamp = Number(chat?.lastMessageTimestamp);
+    if (Number.isFinite(fromStamp) && fromStamp > 0) {return fromStamp;}
+    const fromSeed = Number(chat?.lastMessage?.id);
+    if (Number.isFinite(fromSeed) && fromSeed > 0) {return fromSeed;}
+    return 0;
+  }, []);
 
   const filteredChats = useMemo(() => {
     const lowerCaseSearchTerm = searchTerm.toLowerCase();
@@ -136,22 +142,13 @@ const RoomList: React.FC<RoomListProps> = ({
           const hay = `${chat?.title || ''} ${chat?.name || ''}`.toLowerCase();
           return hay.includes(lowerCaseSearchTerm);
         })
-        .sort((a, b) => {
-          if (getLastMessage(a)?.id && getLastMessage(b)?.id) {
-            return Number(getLastMessage(b).id) - Number(getLastMessage(a).id);
-          } else if (getLastMessage(a)?.id) {
-            return -1;
-          } else if (getLastMessage(b)?.id) {
-            return 1;
-          }
-          return -1;
-        });
+        .sort((a, b) => activityOf(b) - activityOf(a));
 
       chatsMap.set(lowerCaseSearchTerm, result);
     }
 
     return chatsMap.get(lowerCaseSearchTerm) || [];
-  }, [chats, searchTerm]);
+  }, [chats, searchTerm, activityOf]);
 
   useEffect(() => {
     if (burgerMenu) {
@@ -278,6 +275,21 @@ const RoomList: React.FC<RoomListProps> = ({
     }
   }, [isSearchFocused]);
 
+  const renderRoom = useCallback(
+    ({ item }: { item: IRoom }) => (
+      <Pressable
+        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>
+    ),
+    [performClick, handlePressIn, handlePressOut, config]
+  );
+
   const toggleDrawer = () => {
     if (isDrawerOpen) {
       closeDrawer();
@@ -392,20 +404,7 @@ const RoomList: React.FC<RoomListProps> = ({
                   onMomentumScrollBegin={handleMomentumBegin}
                   onMomentumScrollEnd={handleMomentumEnd}
                   keyboardShouldPersistTaps="handled"
-                  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>
-                  )}
+                  renderItem={renderRoom}
                   style={[
                     styles.chatList,
                     { backgroundColor: theme.listBackground },

package/src/components/MainComponents/RoomStack.tsx

@@ -1,27 +1,24 @@
 import React, {
   forwardRef,
+  memo,
   ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
+  useState,
 } from 'react';
 import {
+  Animated,
   BackHandler,
+  Easing,
   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.
@@ -37,6 +34,17 @@ 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) };
 
+/**
+ * Holds its children still while `frozen`: the list under an open room is
+ * fully covered, so re-rendering it on every store update (each incoming
+ * message) is wasted work on the JS thread. It thaws as soon as it is
+ * about to be seen again.
+ */
+const Freezable = memo(
+  ({ children }: { frozen: boolean; children: ReactNode }) => <>{children}</>,
+  (_prev, next) => next.frozen
+);
+
 export interface RoomStackHandle {
   /** Slide the room out, then call `onBack`. */
   pop: () => void;
@@ -59,16 +67,43 @@ interface RoomStackProps {
  * 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).
+ *
+ * Driven by RN's own `Animated` (native driver), not Reanimated: every layer
+ * derives from ONE value through interpolation, so the layers cannot drift
+ * apart, and a React re-render mid-flight cannot reset a layer to the style
+ * it was first rendered with.
  */
 export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
   ({ list, room, onBack, roomBackground, hardwareBack = true }, ref) => {
     const { width: windowWidth } = useWindowDimensions();
-    const width = useSharedValue(windowWidth);
+    const [width, setWidth] = useState(windowWidth);
+    const widthRef = useRef(width);
+    widthRef.current = width;
     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 x = useRef(new Animated.Value(hasRoom ? 0 : windowWidth)).current;
+    const closing = useRef(false);
+
+    // True while the list is (about to be) visible under a moving room.
+    const [peeking, setPeeking] = useState(false);
+    // Bumped after every completed pop — see the settle effect below.
+    const [popCount, setPopCount] = useState(0);
+
+    const slideTo = useCallback(
+      (
+        toValue: number,
+        config: typeof PUSH,
+        done?: (finished: boolean) => void
+      ) => {
+        Animated.timing(x, {
+          toValue,
+          ...config,
+          useNativeDriver: true,
+        }).start(({ finished }) => done?.(finished));
+      },
+      [x]
+    );
 
     const isFirstRender = useRef(true);
     useEffect(() => {
@@ -76,31 +111,56 @@ export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
         isFirstRender.current = false;
         return;
       }
-      closing.value = false;
+      closing.current = false;
+      setPeeking(false);
+      x.stopAnimation();
+      x.setValue(widthRef.current);
       if (hasRoom) {
-        x.value = width.value;
-        x.value = withTiming(0, PUSH);
-      } else {
-        x.value = width.value;
+        slideTo(0, PUSH);
       }
     }, [hasRoom]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const onBackRef = useRef(onBack);
     onBackRef.current = onBack;
-    const finish = useCallback(() => onBackRef.current(), []);
+    const finish = useCallback(() => {
+      onBackRef.current();
+      setPopCount(count => count + 1);
+    }, []);
 
-    const pop = useCallback(() => {
-      if (closing.value) {
+    // `onBack` normally clears the room, and the effect above takes over.
+    // If the room is still (or again) there after a pop — something
+    // re-selected it — bring it back on screen: a room parked off-screen
+    // would leave the list visible but untouchable.
+    const hasRoomRef = useRef(hasRoom);
+    hasRoomRef.current = hasRoom;
+    useEffect(() => {
+      if (popCount === 0 || !hasRoomRef.current) {
         return;
       }
-      closing.value = true;
-      Keyboard.dismiss();
-      x.value = withTiming(width.value, POP, finished => {
+      closing.current = false;
+      setPeeking(false);
+      slideTo(0, POP);
+    }, [popCount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const slideOut = useCallback(() => {
+      closing.current = true;
+      setPeeking(true);
+      slideTo(widthRef.current, POP, finished => {
         if (finished) {
-          runOnJS(finish)();
+          finish();
+        } else {
+          closing.current = false;
         }
       });
-    }, [finish]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [finish, slideTo]);
+
+    const pop = useCallback(() => {
+      if (closing.current) {
+        return;
+      }
+      Keyboard.dismiss();
+      slideOut();
+    }, [slideOut]);
 
     useImperativeHandle(ref, () => ({ pop }), [pop]);
 
@@ -115,80 +175,93 @@ export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
       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)();
+    const swipeBack = useMemo(
+      () =>
+        Gesture.Pan()
+          .runOnJS(true)
+          .hitSlop({ left: 0, width: EDGE_WIDTH })
+          .activeOffsetX(12)
+          .failOffsetY([-16, 16])
+          .onStart(() => {
+            if (closing.current) {
+              return;
             }
-          });
-        } else {
-          x.value = withTiming(0, POP);
-        }
-      });
+            Keyboard.dismiss();
+            setPeeking(true);
+            x.stopAnimation();
+          })
+          .onUpdate(e => {
+            if (closing.current) {
+              return;
+            }
+            x.setValue(Math.min(Math.max(e.translationX, 0), widthRef.current));
+          })
+          .onEnd(e => {
+            if (closing.current) {
+              return;
+            }
+            const complete =
+              e.translationX > widthRef.current * COMPLETE_DISTANCE ||
+              e.velocityX > COMPLETE_VELOCITY;
+            if (complete) {
+              slideOut();
+            } else {
+              slideTo(0, POP, () => setPeeking(false));
+            }
+          }),
+      [slideOut, slideTo, x]
+    );
 
-    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;
+    const onLayout = useCallback(
+      (e: LayoutChangeEvent) => {
+        const next = e.nativeEvent.layout.width;
+        if (next > 0 && next !== widthRef.current) {
+          // Keep an off-screen room off-screen when the container resizes.
+          if (!hasRoomRef.current) {
+            x.setValue(next);
+          }
+          setWidth(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]),
-    }));
+      },
+      [x]
+    );
+
+    const { listShift, dimOpacity } = useMemo(
+      () => ({
+        listShift: x.interpolate({
+          inputRange: [0, width],
+          outputRange: [-width * LIST_PARALLAX, 0],
+          extrapolate: 'clamp',
+        }),
+        dimOpacity: x.interpolate({
+          inputRange: [0, width],
+          outputRange: [LIST_DIM, 0],
+          extrapolate: 'clamp',
+        }),
+      }),
+      [x, width]
+    );
 
     return (
       <View style={styles.container} onLayout={onLayout}>
         <Animated.View
-          style={[styles.layer, listStyle]}
+          style={[
+            styles.layer,
+            // Without a room the list always rests in place, whatever the
+            // animated value is doing.
+            hasRoom ? { transform: [{ translateX: listShift }] } : null,
+          ]}
           pointerEvents={hasRoom ? 'none' : 'auto'}
           accessibilityElementsHidden={hasRoom}
           importantForAccessibility={hasRoom ? 'no-hide-descendants' : 'auto'}
         >
-          {list}
+          <Freezable frozen={hasRoom && !peeking}>{list}</Freezable>
         </Animated.View>
         {hasRoom && (
           <>
             <Animated.View
               pointerEvents="none"
-              style={[styles.layer, styles.dim, dimStyle]}
+              style={[styles.layer, styles.dim, { opacity: dimOpacity }]}
             />
             <GestureDetector gesture={swipeBack}>
               <Animated.View
@@ -196,7 +269,7 @@ export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
                   styles.layer,
                   styles.room,
                   { backgroundColor: roomBackground },
-                  roomStyle,
+                  { transform: [{ translateX: x }] },
                 ]}
               >
                 {room}

package/src/components/MainComponents/SystemMessage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface SystemMessageProps {
   messageText?: string;
@@ -10,6 +11,9 @@ const SystemMessage: React.FC<SystemMessageProps> = ({
   messageText,
   colors,
 }) => {
+  // Same pill as the day separator; `colors.secondary` is not a pill
+  // colour (see DateLabel).
+  const theme = useTheme();
   return (
     <View style={styles.container}>
       {/* maxWidth lives on this View (not the Text) so the Text reliably
@@ -19,10 +23,10 @@ const SystemMessage: React.FC<SystemMessageProps> = ({
       <View
         style={[
           styles.bubble,
-          { backgroundColor: colors?.secondary || '#e7edf9' },
+          { backgroundColor: theme.dateLabelBackground },
         ]}
       >
-        <Text style={[styles.text, { color: colors?.primary || '#0052cd' }]}>
+        <Text style={[styles.text, { color: colors?.primary || theme.dateLabel }]}>
           {messageText}
         </Text>
       </View>

package/src/components/MessageBubble/Avatar.tsx

@@ -11,6 +11,8 @@ interface AvatarProps {
   firstName?: string;
   lastName?: string;
   style?: object;
+  /** Initials size (default 16) — small avatars need smaller text. */
+  textSize?: number;
 }
 
 const AvatarCircle = styled.View<{ bgColor?: string }>`
@@ -41,6 +43,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   firstName,
   lastName,
   style,
+  textSize,
 }) => {
   const { config } = useChatSettingState();
   const backgroundColor = useMemo(() => {
@@ -85,7 +88,10 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <AvatarCircle style={style} bgColor={backgroundColor?.backgroundColor}>
-      <AvatarText color={getAvatarTextColor(backgroundColor?.backgroundColor)}>
+      <AvatarText
+        color={getAvatarTextColor(backgroundColor?.backgroundColor)}
+        style={textSize ? { fontSize: textSize } : undefined}
+      >
         {getInitials()}
       </AvatarText>
     </AvatarCircle>

package/src/components/MessageBubble/BottomReplyContainer.tsx

@@ -2,8 +2,10 @@ import { FC, useMemo } from 'react';
 import { IReply, IUser } from '../../types/types';
 import { Avatar } from './Avatar';
 import { styled } from 'styled-components/native';
-import { Platform, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../roomStore';
 
 interface BottomReplyContainerProps {
   isUser: boolean;
@@ -13,29 +15,13 @@ interface BottomReplyContainerProps {
 
 const ReplyContainer = styled.TouchableOpacity<{ isUser: boolean }>`
   background-color: ${({ theme }) => theme.surface};
-  left: ${(props) => (!props.isUser ? '10px' : 'auto')};
-  right: ${(props) => (props.isUser ? '10px' : 'auto')};
-  padding: 4px 8px 4px 16px;
-  border-radius: 20px;
+  border: 0.5px solid ${({ theme }) => theme.border};
+  padding: 3px 10px 3px 14px;
+  border-radius: 14px;
   flex-direction: row;
   align-items: center;
   gap: 6px;
-  margin: 8px 8px 0;
 
-  ${({ theme }) =>
-    Platform.select({
-      // The light shadow is a soft bluish-grey tuned for a white card; on
-      // the dark palette that would read as a glow, so use the theme shadow.
-      ios: `
-      shadow-color: ${theme.dark ? theme.shadow : 'rgba(185, 198, 199, 1)'};
-      shadow-offset: 0px 0px;
-      shadow-opacity: 1;
-      shadow-radius: 8px;
-    `,
-      android: `
-      elevation: 8;
-    `,
-    })}
 `;
 
 const AvatarCircle = styled.View`
@@ -75,6 +61,17 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
   onClick,
 }) => {
   const theme = useTheme();
+  // The repliers' real names: a reply restored from cache carries only the
+  // sender's id, so resolve through the same directory the bubbles use.
+  const usersSet = useSelector((state: RootState) => state.rooms.usersSet);
+  const nameOf = (u: any): string => {
+    const raw = String(u?.id || '');
+    const entry = usersSet?.[raw.split('@')[0]] || usersSet?.[raw];
+    const full = entry
+      ? `${entry.firstName || ''} ${entry.lastName || ''}`.trim() || entry.name
+      : '';
+    return full || u?.name || '';
+  };
   const uniqueUsers: IUser[] = useMemo(() => {
     return Object.values(
       reply.reduce<Record<string, IUser>>((acc, item) => {
@@ -94,7 +91,8 @@ export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
         {uniqueUsers.slice(0, 3).map((item) => (
           <AvatarCircle key={item.id}>
             <Avatar
-              username={item.name}
+              username={nameOf(item)}
+              textSize={10}
               style={{
                 height: '100%',
                 width: '100%',