Unable to Select Addresses from Dropdown in Scrollable Screen

[NarekPVP]

Describe the bug

I want to add Google Places Autocomplete to a scrollable screen, but I can't select addresses from the dropdown menu. It works on the IOS simulator, but not on an actual IOS device. Some people have suggested that the problem might be related to the ScrollView. I have changed it to a FlatList, but it still doesn't work.

Reproduction

here is the code. (It's a custom component)

Click to expand!

import React, { useEffect, useRef } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'
import { TGooglePlacesInput } from './googlePlacesInput.types'

const GooglePlacesInput = ({
 title,
 placeholder,
 currentValue,
 required = true,
 onPress,
 errorMsg = '',
}: TGooglePlacesInput) => {
 const ref = useRef<any>()

 useEffect(() => {
   ref.current?.setAddressText(currentValue)
 }, [currentValue])

 return (
   <>
     {title && (
       <Text style={styles.title}>
         {title}
         {required && <Text style={{ color: 'red' }}> *</Text>}
       </Text>
     )}
     <View style={styles.container}>
       <GooglePlacesAutocomplete
         ref={ref as any}
         placeholder={placeholder}
         onPress={(data: any, details = null) => {
           onPress(data, details)
         }}
         fetchDetails={true}
         minLength={2}
         debounce={400}
         query={{
           key: process.env.GOOGLE_MAPS_API_KEY,
           language: 'en',
         }}
         nearbyPlacesAPI="GooglePlacesSearch"
         styles={{
           container: {
             borderColor: errorMsg !== '' ? 'red' : 'gray',
             borderWidth: 1,
             width: '90%',
             borderRadius: 5,
             marginTop: 10,
           },
           textInputContainer: {
             backgroundColor: 'transparent',
           },
           listView: {
             backgroundColor: 'white',
           },
         }}
       />
       {errorMsg !== '' && <Text style={styles.errorMessage}>{errorMsg}</Text>}
     </View>
   </>
 )
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
 },
 title: {
   marginTop: 15,
   marginLeft: 22,
   marginBottom: 10,
   fontSize: 14,
   lineHeight: 21,
   fontWeight: '400',
 },
 errorMessage: {
   color: 'red',
   marginTop: 5,
   fontSize: 12,
   fontWeight: 'bold',
 },
})

export default GooglePlacesInput

• Library Version: [e.g. 2.5.6]

• React Native Version: [e.g. 0.72.6]

• iOS

• Android

• Web

• I am using expo

[kyadalu1]

Try this

[NarekPVP]

The problem caused by KeyboardAvoidingView.

[simonarcher]

As mentioned above the issue can be caused by having the component in a KeyboardAvoidingView (or maybe another type of scroll view)

For me I was using the KeyboardAvoidingView and this was the solution

  <KeyboardAwareScrollView
          showsVerticalScrollIndicator={false}
          alwaysBounceVertical
          contentContainerStyle={themedStyle.scrollContainer}
          scrollEnabled
          enableOnAndroid
          keyboardShouldPersistTaps="handled" // <--- add this
        >
        // your other code containing the Places selector
 </KeyboardAwareScrollView>