Not working with KeyboardAwareScrollView

[absenceofnunchi]

I'm currently using KeyboardAwareScrollView with react-native-google-places-autocomplete and only when the auto-complete component is within KeyboardAwareScrollView, the drop-down suggested addresses from Google does not respond to presses. When the aut0-complete component is without KeyboardAwareScrollView, the component works as expected.

The expected behavior is that when the suggested addresses are clicked, the clicked addresses can be used in the onPress property of react-native-google-places-autocomplete, but when the component is placed within KeyboardAwareScrollView, the suggested list disappears as soon as the list is clicked, and no addresses are selected or retrieved.

const CreatePost = ({ navigation }) => {
    const [animation] = useState(new Animated.Value(0))
    useEffect(() => {
        Keyboard.addListener('keyboardWillShow', keyboardWillShow)
        Keyboard.addListener('keyboardWillHide', keyboardWillHide)
        return () => {
            Keyboard.removeListener()
        }
    }, [])

    const keyboardWillShow = e => {
        Animated.timing(animation, {
            duration: e.duration,
            toValue: 1,
        }).start()
    }

    const keyboardWillHide = e => {
        Animated.timing(animation, {
            duration: e.duration,
            toValue: 0,
        }).start()
    }

    const opacityInterpolate = animation.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0]
    })

    const photoStyles = {
        opacity: opacityInterpolate
    }

    const submitHandler = async (value, action) => {}

    return (
        <KeyboardAwareScrollView>
            <Form submitHandler={submitHandler} />
        </KeyboardAwareScrollView>

    )
}

I placed react-native-google-places-autocomplete within Formik:

const Form = ({
    submitHandler,
}) => {
const [addressAnimation] = useState(new Animated.Value(0))
const [addressHeight, setAddressHeight] = useState()
const yCoordinate = heightPosition - addressHeight

const onFocusAddressAutoComplete = () => {
    // onFocus Animation
}
const onBlurAddressAutoComplete = () => {
    // onBlur Animation
}

const translateInterpolate = addressAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, !!yCoordinate && yCoordinate],
    extrapolate: "clamp",
})

const addressStyle = {
    transform: [
        {
            translateY: translateInterpolate
        }
    ]
}

const onFocusProps = () => {
    setHideList(true)
    onFocusAddressAutoComplete()
}

const onBlurProps = (param, callback) => {
    callback(param)
    onBlurAddressAutoComplete()
    setHideList(false)
}

return (
    <View style={styles.container} >
        <Formik
            initialValues={initialValues}
            onSubmit={(value, action) => submitHandler(value, action)}
            validationSchema={yup.object().shape({
                address: yup
                    .string()
                    .min(5)
                    .required(),
            })}
        >
            {({
                values,
                handleChange,
                errors,
                setFieldTouched,
                touched,
                isValid,
                handleSubmit,
                resetForm,
                isSubmitting,
                }) => (
                    <View style={styles.form}>
                        <Animated.View
                            style={[styles.fieldset, addressStyle]}
                            onLayout={e => {
                                if (addressHeight !== e.nativeEvent.layout.y) {
                                    setAddressHeight(e.nativeEvent.layout.y)
                                }
                            }}
                        >
                            <Text style={{ marginLeft: 40, marginVertical: 5 }}>
                                <Text style={{ color: '#FF5D4E' }}>* </Text>
                                Address
                                </Text>
                            <View style={styles.autoComplete}>
                                <GooglePlacesInput
                                    onBlur={() => onBlurProps('address', setFieldTouched)}
                                    onChangeText={handleChange('address')}
                                    onFocus={onFocusProps}
                                />
                            </View>
                        </Animated.View>
                        {touched.address && errors.address &&
                            <Animated.Text style={{ fontSize: 10, color: 'red' }}>{errors.address}</Animated.Text>
                        }
                        <TouchableOpacity
                            disabled={!isValid || loading || isSubmitting}
                            onPress={handleSubmit}
                            style={styles.button}
                        >
                            <Text style={styles.buttonText}>Submit</Text>
                        </TouchableOpacity>
                    </View>
                )}
        </Formik>
    </View>
    )
}

Standard GooglePlacesAutocomple from the repository:

<GooglePlacesAutocomplete
    placeholder='Search'
    minLength={2} // minimum length of text to search
    autoFocus={false}
    returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
    keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
    listViewDisplayed={false}   // true/false/undefined
    fetchDetails={true}
    renderDescription={row => row.description} // custom description render
    onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
        console.log(data, details);
    }}
    textInputProps={ }}
    getDefaultValue={() => ''}

    query={{
        // available options: https://developers.google.com/places/web-service/autocomplete
        key: googleAPIKeyForAutocomplete,
        language: 'en', // language of the results
        region: "CA",
        // types: '(cities)' // default: 'geocode'
        types: '',
    }}

   
    currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
    currentLocationLabel="Current location"
    nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
    GoogleReverseGeocodingQuery={{
        // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
    }}
    GooglePlacesSearchQuery={{
        // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
        rankby: 'distance',
        type: 'food'
    }}

    GooglePlacesDetailsQuery={{
        // available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
        fields: 'formatted_address',
    }}

    filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
    predefinedPlaces={[]}
    enablePoweredByContainer={false}
    debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
    renderLeftButton={() => { }}
    renderRightButton={() => { }}
/>

[amitbravo]

did you find any solution ?

[arsalan-arshad]

yes because of this module is using scroll view into flatlist.
so i found a solution to creating a new custom autocomplete list :D

[abhigk]

yes because of this module is using scroll view into flatlist.
so i found a solution to creating a new custom autocomplete list :D

How did you create it?

[plaporte]

yes because of this module is using scroll view into flatlist.
so i found a solution to creating a new custom autocomplete list :D

I was able to resolve this issue by ensuring that i had no other ScrollView's or FlatList's within the KeyboardAwareScrollView. Now all is working as expected.

[ansalmishra10]

still encountering this issue

[fcaldarelli]

@igibliss00 Have you tried to add keyboardShouldPersistTaps in all ancestor ScrollView?

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <ScrollView keyboardShouldPersistTaps={'handled'}>
            <GooglePlacesAutocomplete ... >

[rpandey66]

@igibliss00 Have you tried to add keyboardShouldPersistTaps in all ancestor ScrollView?

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <ScrollView keyboardShouldPersistTaps={'handled'}>
            <GooglePlacesAutocomplete ... >

this works in my case

[bell-steven]

Closing, as this is now documented in the readme. Thanks @FabrizioCaldarelli!

[Hervera]

I still see the warning when I click the suggested places, and I have added keyboardShouldPersistTaps={'handled'} to the <ScrollView/>

[tusharkhatiwada]

It's still not working on android. I too have added keyboardShouldPersistTaps={'handled'} on the parent <ScrollView> component.

[sytolk]

For me it works on Android with keyboardShouldPersistTaps={'handled'} but on ios onPress() is never called.
This happened if use it inside: https://github.com/abbasmoosavi/react-native-best-viewpager
This fix issue for ios its strange that the same work on Android without keyboardShouldPersistTaps <IndicatorViewPager keyboardShouldPersistTaps={'handled'}

[Rameesh-sanesquare]

did you find any solution ?

customized GooglePlaceAutoComplete.js replace touchable highlight with TouchableOpacity and works fine for me

[osamasaeed]

@igibliss00 Have you tried to add keyboardShouldPersistTaps in all ancestor ScrollView?

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <ScrollView keyboardShouldPersistTaps={'handled'}>
            <GooglePlacesAutocomplete ... >

Thanks, @FabrizioCaldarelli. I have wasted so many hours on this to find out the problem.

[muhammadballak1999]

guys i tried every thing in written in these comments none of them is working, im still not able to click suggestion

[muhammadballak1999]

@igibliss00 Have you tried to add keyboardShouldPersistTaps in all ancestor ScrollView?

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <ScrollView keyboardShouldPersistTaps={'handled'}>
            <GooglePlacesAutocomplete ... >

this works in my case

it doesnt work

[KrisLau]

@bell-steven keyboardShouldPersistTaps not working for me. I'm still getting the same error.

[EmersonGomes21]

Para mim funionou adiionar a propriedade keepResultsAfterBlur para manter a lista aberta e poder selecionar

[Definence]

@bell-steven keyboardShouldPersistTaps not working for me. I'm still getting the same error.

Same issue. Temporarily disable it by adding in Autocomplete reusable component:

useEffect(() => {
    const mockFunction = (error) => {
      if (error === 'VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.') return console.warn(error)
      if (console.originalError) console.originalError(error)
    }

    console.originalError = console.error
    console.error = mockFunction
    return () => { console.error = console.originalError }
  }, [])

[Jamsanz]

@igibliss00 Have you tried to add keyboardShouldPersistTaps in all ancestor ScrollView?

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <ScrollView keyboardShouldPersistTaps={'handled'}>
            <GooglePlacesAutocomplete ... >

I have tried every option available here and it's not working for me.

[muhammadballak1999]

@igibliss00 Have you tried to add keyboardShouldPersistTaps in all ancestor ScrollView?

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <ScrollView keyboardShouldPersistTaps={'handled'}>
            <GooglePlacesAutocomplete ... >

I have tried every option available here and it's not working for me.

Sir you have to also add keyboardShouldPersistTaps in all direct scrollview parent and non direct scrollview parents also in the other files if exist.

[Jamsanz]

@igibliss00 Have you tried to add keyboardShouldPersistTaps in all ancestor ScrollView?

<ScrollView keyboardShouldPersistTaps={'handled'}>
     <ScrollView keyboardShouldPersistTaps={'handled'}>
            <GooglePlacesAutocomplete ... >

I have tried every option available here and it's not working for me.

Sir you have to also add keyboardShouldPersistTaps in all direct scrollview parent and non direct scrollview parents also in the other files if exist.

I just did and everything is still the same. Still showing the VisualizedList error

[cadecanh]

SAME. Not works for me. huhuhu

[malfoych]

@FabrizioCaldarelli Thanks man, It saved my day 👍🏼

[astears]

I have tried setting keyboardShouldPersistTaps={'handled'} for the ancestor KeyboardAwareScrollView's but it's unfortunately still not working for me.

Has anyone been able to figure it out?

[KrisLau]

My problem was fixed but I can't remember what fixed it anymore. If you have nested KeyboardAwareScrollView try keyboardShouldPersistTaps={'always'} for the parent one and keyboardShouldPersistTaps={'handled'} for all children ones. If that doesn't work there might be something else wrong with your screen and you should test a minimal example on a snack or in your project

[KrisLau]

Lmao came back but my own solution doesn't even work for me anymore XD @bell-steven any other suggestions or workarounds?

[humayunkabir]

I tried suggested solutions, but It doesn't work. Any workaround?

[YasirNaeem25]

<ScrollView keyboardShouldPersistTaps={'handled'}>
<ScrollView keyboardShouldPersistTaps={'handled'}>
<GooglePlacesAutocomplete ... >

        not Working for me now

[yudha-dev]

<ScrollView keyboardShouldPersistTaps={'handled'}> <ScrollView keyboardShouldPersistTaps={'handled'}> <GooglePlacesAutocomplete ... >

        not Working for me now

<ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ flexGrow: 1 }}>
<GooglePlacesAutocomplete ... >

[YasirNaeemHw]

<ScrollView keyboardShouldPersistTaps={'handled'}> <ScrollView keyboardShouldPersistTaps={'handled'}> <GooglePlacesAutocomplete ... >

        not Working for me now

<ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ flexGrow: 1 }}> <GooglePlacesAutocomplete ... >

My issue resolve after Place Sim Card in Testing Device

[LucasEsteves2]

I have the same problem, can someone help me? inside a modalize does not work

[zainsolat]

For anyone who is having problems with this, I disabled the scroll inside GooglePlacesAutocomplete
<ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ flexGrow: 1 }}> <GooglePlacesAutocomplete ref={ref} filterReverseGeocodingByTypes={['locality']} fetchDetails={true} debounce={500} placeholder='Search' disableScroll={true}

As per this issue (which does a good job explaining the reason) facebook/react-native#31697

When you do that, the ScrollView can do its job. Hope this helps anyone having issues with this in 2023!

[Lambertn33]

@zainsolat God bless you man!
you saved my day!

<ScrollView
      keyboardShouldPersistTaps="handled"
      contentContainerStyle={{ flexGrow: 1 }}
    >
      <GooglePlacesAutocomplete
        GooglePlacesSearchQuery={{ fields: "geometry" }}
        disableScroll={true}
        placeholder="Search"
        fetchDetails={true}
        onPress={(data, details = null) => {
          console.log('details', details.geometry.viewport);
        }}
        query={{
          key: your_key,
          language: "en",
        }}
      />
    </ScrollView>

This is working for me

[raynox]

Adding keyboardShouldPersistTaps and disableScroll doesn't work in my case

[SomGSS]

@zainsolat Thanks, man. you saved my day!

[sahilkashyap64]

@zainsolat Thank you so much, your solution really helped 🤗

[virajbhosalebbi]

@zainsolat thank you thank you!