How to use map to fetch JSON data objects in react native instead of FlatList. ScrollView is not working in FlatList

Question

Here is the error I am getting- VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead. Please check the below code.

My main issue is I want to scroll my all data on the page, but the image is not scrolling because it's not inside the FlatList.

If I use Flatlist then how can I scroll my all data on the page?

and if I can't scroll my all page data using Flatlist then How can scroll and map json data. Thank you in advance for your support.

import React, { useEffect, useState, useContext, } from 'react';
import { View, Text, Image, StyleSheet, ScrollView, SafeAreaView, ActivityIndicator, FlatList, } from 'react-native';


    export default function App() {
    
        const [isLoading, setLoading] = useState(true);
        const [data, setData] = useState([]);
    
        const getMovies = async () => {
            try {
                const response = await fetch('https://reactnative.dev/movies.json');
                const json = await response.json();
                setData(json.movies);
            } catch (error) {
                console.error(error);
            } finally {
                setLoading(false);
            }
        }
    
        useEffect(() => {
            getMovies();
        }, [])
    
        return (
            <ScrollView>
                <SafeAreaView style={{ flex: 1, height: "100%" }}>
    
                    <Image source={require('./AllImage/qq2.jpg')}
                        style={{ width: "auto", height: 150, resizeMode: "cover", }} />
    
                    <View>
                        {isLoading ? <ActivityIndicator /> : (
                            <FlatList nestedScrollEnabled
                                data={data}
                                keyExtractor={({ id }, index) => id}
                                renderItem={({ item }) => (
    
    
                                    <View style={styles.container}>
                                        <View style={styles.item}>
                                            <Text style={styles.mainText}>{item.title}</Text>
                                        </View>
    
                                        <View style={styles.item}>
                                            <Text style={styles.mainText}>{item.releaseYear}</Text>
                                        </View>
                                    </View>
                                )}
                            />
                        )}
                    </View>
                </SafeAreaView>
            </ScrollView>
    
        );
    };

Answer 1

Remove ScrollView . Use ListHeaderComponent prop of FlatList . Image and other components that should appear on top of FlatList can be added to this prop.

<FlatList
  ListHeaderComponent={<Image />}
  ...
/>