From da8ce9f98b33596e89248bba3de4163858d94260 Mon Sep 17 00:00:00 2001
From: shiezza1 <88339281+sh1zzle@users.noreply.github.com>
Date: Sat, 27 Sep 2025 01:47:23 +0700
Subject: [PATCH 1/2] Fix Android edge-to-edge display issue in modal

- Use SafeAreaView from react-native-safe-area-context for better edge-to-edge support on Android
- Conditionally apply SafeAreaContextView only on Android to respect safe area insets
- Keep existing SafeAreaView for iOS to maintain backward compatibility
- Add react-native-safe-area-context as peer dependency

Fixes issue where dropdown modal content would extend under system UI (status bar, navigation bar) on Android devices with edge-to-edge display enabled.
---
 package.json             |  7 ++++---
 src/components/Picker.js | 31 +++++++++++++++++++++++++------
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 00160871e..9ff51fd90 100644
--- a/package.json
+++ b/package.json
@@ -64,8 +64,9 @@
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": "*"
+    "react": "^18.2.0",
+    "react-native": "^0.72.5",
+    "react-native-safe-area-context": "^4.0.0",
+    "react-native-gesture-handler": "^2.18.0"
   }
 }
diff --git a/src/components/Picker.js b/src/components/Picker.js
index c8634ca0d..197760130 100644
--- a/src/components/Picker.js
+++ b/src/components/Picker.js
@@ -17,6 +17,7 @@ import {
   Modal,
   Platform,
   SafeAreaView,
+  StatusBar,
   StyleSheet,
   Text,
   TextInput,
@@ -25,6 +26,9 @@ import {
 } from 'react-native';
 
 import { FlatList, ScrollView } from 'react-native-gesture-handler';
+
+// Import SafeAreaView from react-native-safe-area-context for better edge-to-edge support
+import { SafeAreaView as SafeAreaContextView } from 'react-native-safe-area-context';
 import {
   ASCII_CODE,
   BADGE_COLORS,
@@ -904,7 +908,15 @@ function Picker({
    * @returns {object}
    */
   const _modalContentContainerStyle = useMemo(
-    () => [THEME.modalContentContainer, ...[modalContentContainerStyle].flat()],
+    () => [
+      THEME.modalContentContainer,
+      // Add edge-to-edge support for Android
+      Platform.OS === 'android' && {
+        flex: 1,
+        backgroundColor: THEME.modalContentContainer.backgroundColor || '#FFFFFF',
+      },
+      ...[modalContentContainerStyle].flat()
+    ],
     [modalContentContainerStyle, THEME],
   );
 
@@ -1936,13 +1948,20 @@ function Picker({
         presentationStyle='fullScreen'
         onRequestClose={onRequestCloseModal}
         {...modalProps}>
-        <SafeAreaView style={_modalContentContainerStyle}>
-          {SearchComponent}
-          {DropDownFlatListComponent}
-        </SafeAreaView>
+        {Platform.OS === 'android' ? (
+          <SafeAreaContextView style={_modalContentContainerStyle} edges={['top', 'bottom', 'left', 'right']}>
+            {SearchComponent}
+            {DropDownFlatListComponent}
+          </SafeAreaContextView>
+        ) : (
+          <SafeAreaView style={_modalContentContainerStyle}>
+            {SearchComponent}
+            {DropDownFlatListComponent}
+          </SafeAreaView>
+        )}
       </Modal>
     ),
-    [open, SearchComponent, _modalContentContainerStyle, modalProps],
+    [open, SearchComponent, DropDownFlatListComponent, _modalContentContainerStyle, modalProps],
   );
 
   /**

From 837b4eb7968ee07b1c6af7118f0b0d6864dd467e Mon Sep 17 00:00:00 2001
From: imdevan <huapayadevan@gmail.com>
Date: Mon, 6 Oct 2025 23:09:09 -0700
Subject: [PATCH 2/2] remove unused variable

---
 src/components/Picker.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Picker.js b/src/components/Picker.js
index 197760130..35a0c3ef9 100644
--- a/src/components/Picker.js
+++ b/src/components/Picker.js
@@ -17,7 +17,6 @@ import {
   Modal,
   Platform,
   SafeAreaView,
-  StatusBar,
   StyleSheet,
   Text,
   TextInput,