How to pass my image source as a prop to a child component from the parent?

Question

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>
  );
};

Answer 1

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