Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

scroll when the keypad is open

$
0
0

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  },});

enter image description here

I also tried adding

onScrollBeginDrag={Keyboard.dismiss}

but it doesn't make a difference.


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>