Next Release

package/src/components/Attachment/Gallery.tsx

@@ -293,7 +293,14 @@ const GalleryThumbnail = <
     theme: {
       colors: { overlay },
       messageSimple: {
-        gallery: { image, imageBorderRadius, imageContainer, moreImagesContainer, moreImagesText },
+        gallery: {
+          image,
+          imageBorderRadius,
+          imageContainer,
+          imageContainerStyle,
+          moreImagesContainer,
+          moreImagesText,
+        },
       },
     },
   } = useTheme();
@@ -383,7 +390,7 @@ const GalleryThumbnail = <
           thumb_url={thumbnail.thumb_url}
         />
       ) : (
-        <View style={styles.imageContainerStyle}>
+        <View style={[styles.imageContainerStyle, imageContainerStyle]}>
           <GalleryImageThumbnail
             borderRadius={imageBorderRadius ?? borderRadius}
             ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}

package/src/components/Message/Message.tsx

@@ -229,6 +229,7 @@ const MessageWithContext = <
   const [showMessageReactions, setShowMessageReactions] = useState(true);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
   const [isEditedMessageOpen, setIsEditedMessageOpen] = useState(false);
+  const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
 
   const {
     channel,
@@ -300,10 +301,11 @@ const MessageWithContext = <
     },
   } = useTheme();
 
-  const showMessageOverlay = async (showMessageReactions = false) => {
+  const showMessageOverlay = async (showMessageReactions = false, selectedReaction?: string) => {
     await dismissKeyboard();
     setShowMessageReactions(showMessageReactions);
     setMessageOverlayVisible(true);
+    setSelectedReaction(selectedReaction);
   };
 
   const dismissOverlay = () => {
@@ -733,6 +735,7 @@ const MessageWithContext = <
               dismissOverlay={dismissOverlay}
               handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined}
               messageActions={messageActions}
+              selectedReaction={selectedReaction}
               showMessageReactions={showMessageReactions}
               visible={messageOverlayVisible}
             />

package/src/components/Message/MessageSimple/ReactionList/ReactionListBottom.tsx

@@ -99,7 +99,7 @@ export const ReactionListBottomItem = <
           onLongPress({
             defaultHandler: () => {
               if (showMessageOverlay) {
-                showMessageOverlay(true);
+                showMessageOverlay(true, reaction.type);
               }
             },
             emitter: 'reactionList',

package/src/components/MessageMenu/MessageActionList.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import { ScrollView } from 'react-native-gesture-handler';
 
 import { MessageActionType } from './MessageActionListItem';
 
@@ -23,27 +25,32 @@ export const MessageActionList = (props: MessageActionListProps) => {
   const {
     theme: {
       messageMenu: {
-        actionList: { container },
+        actionList: { container, contentContainer },
       },
     },
   } = useTheme();
 
   if (messageActions?.length === 0) return null;
 
   return (
-    <View accessibilityLabel='Message action list' style={[styles.container, container]}>
+    <ScrollView
+      accessibilityLabel='Message action list'
+      contentContainerStyle={[styles.contentContainer, contentContainer]}
+      style={[styles.container, container]}
+    >
       {messageActions?.map((messageAction, index) => (
         <MessageActionListItem
           key={messageAction.title}
           {...{ ...messageAction, index, length: messageActions.length }}
         />
       ))}
-    </View>
+    </ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
+  container: {},
+  contentContainer: {
     paddingHorizontal: 16,
   },
 });

package/src/components/MessageMenu/MessageMenu.tsx

@@ -52,6 +52,10 @@ export type MessageMenuProps<
      * @returns
      */
     handleReaction?: (reactionType: string) => Promise<void>;
+    /**
+     * The selected reaction
+     */
+    selectedReaction?: string;
   };
 
 export const MessageMenu = <
@@ -70,6 +74,7 @@ export const MessageMenu = <
     MessageUserReactions: propMessageUserReactions,
     MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
     MessageUserReactionsItem: propMessageUserReactionsItem,
+    selectedReaction,
     showMessageReactions,
     visible,
   } = props;
@@ -103,6 +108,7 @@ export const MessageMenu = <
           message={message}
           MessageUserReactionsAvatar={MessageUserReactionsAvatar}
           MessageUserReactionsItem={MessageUserReactionsItem}
+          selectedReaction={selectedReaction}
         />
       ) : (
         <>

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
-import { FlatList, StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
 
 import { ReactionSortBase } from 'stream-chat';
 
@@ -29,6 +30,10 @@ export type MessageUserReactionsProps<
      * An array of reactions
      */
     reactions?: Reaction[];
+    /**
+     * The selected reaction
+     */
+    selectedReaction?: string;
   };
 
 const sort: ReactionSortBase = {
@@ -56,11 +61,12 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
     MessageUserReactionsItem: propMessageUserReactionsItem,
     reactions: propReactions,
+    selectedReaction: propSelectedReaction,
     supportedReactions: propSupportedReactions,
   } = props;
   const reactionTypes = Object.keys(message?.reaction_groups ?? {});
   const [selectedReaction, setSelectedReaction] = React.useState<string | undefined>(
-    reactionTypes[0],
+    propSelectedReaction ?? reactionTypes[0],
   );
   const {
     MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,
@@ -179,7 +185,9 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
 };
 
 const styles = StyleSheet.create({
-  container: {},
+  container: {
+    flex: 1,
+  },
   contentContainer: {
     flexGrow: 1,
     justifyContent: 'space-around',

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -45,7 +45,7 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
   const { children, height = windowHeight / 2, onClose, visible } = props;
   const {
     theme: {
-      bottomSheetModal: { container, contentContainer, handle, overlay: overlayTheme },
+      bottomSheetModal: { container, contentContainer, handle, overlay: overlayTheme, wrapper },
       colors: { grey, overlay, white_snow },
     },
   } = useTheme();
@@ -119,11 +119,14 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     });
 
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <Modal animationType='fade' onRequestClose={handleDismiss} transparent visible={visible}>
-        <TouchableWithoutFeedback onPress={handleDismiss}>
-          <View style={[styles.overlay, { backgroundColor: overlay }, overlayTheme]}>
-            <GestureDetector gesture={gesture}>
+    <View style={[styles.wrapper, wrapper]}>
+      <Modal onRequestClose={onClose} transparent visible={visible}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <GestureDetector gesture={gesture}>
+            <View style={[styles.overlay, { backgroundColor: overlay }, overlayTheme]}>
+              <TouchableWithoutFeedback onPress={onClose} style={{ flex: 1 }}>
+                <View style={{ flex: 1 }} />
+              </TouchableWithoutFeedback>
               <Animated.View
                 style={[
                   styles.container,
@@ -140,11 +143,11 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
                 />
                 <View style={[styles.contentContainer, contentContainer]}>{children}</View>
               </Animated.View>
-            </GestureDetector>
-          </View>
-        </TouchableWithoutFeedback>
+            </View>
+          </GestureDetector>
+        </GestureHandlerRootView>
       </Modal>
-    </GestureHandlerRootView>
+    </View>
   );
 };
 
@@ -171,4 +174,9 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'flex-end',
   },
+  wrapper: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
 });

package/src/contexts/messageContext/MessageContext.tsx

@@ -96,7 +96,7 @@ export type MessageContextValue<
    * @param showMessageReactions
    * @returns void
    */
-  showMessageOverlay: (showMessageReactions?: boolean) => void;
+  showMessageOverlay: (showMessageReactions?: boolean, selectedReaction?: string) => void;
   showMessageStatus: boolean;
   /** Whether or not the Message is part of a Thread */
   threadList: boolean;

package/src/contexts/themeContext/utils/theme.ts

@@ -132,6 +132,7 @@ export type Theme = {
     contentContainer: ViewStyle;
     handle: ViewStyle;
     overlay: ViewStyle;
+    wrapper: ViewStyle;
   };
   channel: {
     selectChannel: TextStyle;
@@ -442,6 +443,7 @@ export type Theme = {
   messageMenu: {
     actionList: {
       container: ViewStyle;
+      contentContainer: ViewStyle;
     };
     actionListItem: {
       container: ViewStyle;
@@ -571,6 +573,7 @@ export type Theme = {
       gridWidth: number;
       image: ImageStyle;
       imageContainer: ViewStyle;
+      imageContainerStyle: ViewStyle;
       maxHeight: number;
       maxWidth: number;
       minHeight: number;
@@ -891,6 +894,7 @@ export const defaultTheme: Theme = {
     contentContainer: {},
     handle: {},
     overlay: {},
+    wrapper: {},
   },
   channel: {
     selectChannel: {},
@@ -1196,6 +1200,7 @@ export const defaultTheme: Theme = {
   messageMenu: {
     actionList: {
       container: {},
+      contentContainer: {},
     },
     actionListItem: {
       container: {},
@@ -1354,6 +1359,7 @@ export const defaultTheme: Theme = {
       image: {},
       imageBorderRadius: undefined,
       imageContainer: {},
+      imageContainerStyle: {},
       maxHeight: 300,
       maxWidth: 256,
       minHeight: 100,