Ad
How To Pass My Image Source As A Prop To A Child Component From The Parent?
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>
);
};
Ad
Answer
the Error is in your component passing the wrong prop. in your ServiceScreen.js
the prop spells the wrong. it should be source
prop but you wrote soruce
for your ServiceBox
Ad
source: stackoverflow.com
Related Questions
- → should I choose reactjs+f7 or f7+vue.js?
- → Phonegap Android write to sd card
- → Local reference jquery script in nanohttpd (Android)
- → Click to navigate on mobile devices
- → How to allow api access to android or ios app only(laravel)?
- → Access the Camera and CameraRoll on Android using React Native?
- → React native change listening port
- → What is the default unit of style in React Native?
- → Google play market autocomplete icon
- → Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
- → Using Laravel with Genymotion
- → react native using like web-based ajax function
- → react native pdf View
Ad