FlatList React Native not displaying image-CodePudding

I am trying to utilise a FlatList for my expo React Native application. I have decided to save my images in a local folder to display on the home page. However, I am getting the error message below and I really do not understand where I am going wrong.

The error message is: "invalid call at line { see *** below for the line concerned }"

    const Inspiration = () => {

    const handleSelectedImage = (e) => {
        console.log('image selected', e);
    };
    return (
        <>
            <CreatedImageModal />
            <ModalGeneratingImage />
            <ExamplePrompt />
            <FlatList
                contentContainerStyle={{ flexGrow: 1 }}
                data={EXAMPLES}
                style={styles.list}
                numColumns={2}
                keyExtractor={(item) => item.id}
                ListHeaderComponent={<Prompt />}

                renderItem={({ item }) => (
                    <Image
                        source={require(item.id)} // ***
                        onPress={() => handleSelectedImage(item)}
                        transition={true}
                        containerStyle={styles.item}
                        PlaceholderContent={<ActivityIndicator />}
                    />
                )}
            />
        </>
    );
};

const styles = StyleSheet.create({
    list: {
        width: '100%',
        backgroundColor: '#000',

    },
    item: {
        aspectRatio: 1,
        width: '100%',
        flex: 1,
    },
});


const EXAMPLES = [
    {
        id: '../assets/img-1.png',
        prompt: 'A synthwave style sunset above the reflecting water of the sea, digital art'
    },
    {
        id: '../assets/img-2.png',
        prompt: 'A van Gogh style painting of an American football player'
    },
    {
        id: '../assets/img-3.png',
        prompt: '3D render of a cute tropical fish in an aquarium on a dark blue background, digital art'
    },
    {
        id: '../assets/img-4.png',
        prompt: 'A cartoon of a cat catching a mouse'
    },
    {
        id: '../assets/img-5.png',
        prompt: 'A comic book cover of a superhero wearing headphones'
    },
    {
        id: '../assets/img-6.png',
        prompt: 'A hand-drawn sailboat circled by birds on the sea at sunrise'
    },
    {
        id: '../assets/img-7.png',
        prompt: 'An expressive oil painting of a basketball player dunking, depicted as an explosion of a nebula'
    },
    {
        id: '../assets/img-8.png',
        prompt: 'A hand drawn sketch of a Porsche 911'
    },
    {
        id: '../assets/img-9.png',
        prompt: 'A sea otter with a pearl earring" by Johannes Vermeer'
    },

];

export default Inspiration;

CodePudding user response：

Try to change your EXAMPLES and Image component as below:

<Image
  source={item.id}
  onPress={() => handleSelectedImage(item)}
  transition={true}
  containerStyle={styles.item}
  PlaceholderContent={<ActivityIndicator />}
 />

const EXAMPLES = [
    {
        id: require('../assets/img-1.png'),
        prompt: 'A synthwave style sunset above the reflecting water of the sea, digital art'
    },
...
]

You need to add require to your data instead of Image component.