CODEWITHSUNDEEP
reactjsreact-native
hyperN
hyperN

Reputation: 2754

React Native - Invalid prop source passed to Image

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?

Upvotes: 1

Views: 1335

Answers (1)

Matt Aft
Matt Aft

Reputation: 8936

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}/>?

Upvotes: 2

Related Questions