Pass parameter as props for image display - react-native

Question

I have been trying to display image by passing parameter via props as shown here in my relevant codes:
function ListItem(props) {
return (
<TouchableHighlight
onPress={() => (props.onPress ? props.onPress() : null)}>
<ViewDefine widthOffset={-60}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Image
source={require('../../images/manageport.png')}
//source={require(props.iconPath)}
resizeMode={'contain'}
style={{
width: 32,
height: 32,
}}
/>
<Text style={[fontNormal2, {marginLeft: 10}]}>{props.text}</Text>
</View>
<View>
<IconComponent
iconName={'arrow-right'}
iconSize={20}
iconColor={'gray'}
/>
</View>
</View>
</ViewDefine>
</TouchableHighlight>
);
}
Another function that passes props to above code:
<ListItem
onPress={() => navigate('ManagePort')}
iconPath={'../../images/manageport.png'}
//iconName={'briefcase'}
//iconColor={'violet'}
text={'จัดการผลงาน'}
/>
Result is
[fatal][tid:main] src/screen/Profile.js: src/screen/Profile.js:Invalid call at line 57: require(props.iconPath)
Please help out.

Answer 1

Have you try this
<ListItem
onPress={() => navigate('ManagePort')}
iconPath={require('../../images/manageport.png')}
//iconName={'briefcase'}
//iconColor={'violet'}
text={'จัดการผลงาน'}
/>
<Image
// source={require('../../images/manageport.png')}
source={props.iconPath}
resizeMode={'contain'}
style={{
width: 32,
height: 32,
}}
/>