FlatList React Native not displaying image - react-native

Question

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;

Answer 1

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.