I am trying to create a custom component in React Native which contains an Image tag with a custom source to be passed to it. The problem now is, I am getting an error that says Invalid call at line 17: require(imageSrc)
.
This is my GoalButton component code below:
const GoalButton = ({
buttonStyle,
onPress,
text,
imageSrc,
imageStyle,
textStyle,
}) => {
return (
<TouchableOpacity onPress={onPress}>
<View style={buttonStyle}>
<Image style={imageStyle} source={require(imageSrc)} />
// Above line is Line 17
<Text style={textStyle}>{text}</Text>
</View>
</TouchableOpacity>
);
};
GoalButton.defaultProps = {
buttonStyle: styles.buttonStyle,
onPress: () => null,
imageStyle: styles.imageStyle,
textStyle: styles.textStyle,
};
export default GoalButton;
And I call it from outside like this:
<GoalButton text={'Meal Plan'} imageSrc={'../assets/images/plate.png'} />;
My question is, is there a way I can pass a relative image URL to the component and access it without any error like I was using it directly on the Image component.
CodePudding user response:
it is not possible, you can looked this,