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.

Author: sh1zzle

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"
   }
 }

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],
   );
 
   /**