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

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';
 
@@ -31,14 +33,14 @@ export const MessageActionList = (props: MessageActionListProps) => {
   if (messageActions?.length === 0) return null;
 
   return (
-    <View accessibilityLabel='Message action list' style={[styles.container, container]}>
+    <ScrollView accessibilityLabel='Message action list' style={[styles.container, container]}>
       {messageActions?.map((messageAction, index) => (
         <MessageActionListItem
           key={messageAction.title}
           {...{ ...messageAction, index, length: messageActions.length }}
         />
       ))}
-    </View>
+    </ScrollView>
   );
 };
 

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

@@ -1,13 +1,14 @@
 import React, { PropsWithChildren, useEffect } from 'react';
 import {
   Animated,
-  Keyboard,
-  KeyboardEvent,
+  Dimensions,
   Modal,
   StyleSheet,
-  TouchableWithoutFeedback,
   useWindowDimensions,
+  TouchableWithoutFeedback,
   View,
+  Keyboard,
+  KeyboardEvent,
 } from 'react-native';
 import {
   Gesture,
@@ -119,32 +120,38 @@ 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]}>
+    <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
+      <Modal onRequestClose={onClose} transparent visible={visible}>
+        <TouchableWithoutFeedback onPress={onClose} style={{ flex: 1 }}>
+          <GestureHandlerRootView style={{ flex: 1 }}>
             <GestureDetector gesture={gesture}>
-              <Animated.View
-                style={[
-                  styles.container,
-                  {
-                    backgroundColor: white_snow,
-                    height,
-                    transform: [{ translateY }],
-                  },
-                  container,
-                ]}
-              >
-                <View
-                  style={[styles.handle, { backgroundColor: grey, width: windowWidth / 4 }, handle]}
-                />
-                <View style={[styles.contentContainer, contentContainer]}>{children}</View>
-              </Animated.View>
+              <View style={[styles.overlay, { backgroundColor: overlay }, overlayTheme]}>
+                <Animated.View
+                  style={[
+                    styles.container,
+                    {
+                      backgroundColor: white_snow,
+                      height,
+                      transform: [{ translateY }],
+                    },
+                    container,
+                  ]}
+                >
+                  <View
+                    style={[
+                      styles.handle,
+                      { backgroundColor: grey, width: windowWidth / 4 },
+                      handle,
+                    ]}
+                  />
+                  <View style={[styles.contentContainer, contentContainer]}>{children}</View>
+                </Animated.View>
+              </View>
             </GestureDetector>
-          </View>
+          </GestureHandlerRootView>
         </TouchableWithoutFeedback>
       </Modal>
-    </GestureHandlerRootView>
+    </View>
   );
 };