Onpress is not working but It is working when keepResultAfterBlur is true...

[acwell94]

const PickAddress = ({ prevBtnHandler, nextBtnHandler }) => {
  const searchRef = useRef(null);
  const [where, setWhere] = useState({
    lat: 37.5648406,
    lng: 126.977303,
  });

  const autoCompleteResultHandler = (data, details = null) => {
    console.log(data, details);
  };

  useEffect(() => {
    searchRef.current?.blur();
  }, []);

  return (
    <View style={styles.container}>
        <View
          style={{
            // flex: 1,
            height: 300,
            width: "100%",
            paddingTop: 32,
            paddingHorizontal: 26,
            position: "absolute",
            zIndex: 2,
          }}
        >
          <GooglePlacesAutocomplete
            ref={searchRef}
            minLength={2}
            placeholder="where"
            query={{
              key: GOOGLE_API_KEY,
              language: "ko",
              components: "country:kr",
              types: "geocode",
            }}
            keyboardShouldPersistTaps={"handled"}
            fetchDetails={true}
            onPress={autoCompleteResultHandler}
            onFail={(error) => console.log(error)}
            onNotFound={() => console.log("no results")}
            // keepResultsAfterBlur={true} ??

            numberOfLines={3}
            listViewDisplayed={false}
            enablePoweredByContainer={false}
            styles={styles.search}
          />
        </View>
    </View>
  );
};

export default PickAddress;

const styles = StyleSheet.create({
  container: {
    width: width,
    height: height - 280,
    alignItems: "center",
    paddingHorizontal: 24,
  },
  
  search: {
    container: {},
    textInputContainer: {
      flexDirection: "row",
      marginBottom: -4,
    },
    textInput: {
      backgroundColor: `${theme.colors.gray}`,
      borderRadius: 8,
      paddingVertical: 9,
      paddingHorizontal: 12,
      fontSize: 16,
      fontFamily: "spoqaR",
      color: "#6c6c6e",
    },
    listView: {
      backgroundColor: "#ffffff",

      borderBottomLeftRadius: 10,
      borderBottomRightRadius: 10,
      paddingHorizontal: 10,
      elevation: 8,
      shadowColor: "#6164BB",
    },
    row: {},
    separator: {
      height: 1,
      backgroundColor: "#c8c7cc",
    },
    description: {
      fontSize: 14,
    },
    loader: {
      flexDirection: "row",
      justifyContent: "flex-end",
      height: 20,
    },
  },
});

Why does the onPress function fire when keepResultsAfterBlur is true and not when keepResultsAfterBlur is false?

package.json "react-native-google-places-autocomplete": "^2.4.1",

I tried 2.5.1 version too but It is not triggered...

Is there anything else I need to set up separately?

[hugoh59]

Where do you set keepResultAfterBlur ? For me it's not working on Android but working fine on iOS.

[acwell94]

Set as props of GooglePlacesAutocomplete component.

when keepResultsAfterBlur is false, It is working but true It is not working in the above code you see

I only tested Android not on iOS, I just implement Android App.

[ediabal]

I am also able to replicate the same issue on ipad

<GooglePlacesAutocomplete
  ref={ref}
  query={{ key: GOOGLE_APP_API_KEY, language: 'en' }}
  textInputProps={{
    InputComp: TextInput,
    onEndEditing: () => handleSaveAddress(ref?.current?.getAddressText()),
  }}
  placeholder={placeholder || 'Enter an address'}
  onPress={(data) => {
    console.log({ data });
    handleSaveAddress(data?.description);
  }}
  keepResultsAfterBlur={false}
  minLength={7}
  debounce={500}
  suppressDefaultStyles
  styles={{
    container: {
      display: 'flex',
      ...(styles?.container || {}),
    },
    textInputContainer: {
      flexDirection: 'row',
      ...(styles?.textInputContainer || {}),
    },
    textInput: {
      fontSize: 16,
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      width: '100%',
      borderColor: tokens.colorBaseGrayscaleShadeGray,
      borderWidth: 1,
      borderRadius: 5,
      padding: 10,
      marginVertical: 4,
      ...(styles?.textInput || {}),
    },
    listView: {
      marginHorizontal: 4,
      ...(styles?.listView || {}),
    },
    row: {
      fontSize: 16,
      padding: 10,
      flexDirection: 'row',
      ...(styles?.row || {}),
    },
    loader: {
      flexDirection: 'row',
      justifyContent: 'flex-end',
      height: 20,
      ...(styles?.loader || {}),
    },
    description: {
      ...(styles?.description || {}),
    },
    predefinedPlacesDescription: {
      ...(styles?.predefinedPlacesDescription || {}),
    },
    separator: {
      height: 0.5,
      backgroundColor: tokens.colorBaseGrayscaleShadeGray,
      ...(styles?.separator || {}),
    },
    poweredContainer: {
      display: 'none',
      ...(styles?.poweredContainer || {}),
    },
    powered: {
      ...(styles?.powered || {}),
    },
  }}
/>

[shrads12]

In my case this was because of not setting keyboardShouldPersistTaps on all ancestors ScrollView or FlatList as mentioned here. I had set it on the immediate ancestor ScrollView but not another level up.