[ANDROID] Row results not touchable

[lstoyanoff]

Describe the bug

After inputing some string and the row results are visible they are not touchable. If you close the keyboard and press the input again they can be pressed until you search again.

Reproduction - (required - issue will be closed without this)

I've tried with the very basic example:

const Test = () => (
    <View style={{flex: 1}}>
      <GooglePlacesAutocomplete
        query={placesQuerySettings}
        keyboardShouldPersistTaps="always"
        onPress={(data) => {
          console.log(data);
        }}
      />
    </View>
);

One strange thing that I've noticed is when I've changed the FlatList keyExtractor function to just return the index it kind of worked.

Additional context

• Android (Hermes enabled)
• Library Version: 2.4.1
• React Native Version: 0.63.3

[bell-steven]

I cannot reproduce the issue using Expo on an Android device. If you provide a link to a snack or provide a more complete example I can try and take a look.

[lstoyanoff]

@bell-steven

I've tried and it's seems to be working in Expo but unfortunately in the described environment above it's still failing.

[najamulsaqib]

I am also facing same issue have you found any solution? I'm using this in ScrollView

[Cavallando]

We were facing the same solution on Android only, exact same reproducible steps as described by OP.

The only thing that seemed to resolve the issue was modifying GooglePlacesAutocomplete.js in the library itself to remove keyExtractor function. This fix did not affect the behavior on iOS.

It made me wonder why this line in the library was even needed:

const keyGenerator = () => Math.random().toString(36).substr(2, 10);

Applying this patch using patch-package for now:

diff --git a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
index cd03253..528a332 100644
--- a/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
+++ b/node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js
@@ -623,6 +623,7 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
+        key={rowData.place_id}
       >
         <TouchableHighlight
           style={
@@ -746,8 +747,6 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
   };

   const _getFlatList = () => {
-    const keyGenerator = () => Math.random().toString(36).substr(2, 10);
-
     if (
       supportedPlatform() &&
       (stateText !== '' ||
@@ -764,7 +763,6 @@ export const GooglePlacesAutocomplete = forwardRef((props, ref) => {
             props.styles.listView,
           ]}
           data={dataSource}
-          keyExtractor={keyGenerator}
           extraData={[dataSource, props]}
           ItemSeparatorComponent={_renderSeparator}
           renderItem={({ item, index }) => _renderRow(item, index)}