I updated to react native version 0.61.4 and now onSelect is not working. I am able to populate the places in the search box successfully, but when I go to select the location nothing happens. I can not select or generate any data or details about the location.
Steps to reproduce the behavior:
Expected to see the console display the locations details and data.
Please provide a copy of your usage of the <GoogleAutoComplete /> component between the triple ticks below:
Click to expand!
javascript
<GooglePlacesAutocomplete
debounce={200}
ref={(c) => (googlePlacesAutocomplete = c)}
keyboardAppearance={"light"}
listViewDisplayed={false}
minLength={2}
placeholder="Search..."
autoFocus={false}
returnKeyType={"search"}
fetchDetails={true}
getDefaultValue={() => ""}
keyboardShouldPersistTaps={"always"}
query={{
key: API_KEY,
language: "en", // language of the results
types: "(cities)",
}}
styles={{
textInputContainer: {
backgroundColor: "rgba(0,0,0,0)",
borderTopWidth: 0,
borderBottomWidth: 0,
},
textInput: {
marginLeft: 0,
marginRight: 0,
height: 38,
color: "#5d5d5d",
fontSize: 16,
borderBottomWidth: 1,
borderColor: Colors.LightMustardYellow,
},
description: {
fontWeight: "bold",
fontSize: 12,
},
predefinedPlacesDescription: {
color: "black",
},
}}
renderDescription={(value) => value.description}
onPress={(data, details) => {
// 'details' is provided when fetchDetails = true
updateLocationArray(data, details, timeFrame);
googlePlacesAutocomplete._handleChangeText("");
}}
/>
_Please remember to remove you google API key from the code you provide here_
Alternatively, you can link to a snack.
If applicable, add screenshots to help explain your problem.
If you are using expo please indicate here:
Library Version: ^1.3.9
React Native Version: 0.61.4
Expo Version: 3.18.6
Things I have tried:
adding onBlur with console.log function, keyboardShouldPersistTaps = {"handled"}, keyboardShouldPersistTaps = "handled", keyboardShouldPersistTaps = "always"
I know that there is a nested flatlist issue with the RN upgrade which is most likely causing the issue: _VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead._ am I am seeing threads of other people having this issue but all of the solutions have not worked for me. Not sure if it is my expo or if the package is out of date. But any help would be greatly appreciated.
Add any other context about the problem here.
Hey, thanks for the detailed report and following the issue template.
I just spent some time trying to reproduce this. I wasn't seeing any issues. Is there more to the component than what you posted above?
I tried this on an android device and in a snack. You can see the snack here.
I just ripped away everything from the component and found something interesting, I just removed the KeyboardAwareScrollView that was surrounding the GooglePlacesAutoComplete and it is working. I tried with just ScrollView and it, again, is not working. I tried with SafeAreaView and it is working. So there seems to be a conflict with ScrollView and GooglePlacesAutoComplete...have you seen this before?
ah I got it. This article helped a lot - https://medium.com/codespace69/react-native-react-native-google-places-autocomplete-onpress-callback-not-working-23ddf2f7a98f - I needed to add the keyboardShouldPersistTaps to the ScrollView tag...not the GooglePlacesAutoComplete
Yup, this does not play nicely with scrollView. This is an issue I want to try and work on when I have some time, because so many people struggle with this. There are a ton of issues about it.
Glad you got this sorted out!
Most helpful comment
ah I got it. This article helped a lot - https://medium.com/codespace69/react-native-react-native-google-places-autocomplete-onpress-callback-not-working-23ddf2f7a98f - I needed to add the
keyboardShouldPersistTapsto the ScrollView tag...not the GooglePlacesAutoComplete