From 51390bb6fa7954bfc9a0fc7a676abd6bd9a7f486 Mon Sep 17 00:00:00 2001
From: Azeezat Raheem <azeezat94@gmail.com>
Date: Mon, 20 Oct 2025 00:16:13 -0700
Subject: [PATCH] fix: Android KeyboardAvoidingView issue in Andoid
 edgeToEdgeEnabled mode

---
 src/components/CustomModal/index.tsx | 30 ++++++++--------------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/src/components/CustomModal/index.tsx b/src/components/CustomModal/index.tsx
index d4d1adc..81900a8 100644
--- a/src/components/CustomModal/index.tsx
+++ b/src/components/CustomModal/index.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, { PropsWithChildren, ReactElement } from 'react';
+import React from 'react';
 import {
   KeyboardAvoidingView,
   Modal,
@@ -14,18 +14,6 @@ import { colors } from '../../styles/colors';
 import { TCustomModalControls } from 'src/types/index.types';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-// In iOS, `SafeAreaView` does not automatically account on keyboard.
-// Therefore, for iOS we need to wrap the content in `KeyboardAvoidingView`.
-const ModalContentWrapper = ({ children }: PropsWithChildren): ReactElement => {
-  return Platform.OS === 'ios' ? (
-    <KeyboardAvoidingView style={[{ flex: 1 }]} behavior="padding">
-      {children}
-    </KeyboardAvoidingView>
-  ) : (
-    <>{children}</>
-  );
-};
-
 const CustomModal = ({
   visible,
   modalControls,
@@ -44,15 +32,13 @@ const CustomModal = ({
       animationType="fade"
       {...modalControls?.modalProps}
     >
-      {/*Used to fix the select with search box behavior in iOS*/}
-      <ModalContentWrapper>
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
         <TouchableOpacity
           onPress={onRequestClose}
-          style={[
-            styles.modalContainer,
-            styles.modalBackgroundStyle,
-            modalControls?.modalBackgroundStyle,
-          ]}
+          style={[styles.modalContainer, modalControls?.modalBackgroundStyle]}
           aria-label="close modal"
         >
           {/* Added this `TouchableWithoutFeedback` wrapper because of the closing modal on expo web */}
@@ -69,7 +55,7 @@ const CustomModal = ({
             </View>
           </TouchableWithoutFeedback>
         </TouchableOpacity>
-      </ModalContentWrapper>
+      </KeyboardAvoidingView>
     </Modal>
   );
 };
@@ -78,8 +64,8 @@ const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
     justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
-  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
   modalOptionsContainer: {
     maxHeight: '50%',
     backgroundColor: colors.white,