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..35a0c3ef9 100644
--- a/src/components/Picker.js
+++ b/src/components/Picker.js
@@ -25,6 +25,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 +907,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 +1947,20 @@ function Picker({
presentationStyle='fullScreen'
onRequestClose={onRequestCloseModal}
{...modalProps}>
-
- {SearchComponent}
- {DropDownFlatListComponent}
-
+ {Platform.OS === 'android' ? (
+
+ {SearchComponent}
+ {DropDownFlatListComponent}
+
+ ) : (
+
+ {SearchComponent}
+ {DropDownFlatListComponent}
+
+ )}
),
- [open, SearchComponent, _modalContentContainerStyle, modalProps],
+ [open, SearchComponent, DropDownFlatListComponent, _modalContentContainerStyle, modalProps],
);
/**