feat: new reaction list design and improvements to MessageSimple component (#2700)

* feat: add new message action list and reaction selector UI

* fix: remove unnecessary props from OverlayContext

* docs: add comments for the props

* tests: add tests for the components

* tests: add tests for the components

* fix: chat.test.ts

* fix: chat.test.ts

* fix: add tests for the code

* fix: use rn animated to create new modal and add docs

* fix: add opacity for the message action list item when pressed

* fix: make modal better and change component names

* fix: update test snapdhots

* docs: message actions customizations

* docs: message actions customizations

* fix: theme improvements

* fix: message component render improvements

* docs: update migration guide

* feat: new reaction list design and improvements to MessageSimple component

* tests: add tests for the components

* docs: reaction list new design docs

* docs: add changes to migration guide

* docs: add changes to migration guide

* docs: add changes to migration guide

* chore: resolve conflicts from base branch

* chore: resolve conflicts from base branch

* fix: sample app overlay backdrop bug

* fix: reaction list type

* feat: add FlatList for Reaction Picker

* feat: add FlatList for Reaction Picker

* feat: add FlatList for Reaction Picker

Author: khushal87

.styles/Vocab/Base/accept.txt

@@ -45,6 +45,8 @@ async
 Podfile
 pickFile
 onChange
+pressable
+Pressable
 boolean
 Async
 subscribable

docusaurus/docs/reactnative/assets/basics/migrating-from-5.x-to-6.x/message_reactions.png

@@ -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.
+
 #### Remove `StreamChatRN` and introduce `ChatConfigContext`
 
 The `StreamChatRN` global config is removed in favour of the `ChatConfigContext`. The `ChatConfigContext` is a more versatile and feature-rich context that can be used to provide any global configuration to the chat application.
@@ -153,7 +161,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:
 
@@ -165,6 +173,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.
@@ -186,6 +211,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).
+
 #### Remove the deprecated code
 
 - We have removed `loadChannelAtMessage` from channel context because it was no more used.

docusaurus/docs/reactnative/basics/migrating-from-5.x-to-6.x.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/channel.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/go_to_message.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/handle_reaction.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/is_edited_message_open.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/additional_pressable_props.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) |