stream-chat-react-native-core 9.3.1-beta.2 → 9.3.1-beta.4

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   I18nManager,
   Platform,
@@ -109,6 +109,42 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
   const { command, text } = useStateStore(textComposer.state, textComposerStateSelector);
   const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
 
+  // RN's onChangeText doesn't carry cursor info, and iOS / Android fire
+  // onChangeText vs onSelectionChange in different orders. Rather than derive
+  // the caret from a text-length delta (fragile — gets clobbered by re-renders
+  // and varies across platforms), we hold the latest values reported by native
+  // and call into the LLC once both have settled.
+  const latestTextRef = useRef('');
+  const latestSelectionRef = useRef<{ end: number; start: number }>({
+    end: 0,
+    start: 0,
+  });
+  const flushHandleRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const flushChange = useCallback(() => {
+    flushHandleRef.current = null;
+    textComposer.handleChange({
+      selection: latestSelectionRef.current,
+      text: latestTextRef.current,
+    });
+  }, [textComposer]);
+
+  // Defer to the next task so onChangeText and onSelectionChange both land
+  // before we forward to the LLC, regardless of platform ordering.
+  const scheduleChange = useCallback(() => {
+    if (flushHandleRef.current !== null) return;
+    flushHandleRef.current = setTimeout(flushChange, 0);
+  }, [flushChange]);
+
+  useEffect(() => {
+    return () => {
+      if (flushHandleRef.current !== null) {
+        clearTimeout(flushHandleRef.current);
+        flushHandleRef.current = null;
+      }
+    };
+  }, []);
+
   const maxMessageLength = useMemo(() => {
     return channel.getConfig()?.max_message_length;
   }, [channel]);
@@ -119,6 +155,14 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
 
   useEffect(() => {
     setLocalText(text);
+    // Only resync the refs when the text change came from outside (clear after
+    // send, draft restore, programmatic setText). For changes we triggered
+    // ourselves, latestTextRef is already up to date and overwriting the
+    // selection would clobber what onSelectionChange just told us.
+    if (text !== latestTextRef.current) {
+      latestTextRef.current = text;
+      latestSelectionRef.current = { end: text.length, start: text.length };
+    }
   }, [text]);
 
   const clearState = useCallback(() => {
@@ -148,24 +192,20 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
   const handleSelectionChange = useCallback(
     (e: TextInputSelectionChangeEvent) => {
       const { selection } = e.nativeEvent;
+      latestSelectionRef.current = selection;
       textComposer.setSelection(selection);
+      scheduleChange();
     },
-    [textComposer],
+    [scheduleChange, textComposer],
   );
 
   const onChangeTextHandler = useCallback(
     (newText: string) => {
       setLocalText(newText);
-
-      textComposer.handleChange({
-        selection: {
-          end: newText.length,
-          start: newText.length,
-        },
-        text: newText,
-      });
+      latestTextRef.current = newText;
+      scheduleChange();
     },
-    [textComposer],
+    [scheduleChange],
   );
 
   const {

package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.tsx

@@ -112,8 +112,13 @@ describe('AutoCompleteInput', () => {
 
     const input = queryByTestId('auto-complete-text-input')!;
 
+    // RN fires both events for every keystroke; we forward to the LLC once
+    // both have settled, so the test mirrors that.
     act(() => {
       fireEvent.changeText(input, 'hello');
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: 5, start: 5 } },
+      });
     });
 
     await waitFor(() => {
@@ -170,6 +175,119 @@ describe('AutoCompleteInput', () => {
     });
   });
 
+  it('forwards the real caret position to handleChange when typing in the middle of multi-line text', async () => {
+    // Regression: when the user inserts a character somewhere other than the
+    // end of the text (e.g. typing "@" between paragraphs), the original
+    // implementation passed selection.end = newText.length, which caused the
+    // LLC mention-trigger regex to miss "@" on multi-line input because it
+    // only tolerates one whitespace between "@" and end-of-string.
+    const { textComposer } = channel.messageComposer;
+    const spyHandleChange = jest.spyOn(textComposer, 'handleChange');
+
+    renderComponent({ channelProps: { channel }, client, props: {} });
+
+    const input = screen.getByTestId('auto-complete-text-input');
+
+    // Seed the input with some multi-line text and place the caret between
+    // the two leading newlines (position 6 — right after "asdf\n\n", before
+    // the trailing "\n\n dsfa").
+    const seeded = 'asdf\n\n\n\n dsfa';
+    const caret = 6;
+    act(() => {
+      fireEvent.changeText(input, seeded);
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: caret, start: caret } },
+      });
+    });
+
+    await waitFor(() => {
+      expect(spyHandleChange).toHaveBeenCalledWith({
+        selection: { end: caret, start: caret },
+        text: seeded,
+      });
+    });
+
+    spyHandleChange.mockClear();
+
+    // User types "@" at the caret. Both events fire in a single keystroke.
+    const inserted = 'asdf\n\n@\n\n dsfa';
+    const newCaret = caret + 1;
+    act(() => {
+      fireEvent.changeText(input, inserted);
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: newCaret, start: newCaret } },
+      });
+    });
+
+    await waitFor(() => {
+      // Must land right after the inserted "@", not at end-of-string —
+      // otherwise the LLC mention regex misses "@" because of the trailing
+      // "\n\n dsfa".
+      expect(spyHandleChange).toHaveBeenCalledWith({
+        selection: { end: newCaret, start: newCaret },
+        text: inserted,
+      });
+    });
+  });
+
+  it('forwards the real caret to handleChange when the user deletes "@" and retypes it', async () => {
+    // Regression: deleting "@" and retyping it on the same single line caused
+    // the picker to stay hidden on iOS — and on Android even with newlines.
+    // The bug was that we derived the caret from a text-length delta plus a
+    // stale ref; the coalesced flush now uses whatever native actually
+    // reported via onSelectionChange.
+    const { textComposer } = channel.messageComposer;
+    const spyHandleChange = jest.spyOn(textComposer, 'handleChange');
+
+    renderComponent({ channelProps: { channel }, client, props: {} });
+
+    const input = screen.getByTestId('auto-complete-text-input');
+
+    // 1. Seed "asdf @ dsfa" with the caret right after "@".
+    act(() => {
+      fireEvent.changeText(input, 'asdf @ dsfa');
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: 6, start: 6 } },
+      });
+    });
+
+    await waitFor(() => {
+      expect(spyHandleChange).toHaveBeenCalledWith({
+        selection: { end: 6, start: 6 },
+        text: 'asdf @ dsfa',
+      });
+    });
+
+    // 2. Delete the "@" — text shrinks by one, caret moves to position 5.
+    act(() => {
+      fireEvent.changeText(input, 'asdf  dsfa');
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: 5, start: 5 } },
+      });
+    });
+
+    spyHandleChange.mockClear();
+
+    // 3. Retype "@" at position 5.
+    act(() => {
+      fireEvent.changeText(input, 'asdf @ dsfa');
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: 6, start: 6 } },
+      });
+    });
+
+    await waitFor(() => {
+      // The cursor must be reported at 6 (right after the new "@"), not
+      // somewhere stale. With a wrong caret, the LLC slice would include
+      // " dsfa" after the "@" and the query would be " dsfa" instead of "",
+      // which returns zero users → picker stays hidden.
+      expect(spyHandleChange).toHaveBeenCalledWith({
+        selection: { end: 6, start: 6 },
+        text: 'asdf @ dsfa',
+      });
+    });
+  });
+
   it('should call the textComposer setSelection when the onSelectionChange is triggered', async () => {
     const { textComposer } = channel.messageComposer;
 

package/src/components/Message/MessageItemView/MessageBubble.tsx

@@ -27,7 +27,9 @@ type SwipableMessageWrapperProps = Pick<
   onSwipe: () => void;
 };
 
-export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
+export const SwipableMessageWrapper = React.memo(function SwipableMessageWrapper(
+  props: SwipableMessageWrapperProps,
+) {
   const { children, messageSwipeToReplyHitSlop, onSwipe } = props;
   const { MessageSwipeContent } = useComponentsContext();
   const isRTL = I18nManager.isRTL;

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { AnimatableNumericValue, ColorValue, Pressable, StyleSheet, View } from 'react-native';
+import { ColorValue, Pressable, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
@@ -169,47 +169,46 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     [message, isMessageAIGenerated],
   );
 
-  const getBorderRadius = () => {
+  // Merged background-color + border-radius object passed directly into the
+  // bubble's style array (no spread at the call site). Theme-defined radii
+  // override the group-position-computed defaults; theme-undefined radii are
+  // omitted so they don't override the computed defaults.
+  const bubbleColorAndRadius = useMemo<ViewStyle>(() => {
     // enum('top', 'middle', 'bottom', 'single')
     const groupPosition = groupStyles?.[0];
-
     const isBottomOrSingle = groupPosition === 'single' || groupPosition === 'bottom';
-    let borderBottomLeftRadius = components.messageBubbleRadiusGroupBottom;
-    let borderBottomRightRadius = components.messageBubbleRadiusGroupBottom;
 
+    let computedBottomLeftRadius = components.messageBubbleRadiusGroupBottom;
+    let computedBottomRightRadius = components.messageBubbleRadiusGroupBottom;
     if (isBottomOrSingle) {
-      // add relevant sharp corner
+      // add relevant sharp corner (the "tail")
       if (isMyMessage) {
-        borderBottomRightRadius = components.messageBubbleRadiusTail;
+        computedBottomRightRadius = components.messageBubbleRadiusTail;
       } else {
-        borderBottomLeftRadius = components.messageBubbleRadiusTail;
+        computedBottomLeftRadius = components.messageBubbleRadiusTail;
       }
     }
 
-    return {
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-    };
-  };
-
-  const getBorderRadiusFromTheme = () => {
-    const bordersFromTheme: Record<string, string | AnimatableNumericValue | undefined> = {
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      borderRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
+    const style: ViewStyle = {
+      backgroundColor,
+      borderBottomLeftRadius: borderBottomLeftRadius ?? computedBottomLeftRadius,
+      borderBottomRightRadius: borderBottomRightRadius ?? computedBottomRightRadius,
     };
+    if (borderRadius !== undefined) style.borderRadius = borderRadius;
+    if (borderTopLeftRadius !== undefined) style.borderTopLeftRadius = borderTopLeftRadius;
+    if (borderTopRightRadius !== undefined) style.borderTopRightRadius = borderTopRightRadius;
 
-    // filter out undefined values
-    for (const key in bordersFromTheme) {
-      if (bordersFromTheme[key] === undefined) {
-        delete bordersFromTheme[key];
-      }
-    }
-
-    return bordersFromTheme;
-  };
+    return style;
+  }, [
+    backgroundColor,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    groupStyles,
+    isMyMessage,
+  ]);
 
   const { setNativeScrollability } = useMessageListItemContext();
   const hasContentSideViews = !!(MessageContentLeadingView || MessageContentTrailingView);
@@ -357,12 +356,8 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
       <View
         style={[
           styles.containerInner,
-          {
-            backgroundColor,
-            ...getBorderRadius(),
-            ...getBorderRadiusFromTheme(),
-          },
-          noBorder ? { borderWidth: 0 } : {},
+          bubbleColorAndRadius,
+          noBorder ? styles.noBorder : null,
           containerInner,
           messageGroupedSingleOrBottom
             ? isVeryLastMessage && enableMessageGroupingByUser
@@ -684,6 +679,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   galleryContainer: {},
+  noBorder: { borderWidth: 0 },
   rightAlignContent: {
     justifyContent: 'flex-end',
   },

package/src/components/Message/MessageItemView/MessageWrapper.tsx

@@ -30,7 +30,7 @@ export type MessageWrapperProps = {
   nextMessage?: LocalMessage;
 };
 
-export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
+export const MessageWrapper = React.memo(function MessageWrapper(props: MessageWrapperProps) {
   const { message, previousMessage, nextMessage } = props;
   const { client } = useChatContext();
   const {

package/src/components/Message/MessageItemView/utils/renderText.tsx

@@ -101,6 +101,37 @@ const defaultMarkdownStyles: MarkdownStyle = {
     fontSize: primitives.typographyFontSizeMd,
     lineHeight: primitives.typographyLineHeightNormal,
   },
+  // Heading sizes are derived from the body font size (`typographyFontSizeMd`) so they
+  // scale with the integrator's typography settings. lineHeight = fontSize × 1.25 to
+  // give headings room to breathe. Both fields are required here: without lineHeight,
+  // the inherited `lineHeight: typographyLineHeightNormal` (20) from `styles.text` (set
+  // in renderText below) leaks into the heading's inner Text via the markdown library's
+  // text rule (`{...styles.text, ...state.style}`) and squishes larger heading fontSizes
+  // into a 20px line box.
+  heading1: {
+    fontSize: primitives.typographyFontSizeMd * 2,
+    lineHeight: primitives.typographyFontSizeMd * 2 * 1.25,
+  },
+  heading2: {
+    fontSize: primitives.typographyFontSizeMd * 1.5,
+    lineHeight: primitives.typographyFontSizeMd * 1.5 * 1.25,
+  },
+  heading3: {
+    fontSize: primitives.typographyFontSizeMd * 1.25,
+    lineHeight: primitives.typographyFontSizeMd * 1.25 * 1.25,
+  },
+  heading4: {
+    fontSize: primitives.typographyFontSizeMd,
+    lineHeight: primitives.typographyFontSizeMd * 1.25,
+  },
+  heading5: {
+    fontSize: primitives.typographyFontSizeMd * 0.875,
+    lineHeight: primitives.typographyFontSizeMd * 0.875 * 1.25,
+  },
+  heading6: {
+    fontSize: primitives.typographyFontSizeMd * 0.75,
+    lineHeight: primitives.typographyFontSizeMd * 0.75 * 1.25,
+  },
   inlineCode: {
     padding: primitives.spacingXxs,
     paddingHorizontal: primitives.spacingXxs,

package/src/components/Message/hooks/useMessageDeliveryData.ts

@@ -1,14 +1,18 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Event, LocalMessage, UserResponse } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStableCallback } from '../../../hooks';
 
 export const useMessageDeliveredData = ({ message }: { message?: LocalMessage }) => {
   const { channel } = useChannelContext();
   const { client } = useChatContext();
-  const calculate = useCallback(() => {
+
+  const messageIdRef = useRef<string>(message?.id);
+
+  const calculate = useStableCallback(() => {
     if (!message?.created_at) {
       return [];
     }
@@ -17,13 +21,14 @@ export const useMessageDeliveredData = ({ message }: { message?: LocalMessage })
       timestampMs: new Date(message.created_at).getTime(),
     };
     return channel.messageReceiptsTracker.deliveredForMessage(messageRef);
-  }, [channel, message]);
+  });
 
-  const [deliveredTo, setDeliveredTo] = useState<UserResponse[]>([]);
+  const [deliveredTo, setDeliveredTo] = useState<UserResponse[]>(() => calculate());
 
-  useEffect(() => {
+  if (!!messageIdRef.current && !!message?.id && messageIdRef.current !== message.id) {
     setDeliveredTo(calculate());
-  }, [calculate]);
+    messageIdRef.current = message.id;
+  }
 
   useEffect(() => {
     const { unsubscribe } = channel.on('message.delivered', (event: Event) => {

package/src/components/Message/hooks/useMessageReadData.ts

@@ -1,14 +1,18 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Event, LocalMessage, UserResponse } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStableCallback } from '../../../hooks';
 
 export const useMessageReadData = ({ message }: { message?: LocalMessage }) => {
   const { channel } = useChannelContext();
   const { client } = useChatContext();
-  const calculate = useCallback(() => {
+
+  const messageIdRef = useRef<string>(message?.id);
+
+  const calculate = useStableCallback(() => {
     if (!message?.created_at) {
       return [];
     }
@@ -18,13 +22,14 @@ export const useMessageReadData = ({ message }: { message?: LocalMessage }) => {
     };
 
     return channel.messageReceiptsTracker.readersForMessage(messageRef);
-  }, [channel, message]);
+  });
 
-  const [readBy, setReadBy] = useState<UserResponse[]>([]);
+  const [readBy, setReadBy] = useState<UserResponse[]>(() => calculate());
 
-  useEffect(() => {
+  if (!!messageIdRef.current && !!message?.id && messageIdRef.current !== message.id) {
     setReadBy(calculate());
-  }, [calculate]);
+    messageIdRef.current = message.id;
+  }
 
   useEffect(() => {
     const { unsubscribe } = channel.on('message.read', (event: Event) => {

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -511,7 +511,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                         "borderBottomLeftRadius": 0,
                                         "borderBottomRightRadius": 20,
                                       },
-                                      {},
+                                      null,
                                       {},
                                       {},
                                     ]
@@ -843,7 +843,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                         "borderBottomLeftRadius": 0,
                                         "borderBottomRightRadius": 20,
                                       },
-                                      {},
+                                      null,
                                       {},
                                       {},
                                     ]
@@ -1208,7 +1208,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                         "borderBottomLeftRadius": 0,
                                         "borderBottomRightRadius": 20,
                                       },
-                                      {},
+                                      null,
                                       {},
                                       {},
                                     ]
@@ -1534,7 +1534,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                         "borderBottomLeftRadius": 0,
                                         "borderBottomRightRadius": 20,
                                       },
-                                      {},
+                                      null,
                                       {},
                                       {},
                                     ]

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.3.1-beta.2"
+  "version": "9.3.1-beta.4"
 }