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