React native VirtualizedLists should never be nested inside plain warning

Question

I am making some app with react native. everything are working perfectly but i got React native VirtualizedLists should never be nested inside plain warning message when i put Flatlist into Scroll View Or Content (Nativebase). here is my code

<View style={{flex:1}}>
    <Content>
        <SliderBox
            images={this.state.hotel_photo}
            sliderBoxHeight={200} 
        />
        <FlatList
            data={this.state.hotel_rooms}
            keyExtractor={item => item.id.toString()}
            numColumns={2}
            renderItem={({ item, index }) => {
                return (
                    <View>
                        <TouchableOpacity style={styles.itemsa}>
                            <Image source={{uri:item.photo}}
                                style={styles.itemsimg} />
                            <Text style={{textAlign:'center',fontSize:16, }}>{item.name}</Text>
                            <Text style={{fontSize:16,textAlign:'center'}}>${item.price}</Text>
                        </TouchableOpacity>
                    </View>
                )
            }}
            
        />
</View>

Answer 1

Have a try by removing the Content Component and add the SliderView component in the flatlist header component to show the imageView above the flatlist and allow it to scroll

for example:

<View style={{flex:1}}>
    <FlatList
        data={this.state.hotel_rooms}
        keyExtractor={item => item.id.toString()}
        numColumns={2}
        ListHeaderComponent={
            <SliderBox
                images={this.state.hotel_photo}
                sliderBoxHeight={200} 
            />
        }
        renderItem={({ item, index }) => {
            return (
                <View>
                    <TouchableOpacity style={styles.itemsa}>
                        <Image source={{uri:item.photo}}
                            style={styles.itemsimg} />
                        <Text style={{textAlign:'center',fontSize:16, }}>{item.name}</Text>
                        <Text style={{fontSize:16,textAlign:'center'}}>${item.price}</Text>
                    </TouchableOpacity>
                </View>
            )
        }}
        
    />
</View>