Ad

How To Pass My Image Source As A Prop To A Child Component From The Parent?

- 1 answer

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
Ad