I have made a reusable component that has a title as heading, an Image and a onPress function. The image is not rendered or shown. Kindly guide me how can I pass the source dynamically? Is there a way to reference the local path from parent to the child? Thank you
My component is given below:
import React from 'react';
import {
View,
Text,
Image,
StyleSheet,
TouchableNativeFeedback,
} from 'react-native';
const ServiceBox = props => {
return (
<TouchableNativeFeedback onPress={props.pressed}>
<View style={styles.container}>
<Text style={styles.heading}>{props.title}</Text>
<Image
style={styles.img}
source={props.source}
style={{width: 50, height: 50, marginLeft: 10}}
/>
</View>
</TouchableNativeFeedback>
);
};
export default ServiceBox;
My ServicesScreen class is given below:
const ServicesScreen = () => {
return (
<View style={styles.containerPage}>
<View style={styles.container}>
<StatusBar backgroundColor="#840F53" />
<ServiceBox
title="خرید شارژ"
soruce={require('../../assets/icons/logo.jpg')}
/>
<ServiceBox
title="پرداخت قبض"
soruce={require('../../assets/icons/logo.jpg')}
/>
</View>
<View style={styles.container}>
<StatusBar backgroundColor="#840F53" />
<ServiceBox
title="بلیط هواپیما"
soruce={require('../../assets/icons/logo.jpg')}
/>
<ServiceBox
title="بلیط قطار"
soruce={require('../../assets/icons/logo.jpg')}
/>
</View>
<View style={styles.container}>
<StatusBar backgroundColor="#840F53" />
<ServiceBox
title="عوارض راه"
soruce={require('../../assets/icons/logo.jpg')}
/>
<ServiceBox
title="استعلام قبوض"
soruce={require('../../assets/icons/logo.jpg')}
/>
</View>
</View>
);
};