Estoy tratando de crear un componente personalizado en React Native que contiene una etiqueta de imagen con una fuente personalizada para pasarle. El problema ahora es que recibo un error que dice Invalid call at line 17: require(imageSrc) .

Este es mi código de componente GoalButton a continuación:

 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;

Y lo llamo desde fuera así:

 <GoalButton text={'Meal Plan'} imageSrc={'../assets/images/plate.png'} />;

Mi pregunta es, ¿hay alguna manera de pasar una URL de imagen relativa al componente y acceder a ella sin ningún error, como si la estuviera usando directamente en el componente Imagen?