What am I doing Wrong with React Native Flat List Image Source? (How to set Image source in FlatList?)

Question

This is the Code Below, and the Way its stored?

const CustomBox = ({ iconImage}) => (
     <Image  source={iconImage} style={{height:80, width: 80, resizeMode: "center"}}/>

  );

The Data

{
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Home Painting',
      gradientColours: ["#2BDBA0", "#00887F"],
      iconImage: 'require("../../../assets/icons/ServiceIcons/PaintBrushWithBucket.svg")'
    },

export default function Custom() {

    const renderItem = ({ item }) => <CustomBox 
                                        title={item.title} 
                                        gradientColours={item.gradientColours}
                                        iconImage={item.iconImage}
                                        />;
                                    
                                        
                                        

The return fuction

return (

<FlatList

    renderItem={renderItem}
    data={DATA}
    keyExtractor={item => item.id}

></FlatList>


</View>

); }

Answer 1

Answer:

Remove the single quotes from the key iconImage value. – Mourad Karoudi