fix: change flatlist inside the bottom sheet modal and fix gesture in bottom sheet (#2953)

* fix: change flatlist inside the bottom sheet modal and fix gesture in bottom sheet

* fix: lint issues

* fix:bottom sheet transparent click area

* fix:theme

Author: khushal87

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/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';
 
@@ -179,7 +180,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/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;
@@ -892,6 +894,7 @@ export const defaultTheme: Theme = {
     contentContainer: {},
     handle: {},
     overlay: {},
+    wrapper: {},
   },
   channel: {
     selectChannel: {},
@@ -1197,6 +1200,7 @@ export const defaultTheme: Theme = {
   messageMenu: {
     actionList: {
       container: {},
+      contentContainer: {},
     },
     actionListItem: {
       container: {},