React Native: "VirtualizedLists should never be nested inside plain ScrollViews.." warning

Question

I am having an issue with my <ScrollView> and the <GooglePlacesAutocomplete> components.

Link to GIF of the current issue

After watching the short GIF you might notice that I am getting a warning:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

Also, when I try to click on Dallas, TX, USA nothing happens.
If I were to delete the <ScrollView> component then when I click on a place, it takes it without any issues.

Here is my code:

    import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'; 

    [...] //code removed from brevity

    return(
    <SafeAreaView style={styles.fullPage}>   
    <ScrollView
     stickyHeaderIndices={[0]} >
        <Header/> 
        <View style={styles.container}>

            <Text>Search for fun near you</Text>

            <View style = {styles.firstLine}>
                <Text>On </Text>

                <TouchableOpacity onPress={showDatepicker}><MaterialCommunityIcons name="alarm" color={'orange'} size={25} spin={true} /></TouchableOpacity>
                    {show && (
                    <DateTimePicker
                        testID="dateTimePicker"
                        timeZoneOffsetInMinutes={0}
                        value={date}
                        mode={mode}
                        display="default"
                        onChange={onChange}
                    />)}

            </View>
                <Text style={styles.txt}>Date: {date.toDateString()}</Text>
            <View style = {styles.secondLine}>
                <Text>Within </Text>
                <ModalDropdown 
                    defaultValue='Pick a mile' options={["5", '10','20','50', '75']}
                    onSelect= {(index,value)=>{
                        setMiles(value);
                    }}
                    style = {styles.mileageDropdown}>  
                </ModalDropdown>
                <Text> miles of </Text>

            </View>

            <View style = {styles.thirdLine}>
            <GooglePlacesAutocomplete
                         placeholder='Insert place to find'
                         minLength={2}
                         keyboardAppearance={'light'}
                         fetchDetails={false} 
                         onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                             {setPlace(data.description)}
                            }}                 
                            styles={{
                            textInputContainer: {
                                backgroundColor: 'rgba(0,0,0,0)',
                                borderTopWidth: 0,
                                borderBottomWidth:0,
                                width: '100%',
                                },
                             textInput: {
                                fontSize: 16
                                },
                            }}

                            query={{
                                key: 'SomeAPIkey',
                                language: 'en', // language of the results
                              }}
                        />
            </View>      

            <View style={styles.btn}>
                <TouchableOpacity onPress={handlePress} style={styles.btnSearch}><Text style={styles.txtbtn}>Search</Text></TouchableOpacity>
            </View>
            </View>




            {arr.map((item, key)=>(  
                <Card key={key}>                
                         <View style={styles.cardFirstLine}><Text>{item.user}</Text><Text style={{marginLeft:40}}>{item.location}</Text></View>
                         <View><Text>{item.datePosted}</Text></View>
                         <View style={styles.cardImage}></View>
                         <View><Text>{item.description}</Text></View>
                         <View><Text>{item.eventDate}</Text></View>
                         <View><Text>{item.comments}</Text></View>         
                </Card>
                ))}

     </ScrollView>
    </SafeAreaView>
)}              

        const styles = StyleSheet.create({
            fullPage:{
                flex:1,
            },
            container:{
                paddingTop:65,
                margin: 10,
                alignItems: 'center'
            },
            firstLine:{
                flexDirection: "row",
                alignContent: "center",
                padding: 10,
                alignItems : 'center'
            },
            secondLine:{
                flexDirection: "row",
                padding: 10,
                alignItems : 'center'
            },
            thirdLine:{
                flexDirection: "row",
                padding: 10,
                alignItems : 'center',
                justifyContent: 'center',
            },
            datepicker:{
                paddingLeft:10,
                paddingTop:5
            },
            mileageDropdown:{
                borderColor: 'black',
                borderWidth: StyleSheet.hairlineWidth,
                padding:5,
                paddingTop:5
            },
            btn:{
                paddingTop:10
            },
            btnSearch:{ 
                backgroundColor: 'purple',
                padding:20,
                margin:20,
                width: 100,
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius : 5,
            },
            txtbtn:{
                fontWeight: 'bold',
                fontSize: 14,
                color: 'orange'
            },
            place:{
                marginTop: 30,
                padding: 10,
                borderColor: "red",
                borderWidth: StyleSheet.hairlineWidth
            },
            displayImage:{
                width:200,
                height:200,
                padding:40,
                borderBottomWidth: StyleSheet.hairlineWidth,
                borderColor: "red",
            },  
            txt:{
                borderBottomWidth: StyleSheet.hairlineWidth,
                borderColor: 'black',

            },
            cardFirstLine:{
                padding: 5,
                flexDirection:'row',
            },
            cardImage:{
                paddingTop: 15,
                borderWidth: StyleSheet.hairlineWidth,
                borderColor: 'black',
                width: '75%',
                height:100,

            }
        }); 

I did review most of the StackOverflow posts regarding this, but I have not been able to solve the issue on my end.
Can anyone help me understand what is wrong with this UI?

Answer 1

You are receiving this warning because react-native-google-places-autocomplete renders a <FlatList /> component to show results, and you have <GooglePlacesAutoComplete /> wrapped in a <ScrollView />.

Also, when I try to click on Dallas, TX, USA nothing happens. If I were to delete the component then when I click on a place, it takes it without any issues.

This is a common issue, try adding keyboardShouldPersistTaps='always' or keyboardShouldPersistTaps='handled' to your <ScrollView />.