title: Pass the local image path as a prop between two functional components
body: <p>I'm working on a project in react-native, where I have troubles of understanding how props works between functional components. My requirement is to create a re-usable button component where I can just pass the image location in the resource file inside my project, so it'll create the button for me. For some reason if i give the required location manually, it will work and create the button for me, but if i\I pass the location as a prop from where I create it wont work for some reason. My code as bellow. </p>
  
  <p>Button component</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      View,
      StyleSheet,
      Image,
      TouchableOpacity
  } from 'react-native';
  
  const ButtonWithImage = (props) =&gt; {
      const {buttonStyle} = styles;
      const clickEvent = () =&gt; {}
  
      return (
          &lt;TouchableOpacity onPress= {clickEvent}style={buttonStyle}&gt;
              &lt;Image 
                  source={props.imagePath} 
                  style={styles.ImageIconStyle} 
              /&gt;
          &lt;/TouchableOpacity&gt;
      );
  };
  
  const styles = {
      buttonStyle: {
          //alignSelf:'stretch',
          height: 50,
          width:50,
          paddingTop:0,
          flexDirection: 'row'
      }
  };
  
  export default ButtonWithImage;
  </code></pre>
  
  <p>Place where I create the button and pass the prop</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      View,
      StyleSheet,
      Dimensions,
  } from 'react-native';
  import FooterIcons from './ButtonWithImage'
  
  const Footer = () =&gt; {
      return (
          &lt;View style={styles.footerStyle}&gt;
              &lt;FooterIcons imagePath = {'./images/homeButton/homeBtn.png'} /&gt;
          &lt;/View&gt;
      );
  };
  
  const styles = StyleSheet.create({
      footerStyle: {
          height: 60,
          width: 100,
          // justifyContent:'flex-start'
      },
  });
  
  export default Footer;
  </code></pre>