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

@@ -90,6 +90,14 @@ The Message Menu design has been revamped to provide a better user experience. T
 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.
@@ -123,7 +131,7 @@ The `MessageOverlay` component has been removed in favour of `MessageMenu`. The
 
 The `MessageOverlay` component is removed from top level `OverlayProvider` and is replaced with `MessageMenu` in the level of the `Message` component.
 
-#### Remove prop from `Message` component.
+#### Remove props from `Message` component.
 
 The following props have been removed from the `Message` component:
 
@@ -135,6 +143,23 @@ The following props have been removed from the `Message` component:
 
 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.
@@ -156,6 +181,10 @@ registerNativeHandlers({
 
 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`.

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/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/reaction-list-bottom.mdx

@@ -0,0 +1,5 @@
+Component to render list of reactions at the bottom of the message bubble.
+
+| Type          | Default                                                                                                                                                                     |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`ReactionListBottom`](https://github.com/GetStream/stream-chat-react-native/tree/develop/package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx) |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/reaction-list-position.mdx

@@ -0,0 +1,5 @@
+The position of the reaction list in the message component. By default, the reaction list is positioned on top the message content.
+
+| Type              | Default value |
+| ----------------- | ------------- |
+| `top` \| `bottom` | 'top'         |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/reaction-list-top.mdx

@@ -0,0 +1,5 @@
+Component to render list of reactions at top of the message bubble.
+
+| Type          | Default                                                                                                                                                               |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`ReactionListTop`](https://github.com/GetStream/stream-chat-react-native/tree/develop/package/src/components/Message/MessageSimple/ReactionList/ReactionListTop.tsx) |

docusaurus/docs/reactnative/contexts/messages-context.mdx

@@ -3,7 +3,7 @@ id: messages-context
 title: MessagesContext
 ---
 
-import AdditionalTouchableProps from '../common-content/ui-components/channel/props/additional_touchable_props.mdx';
+import AdditionalPressableProps from '../common-content/ui-components/channel/props/additional_pressable_props.mdx';
 import Attachment from '../common-content/ui-components/channel/props/attachment.mdx';
 import AttachmentActions from '../common-content/ui-components/channel/props/attachment_actions.mdx';
 import AudioAttachment from '../common-content/ui-components/channel/props/audio_attachment.mdx';
@@ -70,7 +70,9 @@ import MessageReactionPicker from '../common-content/ui-components/channel/props
 import MessageUserReactionsAvatar from '../common-content/ui-components/channel/props/message-user-reactions-avatar.mdx';
 import MessageUserReactionsItem from '../common-content/ui-components/channel/props/message-user-reactions-item.mdx';
 import MessageUserReactions from '../common-content/ui-components/channel/props/message-user-reactions.mdx';
-import ReactionList from '../common-content/ui-components/channel/props/reaction-list.mdx';
+import ReactionListBottom from '../common-content/ui-components/channel/props/reaction-list-bottom.mdx';
+import ReactionListPosition from '../common-content/ui-components/channel/props/reaction-list-position.mdx';
+import ReactionListTop from '../common-content/ui-components/channel/props/reaction-list-top.mdx';
 import Reply from '../common-content/ui-components/channel/props/reply.mdx';
 import ScrollToBottomButton from '../common-content/ui-components/channel/props/scroll-to-bottom-button.mdx';
 import SelectReaction from '../common-content/ui-components/channel/props/select_reaction.mdx';
@@ -82,9 +84,9 @@ import VideoThumbnail from '../common-content/ui-components/channel/props/video_
 
 ## Value
 
-### <div class="label description">_forwarded from [Channel](../../core-components/channel#additionaltouchableprops)_ props</div> additionalTouchableProps {#additionaltouchableprops}
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#additionalpressableprops)_ props</div> additionalPressableProps {#additionalpressableprops}
 
-<AdditionalTouchableProps />
+<AdditionalPressableProps />
 
 ### `channelId`
 
@@ -206,6 +208,10 @@ Id of current channel.
 
 <OnPressMessage />
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#reactionlistposition)_ props</div> reactionListPosition {#reactionlistposition}
+
+<ReactionListPosition />
+
 ### `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`).
@@ -426,9 +432,25 @@ Upserts a given message in local channel state. Please note that this function d
 
 <MessageUserReactions />
 
-### <div class="label description">_forwarded from [Channel](../../core-components/channel#reactionlist)_ props</div> ReactionList {#reactionlist}
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#messageuserreactionsavatar)_ props</div> MessageUserReactionsAvatar {#messageuserreactionsavatar}
+
+<MessageUserReactionsAvatar />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#messageuserreactionsitem)_ props</div> MessageUserReactionsItem {#messageuserreactionsitem}
+
+<MessageUserReactionsItem />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#messageuserreactions)_ props</div> MessageUserReactions {#messageuserreactions}
+
+<MessageUserReactions />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#reactionlistbottom)_ props</div> ReactionListBottom {#reactionlistbottom}
+
+<ReactionListBottom />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#reactionlisttop)_ props</div> ReactionListTop {#reactionlisttop}
 
-<ReactionList />
+<ReactionListTop />
 
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#scrolltobottombutton)_ props</div> ScrollToBottomButton {#scrolltobottombutton}
 

docusaurus/docs/reactnative/contexts/overlay-context.mdx

@@ -52,7 +52,7 @@ Detailed information on theming can be found in the [customization documentation
 :::note
 
 Themes are inherited from parent providers.
-A [theme provided to the `OverlayProvider`](./overlay-provider.mdx#value) will be the base theme `style` is merged into.
+A [theme provided to the `OverlayProvider`](../core-components/overlay-provider.mdx) will be the base theme `style` is merged into.
 Themes are not hoisted though, therefore a theme provided to `Chat` will not change overlay components such as the attachment picker.
 
 :::

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

@@ -25,7 +25,7 @@ import AutoCompleteSuggestionItem from '../common-content/ui-components/channel/
 import AutoCompleteSuggestionList from '../common-content/ui-components/channel/props/autocomplete_suggestion_list.mdx';
 import AutoCompleteSuggestionsLimit from '../common-content/ui-components/channel/props/auto_complete_suggestions_limit.mdx';
 import AutoCompleteTriggerSettings from '../common-content/ui-components/channel/props/auto_complete_trigger_settings.mdx';
-import AdditionalTouchableProps from '../common-content/ui-components/channel/props/additional_touchable_props.mdx';
+import AdditionalPressableProps from '../common-content/ui-components/channel/props/additional_pressable_props.mdx';
 import AttachButton from '../common-content/ui-components/channel/props/attach_button.mdx';
 import Attachment from '../common-content/ui-components/channel/props/attachment.mdx';
 import AttachmentActions from '../common-content/ui-components/channel/props/attachment_actions.mdx';
@@ -136,7 +136,9 @@ import MessageUserReactionsAvatar from '../common-content/ui-components/channel/
 import MessageUserReactionsItem from '../common-content/ui-components/channel/props/message-user-reactions-item.mdx';
 import MessageUserReactions from '../common-content/ui-components/channel/props/message-user-reactions.mdx';
 import OverrideOwnCapabilities from '../common-content/ui-components/channel/props/override_own_capabilities.mdx';
-import ReactionList from '../common-content/ui-components/channel/props/reaction-list.mdx';
+import ReactionListBottom from '../common-content/ui-components/channel/props/reaction-list-bottom.mdx';
+import ReactionListPosition from '../common-content/ui-components/channel/props/reaction-list-position.mdx';
+import ReactionListTop from '../common-content/ui-components/channel/props/reaction-list-top.mdx';
 import Reply from '../common-content/ui-components/channel/props/reply.mdx';
 import ScrollToBottomButton from '../common-content/ui-components/channel/props/scroll-to-bottom-button.mdx';
 import SelectReaction from '../common-content/ui-components/channel/props/select_reaction.mdx';
@@ -284,9 +286,9 @@ This is often the header height.
 
 <AdditionalTextInputProps />
 
-### additionalTouchableProps
+### additionalPressableProps
 
-<AdditionalTouchableProps />
+<AdditionalPressableProps />
 
 ### allowThreadMessagesInChannel
 
@@ -687,6 +689,10 @@ Provide a custom array of messages to render in `MessageList`. -->
 
 <OverrideOwnCapabilities />
 
+### reactionListPosition
+
+<ReactionListPosition />
+
 <!-- ### openSuggestions -->
 
 ### selectReaction
@@ -1014,9 +1020,13 @@ Component to render full screen error indicator, when channel fails to load.
 
 <NetworkDownIndicator />
 
-### ReactionList
+### ReactionListBottom
+
+<ReactionListBottom />
+
+### ReactionListTop
 
-<ReactionList />
+<ReactionListTop />
 
 ### Reply
 

docusaurus/docs/reactnative/guides/custom-message-actions.mdx

@@ -32,7 +32,7 @@ You can customize each one of the default actions using props on the [`Channel c
 
 The channel component accepts a prop called `messageActions`. You can use this prop as a callback function to render message actions selectively.
 
-The arguments to this function is an object with all the default message actions as [`MessageActionType`](#messageaction) objects. The function should return an array of MessageAction objects to render in a [MessageActionList](../common-content/ui-components/channel/props/message_action_list.mdx) within the message menu, that is shown when a user long presses a message in a MessageList.
+The arguments to this function is an object with all the default message actions as [`MessageActionType`](#messageaction) objects. The function should return an array of MessageAction objects to render in a [MessageActionList](../common-content/ui-components/channel/props/message-action-list.mdx) within the message menu, that is shown when a user long presses a message in a MessageList.
 
 You can also customize each one of the default actions using the `messageActions` prop passed to the Channel component as shown in the example below.
 
@@ -117,9 +117,9 @@ Styles for underlying Text component of action title.
 | ------------------------------------------------------------------------- |
 | [`Text Style Props`](https://reactnative.dev/docs/text-style-props#props) |
 
-### MessageTouchableHandlerPayload
+### MessagePressableHandlerPayload
 
-`MessageTouchableHandlerPayload` object is provided as parameter to callback handlers such as `onLongPressMessage`, `onPressMessage` for user interaction with message.
+`MessagePressableHandlerPayload` object is provided as parameter to callback handlers such as `onLongPressMessage`, `onPressMessage` for user interaction with message.
 
 #### Example
 
@@ -144,7 +144,7 @@ Styles for underlying Text component of action title.
 
 #### `additionalInfo`
 
-Additional message touchable handler info.
+Additional message pressable handler info.
 
 | Type   |
 | ------ |

docusaurus/docs/reactnative/object-types/message_touchable_handler_payload.mdx → docusaurus/docs/reactnative/object-types/message_pressable_handler_payload.mdx

@@ -1,9 +1,9 @@
 ---
-id: message-touchable-handler-payload
-title: MessageTouchableHandlerPayload
+id: message-pressable-handler-payload
+title: MessagePressableHandlerPayload
 ---
 
-`MessageTouchableHandlerPayload` object is provided as parameter to callback handlers such as `onLongPressMessage`, `onPressMessage`
+`MessagePressableHandlerPayload` object is provided as parameter to callback handlers such as `onLongPressMessage`, `onPressMessage`
 for user interaction with message.
 
 ## Example
@@ -47,7 +47,7 @@ Location within message, where the interaction occurred.
 
 ### event
 
-Native event object which could either be coming from TouchableOpacity or `react-native-gesture-handler`
+Native event object which could either be coming from React Native's `Pressable` or `react-native-gesture-handler`
 
 | Type   |
 | ------ |

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

@@ -7,7 +7,7 @@ import OnLongPress from '../common-content/contexts/message-context/on_long_pres
 import OnPress from '../common-content/contexts/message-context/on_press.mdx';
 import OnPressIn from '../common-content/contexts/message-context/on_press_in.mdx';
 
-import AdditionalTouchableProps from '../common-content/ui-components/channel/props/additional_touchable_props.mdx';
+import AdditionalPressableProps from '../common-content/ui-components/channel/props/additional_pressable_props.mdx';
 import CardCover from '../common-content/ui-components/channel/props/card_cover.mdx';
 import CardFooter from '../common-content/ui-components/channel/props/card_footer.mdx';
 import CardHeader from '../common-content/ui-components/channel/props/card_header.mdx';
@@ -19,9 +19,9 @@ Please check the guides for [Custom Attachment](../guides/custom-attachment.mdx)
 
 ## Props
 
-### <div class="label description">_overrides the value from [MessagesContext](../../contexts/messages-context#additionaltouchableprops)_</div> `additionalTouchableProps` {#additionaltouchableprops}
+### <div class="label description">_overrides the value from [MessagesContext](../../contexts/messages-context#additionalpressableprops)_</div> `additionalPressableProps` {#additionalpressableprops}
 
-<AdditionalTouchableProps />
+<AdditionalPressableProps />
 
 ### `author_name`