feat: new reaction list design and improvements to MessageSimple component

.styles/Vocab/Base/accept.txt

@@ -44,4 +44,6 @@ haptics
 async
 Podfile
 pickFile
-onChange
+onChange
+pressable
+Pressable

docusaurus/docs/reactnative/basics/migrating-from-5.x-to-6.x.mdx

@@ -7,11 +7,11 @@ title: Migration from 5.x to 6.x
 v6.0 is supported on React native version **0.72** and above.
 :::
 
-## Changes
+## Dependency changes
 
 The following are the crucial changes of the Stream Chat React Native SDK from version 5.x to 6.x:
 
-### Change `react-native-fs` to `react-native-blob-util`
+#### Change `react-native-fs` to `react-native-blob-util`
 
 The `react-native-fs` package has been replaced to `react-native-blob-util` in favour of the former not being actively maintained. You can replace it by running the following commands:
 
@@ -20,7 +20,7 @@ yarn remove react-native-fs
 yarn add react-native-blob-util
 ```
 
-### Change `react-native-image-resizer` to `@bam.tech/react-native-image-resizer`
+#### Change `react-native-image-resizer` to `@bam.tech/react-native-image-resizer`
 
 The `react-native-image-resizer` package has been replaced with `@bam.tech/react-native-image-resizer`.
 
@@ -33,7 +33,7 @@ yarn remove react-native-image-resizer
 yarn add @bam.tech/react-native-image-resizer
 ```
 
-### Change `react-native-image-crop-picker` to `react-native-image-picker`
+#### Change `react-native-image-crop-picker` to `react-native-image-picker`
 
 The `react-native-image-crop-picker` package has been replaced with `react-native-image-picker`. This is a better alternative, and can help us with our new architecture endeavors.
 
@@ -46,7 +46,7 @@ yarn add react-native-image-picker
 
 Also, the dependency is made optional now, so if you don't want to use the image picker, you can remove it from your project and the camera selector icon on the Attachment picker will be simply hidden for you.
 
-### Change `react-native-quick-sqlite` to `op-sqlite`
+#### Change `react-native-quick-sqlite` to `op-sqlite`
 
 The `react-native-quick-sqlite` package has been replaced with `op-sqlite`. This is a faster alternative, and can help us with our new architecture endeavors.
 
@@ -57,7 +57,7 @@ yarn remove react-native-quick-sqlite
 yarn add op-sqlite
 ```
 
-### Remove the usage of `@stream-io/flat-list-mvcp`
+#### Remove the usage of `@stream-io/flat-list-mvcp`
 
 The dependency on `@stream-io/flat-list-mvcp` package has been removed in favour of React Native's [`FlatList`](https://reactnative.dev/docs/flatlist) component supporting [`maintainVisibleContentPosition`](https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition) from React Native version `>=0.72`. You can replace it by using the `FlatList` component directly.
 
@@ -78,7 +78,93 @@ registerNativeHandlers({
 
 This also involves not passing the `FlatList` component as a handler to [`registerNativeHandlers`](../customization/native-handlers.mdx#overriding-handlers) anymore.
 
-### Remove `NetInfo` from the native handlers
+## SDK changes
+
+#### Introduce new Message Menu design
+
+The Message Menu design has been revamped to provide a better user experience. The new design is more intuitive and provides a better user experience.
+
+![Message Menu](../assets/basics/migrating-from-5.x-to-6.x/message_actions.png)
+
+:::note
+The previous overlay design has been replaced with a bottom sheet modal design.
+:::
+
+#### Introduce new ReactionList design
+
+We have introduced a new ReactionList design that is more intuitive and provides a better user experience.
+
+![Message Menu](../assets/basics/migrating-from-5.x-to-6.x/message_reactions.png)
+
+You can switch to `bottom` reaction list design by setting the [`reactionListPosition`](../core-components/channel.mdx#reactionlistposition) prop to `bottom` in the `Channel` component. The Reaction list component can be completely customized by providing a custom component to the [`ReactionListTop`](../core-components/channel.mdx#reactionlisttop) prop in the `Channel` component for top reactions list and [`ReactionListBottom`](../core-components/channel.mdx#reactionlistbottom) prop for bottom reactions list. The default mode is `top` as it was in the previous version.
+
+#### Removed `MessageOverlayContext` and `MessageOverlayProvider`
+
+The `MessageOverlayContext` and `MessageOverlayProvider` have been removed.
+
+#### Removed props from `OverlayProvider`
+
+The following props have been removed from the `OverlayProvider`:
+
+- `MessageActionList`
+- `MessageActionListItem`
+- `OverlayReactions`
+- `OverlayReactionsAvatar`
+- `OverlayReactionsItem`
+- `messageTextNumberOfLines`
+- `error`, `isMyMessage`, `isThreadMessage`, `message` and `messageReactions`
+
+#### New `Channel` props
+
+The props from the `OverlayProvider` have been moved to the `Channel` component. The following props have been added to the `Channel` component:
+
+- `MessageActionList`
+- `MessageActionListItem`
+- `OverlayReactions` is changed to `MessageUserReactions`
+- `OverlayReactionsAvatar` is changed to `MessageUserReactionsAvatar`
+- `OverlayReactionsItem` is changed to `MessageUserReactionsItem`
+- `messageTextNumberOfLines`
+
+#### Removed `MessageOverlay` in favour of `MessageMenu`.
+
+The `MessageOverlay` component has been removed in favour of `MessageMenu`. The `MessageMenu` component is a more versatile and feature-rich component that can be used to show more than just reactions and actions.
+
+The `MessageOverlay` component is removed from top level `OverlayProvider` and is replaced with `MessageMenu` in the level of the `Message` component.
+
+#### Remove props from `Message` component.
+
+The following props have been removed from the `Message` component:
+
+- `setData`
+- `setOverlay`
+- `onLongPress`
+- `onPress`
+- `onPressIn`
+
+The later 3 props are removed in favour of similar props on MessagesContext and is therefore not needed. The `setData` prop is removed in favour of the removal of `MessageOverlayContext` and the `setOverlay` is not needed as we don't set the message overlay in `OverlayProvider`.
+
+#### Removed props from `MessageContent` component
+
+The following props have been removed from the `MessageContent` component:
+
+- `hasReactions`, `lastGroupMessage`, `members`, `onlyEmojis`, `showMessageStatus` imported from the Message Context.
+- `addtionalTouchableProps` is changed to `additionalPressableProps`.
+- `MessageFooter`, `MessageHeader`, `MessageDeleted`, `MessagePinnedHeader`, `MessageReplies`, `MessageStatus`, `onPressInMessage` imported from the Messages Context.
+
+The props were redundant as per the new fixes in the Reaction Design and message simple component's improvements.
+
+#### Add props to `MessageSimple` component
+
+The components from the `MessageContent` components are rendered now in `MessageSimple` component so few of the props that were removed from `MessageContent` are added to `MessageSimple` component(as mentioned above).
+
+- `isMyMessage`, `lastGroupMessage`, `members`, `onlyEmojis`, `otherAttachments`, `showMessageStatus` imported from the Message Context.
+- `MessageDeleted`, `MessageFooter`, `MessageHeader`, `MessagePinnedHeader`, `MessageReplies`, `MessageStatus`, `ReactionListBottom`, `reactionListPosition` and `ReactionListTop` imported from the Messages Context.
+
+#### Added `BottomSheetModal` component
+
+The version introduces a very basic `BottomSheetModal` component that can be used to show a modal at the bottom of the screen. This can be used to show the message actions and reactions.
+
+#### Remove `NetInfo` from the native handlers
 
 The `NetInfo` package has been removed from the native handlers. This also involves not passing the `NetInfo` utility as a handler to [`registerNativeHandlers`](../customization/native-handlers.mdx#overriding-handlers) anymore.
 
@@ -91,6 +177,18 @@ registerNativeHandlers({
 });
 ```
 
-### Change the type of `quotedMessage` in `MessageInputContext`
+#### Change the type of `quotedMessage` in `MessageInputContext`
 
 The type of `quotedMessage` is changed from `MessageType |  boolean` to `MessageType | undefined` for better in the `MessageInputContext`.
+
+#### Refactor of theme object
+
+The default theme object has been refactored to provide a better customization experience. The theme object is now more organized and provides better control over the customization. You can check the object [here](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/themeContext/utils/theme.ts).
+
+## Other changes
+
+- The `useMessageActions` hook doesn't take `setOverlay` anymore but takes in `dismissOverlay`.
+- The MessageContext has a new prop - `dismissOverlay`. The definition of `showMessageOverlay` is changed to `(showMessageReactions?: boolean) => void`.
+- The `isMessageActionsVisible` is changed to `showMessageReactions` in `messageAction.ts`.
+- Removed the `useMessageActionAnimation` hook.
+- Removed `alignment` prop from `MessagePinnedHeader` component.

docusaurus/docs/reactnative/basics/navigation.mdx

@@ -8,7 +8,7 @@ import TabItem from '@theme/TabItem';
 
 Stream Chat for React Native provides many features out of the box that require positioning the components on the screen in a certain manner to get the desired UI.
 
-The `AttachmentPicker`, `ImageGallery`, and `MessageOverlay`, all need to be rendered in front of other components to have the desired effect. All of these elements are controlled by the `OverlayProvider`. When used together with navigation, certain steps are needed to be taken to make these components appear fluently.
+The `AttachmentPicker` and  `ImageGallery`, all need to be rendered in front of other components to have the desired effect. All of these elements are controlled by the `OverlayProvider`. When used together with navigation, certain steps are needed to be taken to make these components appear fluently.
 
 The guidance provided makes the assumption you are using [React Navigation](https://reactnavigation.org/) in your app in conjunction with [`createStackNavigator`](https://reactnavigation.org/docs/stack-navigator/).
 

docusaurus/docs/reactnative/basics/troubleshooting.mdx

@@ -79,7 +79,7 @@ To do this make sure your `Channel` components are always aware of the thread st
 
 ## Image gallery not full screen
 
-If the image viewer or message overlay is not covering the full screen, for instance it is rendering below or behind a Header, it is likely the `OverlayProvider` is not setup in the correct location within the application.
+If the image viewer or message menu is not covering the full screen, for instance it is rendering below or behind a Header, it is likely the `OverlayProvider` is not setup in the correct location within the application.
 Please refer to the [Stream Chat with Navigation](./navigation.mdx) documentation to properly place the `OverlayProvider` in relation to your navigation solution or other components.
 
 ## Image picker incorrect height
@@ -295,7 +295,7 @@ This includes ensuring you import `react-native-gesture-handler` at the top of y
 import 'react-native-gesture-handler';
 ```
 
-Also do not forget to wrap your component tree(probably above `OverlayProvider`) with `<GestureHandlerRootView>` or `gestureHandlerRootHOC` as mentioned in [RNGH Installation docs](https://docs.swmansion.com/react-native-gesture-handler/docs/installation#js). Not doing so, can cause unusual behaviour with the `MessageOverlay` and `Imagegallery` gestures.
+Also do not forget to wrap your component tree(probably above `OverlayProvider`) with `<GestureHandlerRootView>` or `gestureHandlerRootHOC` as mentioned in [RNGH Installation docs](https://docs.swmansion.com/react-native-gesture-handler/docs/installation#js). Not doing so, can cause unusual behaviour with the `Imagegallery` gestures.
 
 ```tsx
 <GestureHandlerRootView style={{ flex: 1 }}>

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

@@ -0,0 +1,5 @@
+Channel instance from the StreamChat client.
+
+| Type                                                                                        |
+| ------------------------------------------------------------------------------------------- |
+| [Channel](https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript) |

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

@@ -0,0 +1,5 @@
+A function that scrolls to a specific message in the chat. This function is useful when you want to scroll to a specific message in the chat.
+
+| Type                                        | Default     |
+| ------------------------------------------- | ----------- |
+| `(messageId: string) => void`\| `undefined` | `undefined` |

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

@@ -0,0 +1,5 @@
+Function to handle a reaction on a message. This function is called when a user reacts to a message. The function is passed the message ID, the reaction type, and the user ID of the user who reacted to the message. The function should update the message with the reaction and update the message in the message context.
+
+| Type                                                     | Default     |
+| -------------------------------------------------------- | ----------- |
+| `(reactionType: string) => Promise<void>` \| `undefined` | `undefined` |

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

@@ -0,0 +1,5 @@
+Boolean to check the message edited label is expanded or not.
+
+| Type    | Default |
+| ------- | ------- |
+| Boolean | `false` |

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

@@ -1,5 +1,5 @@
 Function to open the message action overlay. This function gets called when user long presses a message.
 
-| Type     |
-| -------- |
-| function |
+| Type                                       |
+| ------------------------------------------ |
+| `(showMessageReactions?: boolean) => void` |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/additional_pressable_props.mdx

@@ -0,0 +1,5 @@
+Additional props provided to the underlying [Pressable](https://reactnative.dev/docs/pressable#props) used by components within a message such as [`MessageContent`](../../../../ui-components/message-content.mdx).
+
+| Type   |
+| ------ |
+| object |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/handle_reaction.mdx

@@ -1,4 +1,4 @@
-Function called when a reaction is selected in the message overlay, this is called on both the add and remove action.
+Function called when a reaction is selected in the message menu, this is called on both the add and remove action.
 This function does not override the default behavior of the reaction being selected.
 Please refer to [the guide on customizing message actions](../../../../guides/custom-message-actions.mdx) for details.
 

docusaurus/docs/reactnative/common-content/ui-components/overlay-provider/props/message_action_list_item.mdx → docusaurus/docs/reactnative/common-content/ui-components/channel/props/message-action-list-item.mdx

@@ -1,5 +1,5 @@
 Component for rendering message action list items within a message action list.
 
-| Type          | Default                                                                                                                                                  |
-| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ComponentType | [MessageActionListItem](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/MessageActionListItem.tsx) |
+| Type          | Default                                                                                                                                                                |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`MessageActionListItem`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageActionListItem.tsx) \| `undefined` |

docusaurus/docs/reactnative/common-content/ui-components/overlay-provider/props/message_action_list.mdx → docusaurus/docs/reactnative/common-content/ui-components/channel/props/message-action-list.mdx

@@ -1,5 +1,5 @@
-Component for rendering a message action list within the message overlay.
+Component for rendering a message action list within the message menu.
 
-| Type          | Default                                                                                                                                           |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ComponentType | [[MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/MessageActionList.tsx) |
+| Type          | Default                                                                                                                                                        |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`MessageActionList`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageActionList.tsx) \| `undefined` |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/message-menu.mdx

@@ -0,0 +1,5 @@
+Component to customize the message contextual menu which allows users to perform actions on a message and react to messages.
+
+| Type          | Default                                                                                                                                            |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`MessageMenu`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageMenu.tsx) \| `undefined` |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/message-reaction-picker.mdx

@@ -0,0 +1,5 @@
+Reaction selector component displayed within the message menu when user long presses a message.
+
+| Type          | Default                                                                                                                                                                   |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`MessageReactionPicker`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageMenu/MessageReactionPicker.tsx) \| `undefined` |