Error passing required() Image as a prop - image

Question

I have a file called data.js where I export an object, which one of its elements is an Image. This is how it looks:
var data = [
{
"id": 1,
"Category": "Category Title",
"Image": require("../images/comingsoon.png"),
"Summary": ""
},
And then in another component I import the data variable and I pass the data.Image to another component as a prop using FlatList.
<FlatList
style={{margin:5}}
numColumns={2}
data={this.state.data}
renderItem={({item}) => item}
/>
item looks like this:
<CategoryItem key={item.id} Image={item.Image} Category={item.Category}/>
And then I use the Image prop inside CategoryItem like so:
<Image source={this.props.item.Image} style={styles.CategoryImage}>
And this works perfectly!...
But I wanted to simply pass Item as a prop to CategoryItem like so:
<CategoryItem key={item.id} item={item}/>
And once inside CategoryItem, I would do:
render(){
const {Category, Image} = this.props.item;
And call the Image simply by doing
<Image source={Image} style={styles.CategoryImage}>
However, when I do that, the app crashes and it says that Image is a number.
After logging what item looks like, I found out that require()ing turns the image into a number, and it should work by simply passing it differently, it crashes. Any thoughts?

Answer 1

The issue is that the local variable Image is shadowing the component named Image.
Your code, simplified, might look something like this:
import { Image } from 'react-native';
class CategoryItem extends React.Component {
render() {
const { Category, Image } = this.props;
return <Image source={Image} />
}
}
Instead of the <Image /> declaration referring to the component as you'd expect, it refers to the Image prop.
This is easy to fix by renaming the variable:
class CategoryItem extends React.Component {
render() {
const { Category, Image: imageSource } = this.props;
return <Image source={imageSource} />
}
}
The reason the error tells you the component is a number is a implementation detail of how the React Native asset imports work. When you import an image with require('path.jpg'), React Native assigns that image a unique numeric ID and returns that instead of a image path descriptor. This is beneficial for performance reasons, so instead of passing a descriptor over the native-javascript bridge for each render, it can pass over a number, which are cheaper to serialize and to marshall.
As a side note, it's a common React practice to declare your component props in lowerCamelCase, so instead of <CategoryItem Image={} /> you would have <CategoryItem image={} />. This is just a convention, but in this case it would have avoided this error.