ScrollView not allowing me to select from Component dropdown - reactjs

Question

First of all let me share my code along with the current result of what I have going.
return(
<DismissKeyBoard>
<View>
<Formik
initialValues ={{user: 'User ', place: '', description: '', comments: '',datePosted: new Date(), location: '', eventDate: ''}}
onSubmit ={logInfo}>
{props =>(
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.form}>
<Text style={styles.text}>Pick a place for the event</Text>
<GooglePlacesAutocomplete
placeholder='Insert place to find'
minLength={2}
keyboardAppearance={'light'}
fetchDetails={false}
onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
{props.values.location= data.description}
console.log("hello",props.values.location);
}}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth:0,
width: '100%',
},
textInput: {
fontSize: 16
},
predefinedPlacesDescription: {
color: '#1faadb',
height:'100%',
},
}}
query={{
key: '',
language: 'en', // language of the results
}}
/>
<View style={styles.container}>
<Text
placeholder= {props.values.user}
onChangeText = {props.handleChange('user')}
values = {props.values.user}
style={styles.text}>{props.values.user}</Text>
<TextInput
placeholder= 'Place (e.g Honolulu)'
onChangeText = {props.handleChange('place')}
values = {props.values.place}
style={styles.text}/>
<TextInput
placeholder= 'Description (e.g This is located...)'
onChangeText = {props.handleChange('description')}
values = {props.values.description}
style={styles.text}/>
<TextInput
placeholder= 'Comment (e.g This is fun because...)'
onChangeText = {props.handleChange('comments')}
values = {props.values.comments}
style={styles.text}/>
<Text style={styles.text} >Pick a date for the event</Text>
<DatePicker
date={props.values.eventDate}
onDateChange={(date) => {props.values.eventDate= date}}
values = {props.values.eventDate} />
{/* <Text style={styles.text}>Location</Text> */}
<View style={styles.viewbtn}>
<TouchableOpacity onPress={props.handleSubmit} style={styles.btn} ><Text style={styles.txtbtn} >Submit</Text></TouchableOpacity>
{/* <Button title="Submit" onPress={props.handleSubmit} /> */}
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
)}
</Formik>
</View>
</DismissKeyBoard>
)
}
const styles = StyleSheet.create({
container:{
// flex:1,
paddingTop:20,
// margin: 10,
alignItems: 'center'
},
// form:{
// alignItems: 'flex-start',
// paddingTop:40,
// },
text:{
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: 'black',
paddingTop:15,
},
viewbtn:{
paddingTop:15,
},
btn:{
backgroundColor: 'purple',
padding:20,
margin:20,
width: 100,
justifyContent: 'center',
alignItems: 'center',
borderRadius : 5,
},
txtbtn:{
fontWeight: 'bold',
fontSize: 14,
color: 'orange'
},
})
The issue
When I click on the GooglePlacesAutoComplete I am able to see the list of places, but then when I click on any of the found places it will not take the input.
Observations
When the <GooglePlacesAutocomplete /> is NOT inside a ScrollView I cannot see the suggestion.
When the <GooglePlacesAutocomplete /> is NOT within any other <View></View> it works perfectly fine.
Warning
With the above code I also get this warning message "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead."
Desired Result
I would like to have the <GooglePlacesAutocomplete /> component displayed on top of the form, without any weird errors and its functionalities working properly. (Preferably as shown in the picture)
Edit
I am importing import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'; from https://github.com/FaridSafi/react-native-google-places-autocomplete
I am not an expert in GUI, an explanation would be very appreciated and welcomed. If additional information is required I would be more than happy to provide it.
Thank you in advance.

Answer 1

So I faced the same problem and the one thing that helped me solve the problem was adding
keyboardShouldPersistTaps={true} inside the <ScrollView> as a prop.
This is my code snippet.
<ScrollView keyboardShouldPersistTaps={true}>
<SelectionDD studentstatus={studentStatus}/>
<SearchableDD collegeNames={collegeNames} placeholder='University'/>
</ScrollView>