React Native: "VirtualizedLists should never be nested inside plain ScrollViews.." warning
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 />
.
Comments
-
Fabrizio Botalla almost 2 years
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?