react-native-google-places-autocomplete's onPress function is not working

Question

I am trying to implement react-native-google-places-autocomplete in my react-native project and the onPress function would not work at all. I have already tried the other solutions on StackOverflow but it simply doesn't work. I have added "keyboardShouldPersistTaps='always' to the parent components as well. I use the "navigation.navigate("maps")" to get to this screen if that helps.

Here is the code.

class ChangeAddress extends PureComponent<Props> {
  render() {
    const { navigation } = this.props;

    return (
      <ScrollView
        contentContainerStyle={{ flex: 1 }}
        style={styles.modalContainer}
        keyboardShouldPersistTaps="always">
        <View style={styles.modalHeader}>
          <Button onPress={() => navigation.goBack()} style={styles.backButton}>
            <Image source={backLogo} />
          </Button>
          <View style={styles.searchBar}>
            <View>
              <Text style={styles.pickUpLocation}>Set Pickup Location</Text>
            </View>
            <GooglePlacesAutocomplete
              placeholder="Search"
              minLength={2}
              autoFocus={false}
              listViewDisplayed={false}
              renderDescription={(row) => row.description}
              fetchDetails={true}
              onPress={(data, details = null) => {
                console.log('HIIIIIIIIIIIIIIIIII', data, details);
              }}
              query={{
                key: 'API',
                language: 'en',
              }}
              styles={{
                textInputContainer: {
                  backgroundColor: 'rgba(0,0,0,0)',
                  borderTopWidth: 0,
                  borderBottomWidth: 0,
                  width: '90%',
                },

                textInput: {
                  marginLeft: 0,
                  marginRight: 0,
                  height: 40,
                  color: '#5d5d5d',
                  fontSize: 14,
                  borderWidth: 1,
                  borderColor: '#778899',
                },
                predefinedPlacesDescription: {
                  color: '#1faadb',
                },
                description: {
                  fontWeight: 'bold',
                  borderTopWidth: 0,
                  borderBottomWidth: 0,
                  opacity: 0.9,
                },
                listView: {
                  color: 'black',
                  position: 'absolute',
                  top: 70,
                  left: -40,
                  width: dimens.width,
                  elevation: 1,
                },
              }}
            />
          </View>
        </View>
      </ScrollView>
    );
  }
}

What am I missing? Thanks in advance.

Answer 1

 <GooglePlacesAutocomplete
            placeholder='Informe sua rota de hoje'
            keepResultsAfterBlur={true}
            textInputProps={{ onBlur: () => { console.warn("Blur") } }}
            onPress={(data, details) => {
                // 'details' is provided when fetchDetails = true
                console.warn(data, details);
            }}
            // listViewDisplayed={true}
            // fetchDetails={true}
            keyboardShouldPersistTaps={"always"}
            // currentLocation={"Brazil"}
            query={{
                key: GOOGLE_MAPS_APIKEY,
                language: 'pt-BR',
                location: 'Brazil'
            }}
        />

It worked for me after add keepResultsAfterBlur={True}

Answer 2

I found a solution to it. For some reason, the onPress function would only work on addresses that are on the top/a part of the same View in which you are using component. In my case, I removed the top:70 from the listView, and to my surprise found that I could now select a few addresses. The onPress was working BUT only on those addresses of the listView which were falling on the parent View.

What I did to fix it was I gave the parent View a height of "100%" so that when listView opens, it falls INSIDE the parent View. And using "flex-start" I pushed it upwards. Works flawlessly now.