React Native - Invalid prop source passed to Image

Question

I am completely new to react native dev, and I am trying to display and <Image>. I keep getting this error:

Warning: Failed prop type: Invalid prop source supplied to Image`

Here is what I have: First, there is list of all images in project defined like this:

export const IMAGES = {
   ScreenStart1: require('../../assets/img/app/startScreen/start1.jpg'),
}

This is the view which calls the image component:

import {IMAGES} from '../../shared/listOfImages'


import FullScreenImage from '../../components/fullScreenImage'

export default class StartScreen extends React.Component {

  render (): React$Element<*> {
    let src = IMAGES.ScreenStart1;

    return (
      <View  style={{flex: 1}}>
        <FullScreenImage src="{src}"/>
      </View>
    );
  }
}

Finally the FullScreenImage component:

//this displays image in full screen
export default class FullScreenImage extends Component {

  render (): React$Element<*> {
    let src = this.props.src;
    return (
      <Image source={src} style={fullScreenImageStyle.container} resizeMode='cover'>
      </Image>

    );
  }
}

Please can someone help me out?

Matt Aft Matt Aft · Accepted Answer · 2017-07-06T20:14:59

I think your issue is <FullScreenImage src="{src}"/>, this literally passes down a string '{src}', if you want to inject a variable into a string you have to do this:

<FullScreenImage src={`${src}`}/>

But, is there a reason why you're not just doing <FullScreenImage src={src}/>?

React Native - Invalid prop source passed to Image

1 Answers