Next Release

examples/ExpoMessaging/app.json

@@ -15,6 +15,9 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
+    "experiments": {
+      "reactCompiler": true
+    },
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,

examples/ExpoMessaging/package.json

@@ -18,26 +18,26 @@
     "@react-native-firebase/messaging": "^23.4.0",
     "@react-navigation/elements": "^2.6.4",
     "@react-navigation/native": "^7.1.8",
-    "@shopify/flash-list": "^2.1.0",
-    "expo": "54.0.13",
-    "expo-audio": "~1.0.13",
+    "@shopify/flash-list": "2.0.2",
+    "expo": "54.0.22",
+    "expo-audio": "~1.0.14",
     "expo-build-properties": "~1.0.9",
     "expo-clipboard": "~8.0.7",
-    "expo-constants": "~18.0.9",
+    "expo-constants": "~18.0.10",
     "expo-document-picker": "~14.0.7",
     "expo-file-system": "~19.0.17",
     "expo-haptics": "~15.0.7",
     "expo-image-manipulator": "~14.0.7",
     "expo-image-picker": "~17.0.8",
     "expo-linking": "~8.0.8",
     "expo-location": "~19.0.7",
-    "expo-router": "~6.0.12",
+    "expo-router": "~6.0.14",
     "expo-sharing": "~14.0.7",
     "expo-splash-screen": "~31.0.10",
     "expo-status-bar": "~3.0.8",
-    "expo-video": "~3.0.11",
+    "expo-video": "~3.0.14",
     "react": "19.1.0",
-    "react-native": "0.81.4",
+    "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-maps": "1.20.1",
     "react-native-reanimated": "~4.1.1",

examples/SampleApp/babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
-  plugins: ['react-native-worklets/plugin'],
+  plugins: ['babel-plugin-react-compiler', 'react-native-worklets/plugin'],
 };

examples/SampleApp/package.json

@@ -75,6 +75,7 @@
     "@types/lodash.mergewith": "^4.6.9",
     "@types/react": "^19.1.0",
     "@types/react-test-renderer": "^19.1.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.28.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jest": "^28.13.3",

examples/SampleApp/src/components/MessageInfoBottomSheet.tsx

@@ -0,0 +1,102 @@
+import React, { useMemo } from 'react';
+import BottomSheet, { BottomSheetFlatList } from '@gorhom/bottom-sheet';
+import { BottomSheetView } from '@gorhom/bottom-sheet';
+import {
+  Avatar,
+  useChatContext,
+  useMessageDeliveredData,
+  useMessageReadData,
+  useTheme,
+} from 'stream-chat-react-native';
+import { LocalMessage, UserResponse } from 'stream-chat';
+import { StyleSheet, Text, View } from 'react-native';
+
+const renderUserItem = ({ item }: { item: UserResponse }) => (
+  <View style={styles.userItem}>
+    <Avatar image={item.image} name={item.name ?? item.id} size={32} />
+    <Text style={styles.userName}>{item.name ?? item.id}</Text>
+  </View>
+);
+
+const renderEmptyText = ({ text }: { text: string }) => (
+  <Text style={styles.emptyText}>{text}</Text>
+);
+
+export const MessageInfoBottomSheet = ({
+  message,
+  ref,
+}: {
+  message?: LocalMessage;
+  ref: React.RefObject<BottomSheet | null>;
+}) => {
+  const {
+    theme: { colors },
+  } = useTheme();
+  const { client } = useChatContext();
+  const deliveredStatus = useMessageDeliveredData({ message });
+  const readStatus = useMessageReadData({ message });
+
+  const otherDeliveredToUsers = useMemo(() => {
+    return deliveredStatus.filter((user: UserResponse) => user.id !== client?.user?.id);
+  }, [deliveredStatus, client?.user?.id]);
+
+  const otherReadUsers = useMemo(() => {
+    return readStatus.filter((user: UserResponse) => user.id !== client?.user?.id);
+  }, [readStatus, client?.user?.id]);
+
+  return (
+    <BottomSheet enablePanDownToClose ref={ref} index={-1} snapPoints={['50%']}>
+      <BottomSheetView style={[styles.container, { backgroundColor: colors.white_smoke }]}>
+        <Text style={styles.title}>Read</Text>
+        <BottomSheetFlatList
+          data={otherReadUsers}
+          renderItem={renderUserItem}
+          keyExtractor={(item) => item.id}
+          style={styles.flatList}
+          ListEmptyComponent={renderEmptyText({ text: 'No one has read this message.' })}
+        />
+        <Text style={styles.title}>Delivered</Text>
+        <BottomSheetFlatList
+          data={otherDeliveredToUsers}
+          renderItem={renderUserItem}
+          keyExtractor={(item) => item.id}
+          style={styles.flatList}
+          ListEmptyComponent={renderEmptyText({ text: 'The message was not delivered to anyone.' })}
+        />
+      </BottomSheetView>
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    justifyContent: 'center',
+    height: '100%',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginVertical: 8,
+  },
+  flatList: {
+    borderRadius: 16,
+  },
+  userItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+    backgroundColor: 'white',
+  },
+  userName: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginLeft: 16,
+  },
+  emptyText: {
+    fontSize: 16,
+    marginVertical: 16,
+    textAlign: 'center',
+  },
+});

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { LocalMessage, Channel as StreamChatChannel } from 'stream-chat';
 import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/native';
 import {
@@ -33,6 +33,8 @@ import { channelMessageActions } from '../utils/messageActions.tsx';
 import { MessageLocation } from '../components/LocationSharing/MessageLocation.tsx';
 import { useStreamChatContext } from '../context/StreamChatContext.tsx';
 import { CustomAttachmentPickerSelectionBar } from '../components/AttachmentPickerSelectionBar.tsx';
+import BottomSheet from '@gorhom/bottom-sheet';
+import { MessageInfoBottomSheet } from '../components/MessageInfoBottomSheet.tsx';
 
 export type ChannelScreenNavigationProp = NativeStackNavigationProp<
   StackNavigatorParamList,
@@ -115,19 +117,20 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
 
 // Either provide channel or channelId.
 export const ChannelScreen: React.FC<ChannelScreenProps> = ({
+  navigation,
   route: {
     params: { channel: channelFromProp, channelId, messageId },
   },
 }) => {
   const { chatClient, messageListImplementation, messageListMode, messageListPruning } =
     useAppContext();
-  const navigation = useNavigation();
   const { bottom } = useSafeAreaInsets();
   const {
     theme: { colors },
   } = useTheme();
   const { t } = useTranslationContext();
   const { setThread } = useStreamChatContext();
+  const [selectedMessage, setSelectedMessage] = useState<LocalMessage | undefined>(undefined);
 
   const [channel, setChannel] = useState<StreamChatChannel | undefined>(channelFromProp);
 
@@ -170,6 +173,9 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
 
   const onThreadSelect = useCallback(
     (thread: LocalMessage | null) => {
+      if (!thread || !channel) {
+        return;
+      }
       setSelectedThread(thread);
       setThread(thread);
       navigation.navigate('ThreadScreen', {
@@ -180,6 +186,16 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     [channel, navigation, setThread],
   );
 
+  const messageInfoBottomSheetRef = useRef<BottomSheet>(null);
+
+  const handleMessageInfo = useCallback(
+    (message: LocalMessage) => {
+      setSelectedMessage(message);
+      messageInfoBottomSheetRef.current?.snapToIndex(1);
+    },
+    [messageInfoBottomSheetRef],
+  );
+
   const messageActions = useCallback(
     (params: MessageActionsParams) => {
       if (!chatClient) {
@@ -190,9 +206,10 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         chatClient,
         t,
         colors,
+        handleMessageInfo,
       });
     },
-    [chatClient, colors, t],
+    [chatClient, colors, t, handleMessageInfo],
   );
 
   if (!channel || !chatClient) {
@@ -232,6 +249,7 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         )}
         <AITypingIndicatorView channel={channel} />
         <MessageInput />
+        <MessageInfoBottomSheet message={selectedMessage} ref={messageInfoBottomSheetRef} />
       </Channel>
     </View>
   );

examples/SampleApp/src/utils/messageActions.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
 import { Alert } from 'react-native';
-import { StreamChat } from 'stream-chat';
+import { LocalMessage, StreamChat } from 'stream-chat';
 import {
   Colors,
   Delete,
+  Eye,
   messageActions,
   MessageActionsParams,
   Time,
@@ -15,11 +17,13 @@ export function channelMessageActions({
   chatClient,
   colors,
   t,
+  handleMessageInfo,
 }: {
   params: MessageActionsParams;
   chatClient: StreamChat;
   t: TranslationContextValue['t'];
   colors?: typeof Colors;
+  handleMessageInfo: (message: LocalMessage) => void;
 }) {
   const { dismissOverlay, deleteForMeMessage } = params;
   const actions = messageActions(params);
@@ -111,5 +115,15 @@ export function channelMessageActions({
     title: t('Delete for me'),
   });
 
+  actions.push({
+    action: () => {
+      dismissOverlay();
+      handleMessageInfo(params.message);
+    },
+    actionType: 'messageInfo',
+    icon: <Eye height={24} width={24} pathFill={colors?.grey} />,
+    title: 'Message Info',
+  });
+
   return actions;
 }

examples/SampleApp/yarn.lock

@@ -355,6 +355,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz#a7054dcc145a967dd4dc8fee845a57c1316c9df8"
   integrity sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
 
+"@babel/helper-validator-identifier@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz#010b6938fab7cb7df74aa2bbc06aa503b8fe5fb4"
+  integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
+
 "@babel/helper-validator-option@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
@@ -1033,6 +1038,14 @@
     "@babel/helper-string-parser" "^7.25.9"
     "@babel/helper-validator-identifier" "^7.25.9"
 
+"@babel/types@^7.26.0":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.5.tgz#10fc405f60897c35f07e85493c932c7b5ca0592b"
+  integrity sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.28.5"
+
 "@babel/types@^7.27.1", "@babel/types@^7.27.3", "@babel/types@^7.27.6":
   version "7.27.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.27.6.tgz#a434ca7add514d4e646c80f7375c0aa2befc5535"
@@ -3662,6 +3675,13 @@ babel-plugin-polyfill-regenerator@^0.6.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.6.3"
 
+babel-plugin-react-compiler@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz#bdf7360a23a4d5ebfca090255da3893efd07425f"
+  integrity sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==
+  dependencies:
+    "@babel/types" "^7.26.0"
+
 babel-plugin-syntax-hermes-parser@0.28.1:
   version "0.28.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-hermes-parser/-/babel-plugin-syntax-hermes-parser-0.28.1.tgz#9e80a774ddb8038307a62316486669c668fb3568"

examples/TypeScriptMessaging/package.json

@@ -38,7 +38,7 @@
   "devDependencies": {
     "@babel/core": "^7.27.4",
     "@babel/runtime": "^7.27.6",
-    "@react-native-community/cli": "19.1.1",
+    "@react-native-community/cli": "19.1.2",
     "@react-native-community/cli-platform-android": "19.1.1",
     "@react-native-community/cli-platform-ios": "19.1.1",
     "@react-native/babel-preset": "0.80.2",