Invalid call at line 41: require(item.image) - react-native

Question

I'm trying to create screen with a FlatList by using my component but why couldn't find the reason why i get error. I also checked React native dev website and see how FlatList works but still have no clue.
I'm pretty new at react native. Sorry if its very basic mistake.
The screen that im trying to create:
My component:
import React from "react";
import { Text, StyleSheet, View, TouchableOpacity, Image } from "react-native";
const ScreenMap = (props) => {
return (
<View>
<TouchableOpacity
onPress={props.path}>
<Image source={props.imageSource} />
</TouchableOpacity>
</View>);
};
const styles = StyleSheet.create({});
export default ScreenMap
Screen script:
import React from "react";
import { FlatList, Text, StyleSheet, View } from "react-native";
import ScreenMap from '../components/ScreenMap'
const BaslicaScreen = () => {
const contentButtons = [
{
title: "ilceler",
image:'../../assets/Baslica/ilceler.png'
},
{
title: "gururHuzurIlham",
image: '../../assets/Baslica/gururHuzurIlham.png'
},
{
title: "ulasim",
image:'../../assets/Baslica/ulasim.png'
},
{
title: "pratikBilgiler",
image:'../../assets/Baslica/pratikBilgiler.png'
},
{
title: "tarihiEserlerVeMuzeler",
image:'../../assets/Baslica/tarihiEserlerVeMuzeler.png'
},
{
title: "etkinlikler",
image: '../../assets/Baslica/etkinlikler.png'
},
{
title: "canakkaleyeOzgu",
image:'../../assets/Baslica/canakkaleyeOzgu.png'
},
]
return (<View style={styles.container}>
<FlatList
data={contentButtons}
keyExtractor={contButton => contButton.title}
renderItem={({ item }) => {
return <ScreenMap imageSource={require(item.image)} />
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "rgba(2,126,179,1)",
},
});
export default BaslicaScreen
Edit i fixed it by changin array to this:
const contentButtons = [
{
title: "ilceler",
image: require('../../assets/Baslica/ilceler.png')
},
{
title: "gururHuzurIlham",
image: require('../../assets/Baslica/gururHuzurIlham.png')
},
{
title: "ulasim",
image: require('../../assets/Baslica/ulasim.png')
},
{
title: "pratikBilgiler",
image: require('../../assets/Baslica/pratikBilgiler.png')
},
{
title: "tarihiEserlerVeMuzeler",
image: require('../../assets/Baslica/tarihiEserlerVeMuzeler.png')
},
{
title: "etkinlikler",
image: require('../../assets/Baslica/etkinlikler.png')
},
{
title: "canakkaleyeOzgu",
image: require('../../assets/Baslica/canakkaleyeOzgu.png')
},
]
and return this :
return <ScreenMap imageSource={item.image} />

Answer 1

you need to pass just image address and not object which is in require() form.
then put require(props.imageSource) inside of your ScreenMap and Image Component.