On my screen, I type in the input field and get search results accordingly. The list is rendered within a ScrollView but it still doesn't let me scroll when the keypad is open (in Android at least).
How can I fix this?
This is the component where the scroll view is rendered.
export const LocationsFound: React.FunctionComponent<LocationsFoundProps> = ({ addressesFound,}) => { return (<> {addressesFound.length > 0 ? (<KeyboardAwareScrollView style={styles.searchResultsContainer} keyboardShouldPersistTaps={'always'} keyboardDismissMode={'on-drag'}> {addressesFound.map((addressDetails: addressDetailsType) => { return (<View key={addressDetails.placeName} style={styles.resultContainer}><Text style={styles.text} onPress={() => handleLocationSelection(addressDetails)}> {addressDetails.placeName}</Text></View> ); })}</KeyboardAwareScrollView> ) : null}</> );};const styles = StyleSheet.create({ searchResultsContainer: { width: moderateScale(400), paddingHorizontal: moderateScale(50), paddingRight: moderateScale(65), marginTop: moderateScale(10), }, resultContainer: { marginTop: moderateScale(10), borderBottomWidth: 1, borderBottomColor: 'grey', }, text: { fontSize: moderateScale(15), },});
This is the component where the LocationsFound component is called.
return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.container}><View style={styles.searchFieldContainer}><AddressSearchInput addressType="favouritePoint" placeholder="Ort eingeben" /></View><View style={styles.dropdown}><LocationsFound addressesFound={locations.addressesFoundList} /></View></View></SafeAreaView> );};export const styles = StyleSheet.create({ safeAreaViewContainer: { flex: 1, }, container: { height: '100%', backgroundColor: 'white', width: '100%', display:"flex", flexDirection:"column",flex: 1 }, dropdown: { position: 'absolute', top: moderateScale(215), zIndex: moderateScale(10), backgroundColor: '#fff', flex: 1 },});
I also tried adding
onScrollBeginDrag={Keyboard.dismiss}
but it doesn't make a difference.