React-native-google-places-autocomplete: Upgrade React Native V .61 On Select Does Not Work

Created on 17 May 2020  路  4Comments  路  Source: FaridSafi/react-native-google-places-autocomplete

Describe the bug

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.

To Reproduce

Steps to reproduce the behavior:

  1. Set up GooglePlacesAutocomplete as github describes (https://github.com/FaridSafi/react-native-google-places-autocomplete)
  2. In search box, type in location
  3. Click on location
  4. View console.logs (or alert or whatever if it you need to do to see the data and details values)
  5. No console outputs are displayed, no data is pulled

Expected behavior

Expected to see the console display the locations details and data.

Code Example (required - issue will be closed without this)

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.

Screenshots

If applicable, add screenshots to help explain your problem.

Where is this bug happening

  • [X ] iOS
  • [ X] Android
  • [ X] Web

If you are using expo please indicate here:

  • [ X] I am using expo

Version Information (please complete the following information)

Library Version: ^1.3.9
React Native Version: 0.61.4
Expo Version: 3.18.6

Additional context

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.

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 keyboardShouldPersistTaps to the ScrollView tag...not the GooglePlacesAutoComplete

All 4 comments

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nikohosn picture nikohosn  路  3Comments

aymkin picture aymkin  路  4Comments

yasirdev picture yasirdev  路  3Comments

diegothucao picture diegothucao  路  3Comments

GervaisYO picture GervaisYO  路  4Comments