Question

184

React-native failed propType on Image component

rated 0 times [ 185] [ 1] / answers: 1 / hits: 66384 / 8 Years ago, wed, april 6, 2016, 12:00:00

I am just starting out with React-native and have a pretty decent grasp on React for creating web apps... I am running into a confusing issue here that never occured when working with react for the web.

Basically I am rendering a component whose image is being dynamically generated by mapping over an array of objects in its parent component.

export default class ImageComponent extends React.Component {

  render() {

    return (

        <Image source={this.props.source}/>

    );

  }

};

And its parent component:

export default class MainComponent extends React.Component {

  constructor(props) {

    super(props);

   this.state = {

      images:[

        { src: './src/images/1.png'},

        { src: '/src/images/2.png'},

        { src: './src/images/3.png'}

      ]

    }

   }



  render() {

    let images = this.state.images.map((image) => {

      return(<ImageComponent source={image.src}  />);

    })



    return (

      <View>

        {images}

      </View>

    );

  }

};

In device simulator I am getting the following error:

Warning: Failed propType:Invalid prop 'source' supplied to 'Image' check the render method of 'BasicComponent'

Does anyone know what could be going on here?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cruzs

Add To Favorites

Follow

Total Points: 710

Total Questions: 113

Total Answers: 100

Location: Nepal

Member since Sat, Jul 18, 2020

4 Years ago

cruzs questions

1 How do I use JavaScript fetch in Laravel 8?

Thu, Nov 26, 20, 00:00, 4 Years ago

1 Print PDF from BLOB

Wed, Oct 28, 20, 00:00, 4 Years ago

1 Best practice for Next.js data fetching inside a component

Wed, Aug 19, 20, 00:00, 4 Years ago

1 Not getting form data in req.body Express/node.js

Sun, Aug 2, 20, 00:00, 4 Years ago

1 React Router history.goBack doesn't work when using < Redirect />

Sun, Jul 12, 20, 00:00, 4 Years ago

View All

answered 8 Years ago bradenc · Accepted Answer

You should either require the local assets or use object with uri key.

So either in MainComponent:

this.state = {

  images:[

    require('./src/images/1.png'),

    require('./src/images/2.png'),

    require('./src/images/3.png')

  ]

}

or in BasicComponent:

return (

  <Image 

    source={{uri: this.props.source}}

  />

);