title: React native: passing image path as params through 2 components
body: <p>i'm trying to pass an image path down to one component via react-navigation params and from that component to a third one as a prop.</p>
  
  <p>This is a chat application and the structure of the components is:</p>
  
  <p>ChatsMain.js --> (click on SingleChat, passing parameters when navigating) --> SingleConversation.js  --> Message</p>
  
  <p>I can pass 'name' as a parameter, but not the uri of an image, not even by assigning it to variables.</p>
  
  <p>The name that i see on the SingleChat is passed without problems to the correspondent conversation, but when i pass the image i get the error:
  'Failed prop type: Invalid prop <code>source</code> supplied to <code>Image</code>.'</p>
  
  <p>I hope it's clear enough, i don't think it's the correct way to do this, but i am new to react native!</p>
  
  <p>ChatsMain.js</p>
  
  <pre><code>const imageNames = {
      juf: require('../assets/juf.png'),
      meester: require('../assets/meester.png'),
      groep: require('../assets/groep.png'),
      onderwerpen: require('../assets/onderwerpen.png')
  }
  
  export default class ChatsMain extends React.Component {
      render() {
          return (
  
                          &lt;SingleChat
                              image={imageNames.juf}
                              backgroundColor={yellow}
                              borderColor={blue}
                              name='Juf Elsa'
                              onPress={() =&gt; this.props.navigation.navigate('SingleConversation', {name: 'Juf Elsa', image: imageNames.juf})}
                          /&gt;
  )
  </code></pre>
  
  <p>SingleConversation.js</p>
  
  <pre><code>
  export default class SingleConversation extends React.Component {
  
      static navigationOptions = ({ navigation }) =&gt; {
          return {
              title: navigation.getParam('name', 'Chat'),
              headerStyle: [titleBar, { backgroundColor: yellow }],
              headerTitleStyle: [title, { color: blue }]
          }
      }
      render() {
          return (
              &lt;View style={chatMainContainer}&gt;
                      &lt;ScrollView style={chatsContent}&gt;
                          &lt;Message image={({navigation}) =&gt; navigation.getParam('image', 'image')} /&gt;
                      &lt;/ScrollView&gt;
              &lt;/View&gt;
          );
      }
  }
  
  </code></pre>
  
  <p>Message.js</p>
  
  <pre><code>export default class ReceivedFirst extends React.Component {
  
      render(
          ){
          return(
              &lt;View style={textWithPicture}&gt;
              &lt;View style={[chatPhotoContainer, { borderColor: yellow }]}&gt;
                  &lt;Image source={this.props.image} style={{ width: 70, height: 70}} /&gt;
  .....
  .....
  )
  
  </code></pre>