fix:bottom sheet transparent click area

Author: khushal87

package/src/components/MessageMenu/MessageActionList.tsx

@@ -25,15 +25,19 @@ export const MessageActionList = (props: MessageActionListProps) => {
   const {
     theme: {
       messageMenu: {
-        actionList: { container },
+        actionList: { container, contentContainer },
       },
     },
   } = useTheme();
 
   if (messageActions?.length === 0) return null;
 
   return (
-    <ScrollView 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}
@@ -45,7 +49,8 @@ export const MessageActionList = (props: MessageActionListProps) => {
 };
 
 const styles = StyleSheet.create({
-  container: {
+  container: {},
+  contentContainer: {
     paddingHorizontal: 16,
   },
 });

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -119,36 +119,33 @@ export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>
     });
 
   return (
-    <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
+    <View style={styles.wrapper}>
       <Modal onRequestClose={onClose} transparent visible={visible}>
-        <TouchableWithoutFeedback onPress={onClose} style={{ flex: 1 }}>
-          <GestureHandlerRootView style={{ flex: 1 }}>
-            <GestureDetector gesture={gesture}>
-              <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>
-          </GestureHandlerRootView>
-        </TouchableWithoutFeedback>
+        <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,
+                  {
+                    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>
+        </GestureHandlerRootView>
       </Modal>
     </View>
   );
@@ -177,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

@@ -442,6 +442,7 @@ export type Theme = {
   messageMenu: {
     actionList: {
       container: ViewStyle;
+      contentContainer: ViewStyle;
     };
     actionListItem: {
       container: ViewStyle;
@@ -1196,6 +1197,7 @@ export const defaultTheme: Theme = {
   messageMenu: {
     actionList: {
       container: {},
+      contentContainer: {},
     },
     actionListItem: {
       container: {},