After selecting an item from the list in my react-native-autocomplete-input, the list does not close.
let Location = (props) => (
<View style={styles.formItem}>
<Autocomplete
data={props.autocompleteResults.predictions}
defaultValue={props.locationInput.toString()}
onChangeText={
text => {
props.updateLocationInput(text)
props.getAutocompleteResults(text)
}
}
renderItem={place => (
<TouchableOpacity
style={{
height: 44,
flex: 1,
justifyContent: 'center',
...styles.label,
borderRadius: 8
}}
onPress={() => {
console.log(place)
props.updatePlace(place)
props.updateLocationInput(place.description)
}}>
<Text numberOfLines={1}>{place.description}</Text>
</TouchableOpacity>
)}
inputContainerStyle={{ borderWidth: 0 }}
style={{
height: 44,
borderRadius: 8,
backgroundColor: '#FFFFFF',
alignSelf: 'stretch',
paddingLeft: 10,
position: 'relative',
...styles.label
}}
/>
</View>
)
Location.propTypes = {
locationInput: React.PropTypes.string.isRequired,
updateLocationInput: React.PropTypes.func.isRequired,
getAutocompleteResults: React.PropTypes.func.isRequired,
autocompleteResults: React.PropTypes.object.isRequired,
updatePlace: React.PropTypes.func.isRequired
}
Location = connect(
mapStateToProps,
mapDispatchToProps
)(Location)
This is how the Location component is utilized. Container pertains to a native-base component:
<Container style={styles.container}>
<ScrollView keyboardShouldPersistTaps={true}>
<Categories />
<View style={{ zIndex: 2, position: 'relative' }}>
<Location />
</View>
<Keywords />
<Button block style={styles.wideButton} onPress={() => props.toggleMenu()}>
<Text>GO</Text>
</Button>
</ScrollView>
</Container>
The Location component is embedded within a ScrollView, yet the issue persists even when removing the scrollview. I have also applied the scroll view fix
<ScrollView keyboardShouldPersistTaps={true}>