Merge pull request #2407 from GetStream/develop

Next Release

docusaurus/docs/reactnative/common-content/contexts/message-input-context/editing.mdx

@@ -1,5 +1,5 @@
-True if the user is editing some message within `MessageInput` component.
+Defined with message type if the user is editing some message within `MessageInput` component else its undefined.
 
-| Type    |
-| ------- |
-| boolean |
+| Type                     |
+| ------------------------ |
+| MessageType \| undefined |

docusaurus/docs/reactnative/common-content/core-components/channel/props/message_bounce.mdx

@@ -0,0 +1,5 @@
+Component to render bounce action handler on click or long press of a Bounced message, within [`MessageList`](../../../../ui-components/message_list.mdx).
+
+| Type      | Default                                                         |
+| --------- | --------------------------------------------------------------- |
+| component | [`MessageBounce`](../../../../ui-components/message_bounce.mdx) |

docusaurus/docs/reactnative/contexts/messages_context.mdx

@@ -42,6 +42,7 @@ import IsAttachmentEqual from '../common-content/core-components/channel/props/i
 import LegacyImageViewerSwipeBehaviour from '../common-content/core-components/channel/props/legacy_image_viewer_swipe_behaviour.mdx';
 import MarkdownRules from '../common-content/core-components/channel/props/markdown_rules.mdx';
 import MessageAvatar from '../common-content/core-components/channel/props/message_avatar.mdx';
+import MessageBounce from '../common-content/core-components/channel/props/message_bounce.mdx';
 import MessageContent from '../common-content/core-components/channel/props/message_content.mdx';
 import MessageActions from '../common-content/core-components/channel/props/message_actions.mdx';
 import MessageContentOrder from '../common-content/core-components/channel/props/message_content_order.mdx';
@@ -324,6 +325,10 @@ Upserts a given message in local channel state. Please note that this function d
 
 <MessageAvatar />
 
+### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#messageavatar)_ props</div> MessageBounce {#messagebounce}
+
+<MessageBounce />
+
 ### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#messagecontent)_ props</div> MessageContent {#messagecontent}
 
 <MessageContent />

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -88,6 +88,7 @@ import MaxNumberOfFiles from '../common-content/core-components/channel/props/ma
 import MentionAllAppUsersEnabled from '../common-content/core-components/channel/props/mention_all_app_users_enabled.mdx';
 import MentionAllAppUsersQuery from '../common-content/core-components/channel/props/mention_all_app_users_query.mdx';
 import MessageAvatar from '../common-content/core-components/channel/props/message_avatar.mdx';
+import MessageBounce from '../common-content/core-components/channel/props/message_bounce.mdx';
 import MessageContent from '../common-content/core-components/channel/props/message_content.mdx';
 import MessageActions from '../common-content/core-components/channel/props/message_actions.mdx';
 import MessageContentOrder from '../common-content/core-components/channel/props/message_content_order.mdx';
@@ -825,6 +826,10 @@ Component to render full screen error indicator, when channel fails to load.
 
 <MessageAvatar />
 
+### MessageBounce
+
+<MessageBounce />
+
 ### MessageContent
 
 <MessageContent />

docusaurus/docs/reactnative/guides/message_customizations.mdx

@@ -71,6 +71,7 @@ If you want to customize only a specific part of `MessageSimple` component, you
 - [MessageHeader](../core-components/channel.mdx#messageheader)
 - [MessageFooter](../core-components/channel.mdx#messagefooter)
 - [MessageAvatar](../core-components/channel.mdx#messageavatar)
+- [MessageBounce](../core-components/channel.mdx#messagebounce)
 - [MessageStatus](../core-components/channel.mdx#messagestatus)
 - [MessageText](../core-components/channel.mdx#messagetext)
 - [MessageSystem](../core-components/channel.mdx#messagesystem)

docusaurus/docs/reactnative/ui-components/message_bounce.mdx

@@ -0,0 +1,46 @@
+---
+id: message-bounce
+title: MessageBounce
+---
+
+import MessageProp from '../common-content/contexts/message-context/message.mdx';
+
+Component to render bounce action handler on click or long press of a Bounced message, within [`MessageList`](./message_list.mdx).
+
+## Props
+
+### `setEditingState`
+
+Enables editing state for given message.
+
+| Type                |
+| ------------------- |
+| `(message) => void` |
+
+### `removeMessage`
+
+Function to remove message from local channel state. Please note that this function is only for updating the local state, it doesn't call the API for deleting message (`channel.deleteMessage`).
+
+| Type                |
+| ------------------- |
+| `(message) => void` |
+
+### `retrySendMessage`
+
+Function to re-attempt sending failed message.
+
+| Type                |
+| ------------------- |
+| `(message) => void` |
+
+### <div class="label description">_overrides the value from [MessageContext](../contexts/message_context.mdx#message)_</div> `message` {#message}
+
+<MessageProp />
+
+### `setIsBounceDialogOpen`
+
+React state update function to open/close the message bounce modal.
+
+| Type                |
+| ------------------- |
+| `(boolean) => void` |

examples/SampleApp/App.tsx

@@ -162,11 +162,10 @@ const App = () => {
 const DrawerNavigator: React.FC = () => (
   <Drawer.Navigator
     drawerContent={(props) => <MenuDrawer {...props} />}
-    drawerStyle={{
-      width: 300,
-    }}
     screenOptions={{
-      gestureEnabled: true,
+      drawerStyle: {
+        width: 300,
+      },
     }}
   >
     <Drawer.Screen component={HomeScreen} name='HomeScreen' options={{ headerShown: false }} />
@@ -204,7 +203,7 @@ const UserSelector = () => (
     <UserSelectorStack.Screen
       component={AdvancedUserSelectorScreen}
       name='AdvancedUserSelectorScreen'
-      options={{ gestureEnabled: false, headerShown: false }}
+      options={{ gestureEnabled: false }}
     />
     <UserSelectorStack.Screen
       component={UserSelectorScreen}
@@ -220,9 +219,13 @@ const HomeScreen = () => {
 
   return (
     <Stack.Navigator
-      initialRouteName={initialChannelIdGlobalRef.current ? 'ChannelScreen' : 'ChatScreen'}
+      initialRouteName={initialChannelIdGlobalRef.current ? 'ChannelScreen' : 'MessagingScreen'}
     >
-      <Stack.Screen component={ChatScreen} name='ChatScreen' options={{ headerShown: false }} />
+      <Stack.Screen
+        component={ChatScreen}
+        name='MessagingScreen'
+        options={{ headerShown: false }}
+      />
       <Stack.Screen
         component={ChannelScreen}
         initialParams={

examples/SampleApp/src/screens/AdvancedUserSelectorScreen.tsx

@@ -3,7 +3,6 @@ import { Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'reac
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { KeyboardCompatibleView, useTheme, version } from 'stream-chat-react-native';
 
-import { ScreenHeader } from '../components/ScreenHeader';
 import { useAppContext } from '../context/AppContext';
 
 const styles = StyleSheet.create({
@@ -182,7 +181,6 @@ export const AdvancedUserSelectorScreen: React.FC = () => {
           },
         ]}
       >
-        <ScreenHeader titleText='Advanced Options' />
         <View style={styles.innerContainer}>
           <View style={styles.labelsContainer}>
             <LabeledTextInput

examples/SampleApp/src/screens/ChannelPinnedMessagesScreen.tsx

@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
 
 type ChannelPinnedMessagesScreenRouteProp = RouteProp<
   StackNavigatorParamList,
-  'ChannelFilesScreen'
+  'ChannelPinnedMessagesScreen'
 >;
 
 export type ChannelPinnedMessagesScreenProps = {

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -65,7 +65,9 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
         if (!navigation.canGoBack()) {
           // if no previous screen was present in history, go to the list screen
           // this can happen when opened through push notification
-          navigation.navigate('ChatScreen');
+          navigation.reset({ index: 0, routes: [{ name: 'MessagingScreen' }] });
+        } else {
+          navigation.goBack();
         }
       }}
       RightContent={() => (

examples/SampleApp/src/screens/ChatScreen.tsx

@@ -13,8 +13,8 @@ import type { BottomTabNavigatorParamList, StackNavigatorParamList } from '../ty
 
 const Tab = createBottomTabNavigator<BottomTabNavigatorParamList>();
 
-type ChatScreenNavigationProp = StackNavigationProp<StackNavigatorParamList, 'ChatScreen'>;
-type ChatScreenRouteProp = RouteProp<StackNavigatorParamList, 'ChatScreen'>;
+type ChatScreenNavigationProp = StackNavigationProp<StackNavigatorParamList, 'MessagingScreen'>;
+type ChatScreenRouteProp = RouteProp<StackNavigatorParamList, 'MessagingScreen'>;
 
 type Props = {
   navigation: ChatScreenNavigationProp;

examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx

@@ -232,7 +232,7 @@ export const GroupChannelDetailsScreen: React.FC<GroupChannelDetailsProps> = ({
       index: 0,
       routes: [
         {
-          name: 'ChatScreen',
+          name: 'MessagingScreen',
         },
       ],
     });

examples/SampleApp/src/screens/OneOnOneChannelDetailScreen.tsx

@@ -190,7 +190,7 @@ export const OneOnOneChannelDetailScreen: React.FC<Props> = ({
       index: 0,
       routes: [
         {
-          name: 'ChatScreen',
+          name: 'MessagingScreen',
         },
       ],
     });

examples/SampleApp/src/screens/SharedGroupsScreen.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { RouteProp, useNavigation } from '@react-navigation/native';
+import { NavigationProp, RouteProp, useNavigation } from '@react-navigation/native';
 import {
   Avatar,
   ChannelList,
@@ -59,7 +59,7 @@ type CustomPreviewProps = ChannelPreviewMessengerProps<StreamChatGenerics>;
 const CustomPreview: React.FC<CustomPreviewProps> = ({ channel }) => {
   const { chatClient } = useAppContext();
   const name = useChannelPreviewDisplayName(channel, 30);
-  const navigation = useNavigation();
+  const navigation = useNavigation<NavigationProp<StackNavigatorParamList, 'SharedGroupsScreen'>>();
   const {
     theme: {
       colors: { black, grey, grey_whisper, white_snow },
@@ -77,7 +77,7 @@ const CustomPreview: React.FC<CustomPreviewProps> = ({ channel }) => {
       index: 1,
       routes: [
         {
-          name: 'ChatScreen',
+          name: 'MessagingScreen',
         },
         {
           name: 'ChannelScreen',

examples/SampleApp/src/types.ts

@@ -47,10 +47,10 @@ export type StackNavigatorParamList = {
     channelId?: string;
     messageId?: string;
   };
-  ChatScreen: undefined;
   GroupChannelDetailsScreen: {
     channel: Channel<StreamChatGenerics>;
   };
+  MessagingScreen: undefined;
   NewDirectMessagingScreen: undefined;
   NewGroupChannelAddMemberScreen: undefined;
   NewGroupChannelAssignNameScreen: undefined;

examples/TypeScriptMessaging/android/app/src/release/java/com/typescriptmessaging/ReactNativeFlipper.java

@@ -4,7 +4,7 @@
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
  */
-package com.rndiffapp;
+package com.typescriptmessaging;
 import android.content.Context;
 import com.facebook.react.ReactInstanceManager;
 /**

package/expo-package/yarn.lock

@@ -3046,10 +3046,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-[email protected].1:
-  version "5.23.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.23.1.tgz#9bccc2c534762b764cb98703db5b6df1c7d1e394"
-  integrity sha512-ls+Tvtcbl+lfMgGlFBtHBfvyAKlY94jD9nhFgSeibV2vZzySvl8me9z3pDSZQVFDtqLbdnxCruGa91+hyrfGAg==
+[email protected].2:
+  version "5.23.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.23.2.tgz#96afac810359f98615906f6c4899fdb9f8c4b609"
+  integrity sha512-Su94hdFMJfpIlqGRrxvSHy49c1HvJsHMSjc5rEK4K+AzLzMErWxL0/eHCF/QMFA10jkqT1Y2fn9V40byy0fIkg==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.8"

package/native-package/yarn.lock

@@ -4391,10 +4391,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected].1:
-  version "5.23.1"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.23.1.tgz#9bccc2c534762b764cb98703db5b6df1c7d1e394"
-  integrity sha512-ls+Tvtcbl+lfMgGlFBtHBfvyAKlY94jD9nhFgSeibV2vZzySvl8me9z3pDSZQVFDtqLbdnxCruGa91+hyrfGAg==
+[email protected].2:
+  version "5.23.2"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.23.2.tgz#96afac810359f98615906f6c4899fdb9f8c4b609"
+  integrity sha512-Su94hdFMJfpIlqGRrxvSHy49c1HvJsHMSjc5rEK4K+AzLzMErWxL0/eHCF/QMFA10jkqT1Y2fn9V40byy0fIkg==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "4.4.8"

package/package.json

@@ -80,7 +80,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "8.14.4"
+    "stream-chat": "8.15.0"
   },
   "peerDependencies": {
     "react-native-quick-sqlite": ">=5.1.0",

package/src/components/Attachment/Attachment.tsx

@@ -29,6 +29,7 @@ export type AttachmentPropsWithContext<
   | 'Giphy'
   | 'isAttachmentEqual'
   | 'UrlPreview'
+  | 'myMessageTheme'
 > & {
   /**
    * The attachment to render
@@ -106,8 +107,12 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: AttachmentPropsWithContext<StreamChatGenerics>,
   nextProps: AttachmentPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { attachment: prevAttachment, isAttachmentEqual } = prevProps;
-  const { attachment: nextAttachment } = nextProps;
+  const {
+    attachment: prevAttachment,
+    isAttachmentEqual,
+    myMessageTheme: prevMyMessageTheme,
+  } = prevProps;
+  const { attachment: nextAttachment, myMessageTheme: nextMyMessageTheme } = nextProps;
 
   const attachmentEqual =
     prevAttachment.actions?.length === nextAttachment.actions?.length &&
@@ -119,6 +124,10 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     return isAttachmentEqual(prevAttachment, nextAttachment);
   }
 
+  const messageThemeEqual =
+    JSON.stringify(prevMyMessageTheme) === JSON.stringify(nextMyMessageTheme);
+  if (!messageThemeEqual) return false;
+
   return true;
 };
 
@@ -138,6 +147,7 @@ export type AttachmentProps<
     | 'Gallery'
     | 'Giphy'
     | 'giphyVersion'
+    | 'myMessageTheme'
     | 'UrlPreview'
     | 'isAttachmentEqual'
   >
@@ -160,6 +170,7 @@ export const Attachment = <
     Gallery: PropGallery,
     Giphy: PropGiphy,
     giphyVersion: PropGiphyVersion,
+    myMessageTheme: PropMyMessageTheme,
     UrlPreview: PropUrlPreview,
   } = props;
 
@@ -171,6 +182,7 @@ export const Attachment = <
     Giphy: ContextGiphy,
     giphyVersion: ContextGiphyVersion,
     isAttachmentEqual,
+    myMessageTheme: ContextMyMessageTheme,
     UrlPreview: ContextUrlPreview,
   } = useMessagesContext<StreamChatGenerics>();
 
@@ -186,6 +198,7 @@ export const Attachment = <
   const Giphy = PropGiphy || ContextGiphy || GiphyDefault;
   const UrlPreview = PropUrlPreview || ContextUrlPreview || CardDefault;
   const giphyVersion = PropGiphyVersion || ContextGiphyVersion;
+  const myMessageTheme = PropMyMessageTheme || ContextMyMessageTheme;
 
   return (
     <MemoizedAttachment
@@ -198,6 +211,7 @@ export const Attachment = <
         Giphy,
         giphyVersion,
         isAttachmentEqual,
+        myMessageTheme,
         UrlPreview,
       }}
     />