React Native: Image using prop as source leads to error

0
votes

I am building a react native application and am trying to set the source of an image based on the contents that I am passing to the component as a prop. My code is as follows:

const nameOfComponent = props => {
    return (
        <View style={some style}>
            <Image source={require(props.imageURL)} style={some style} />
        </View>
    )
}

The prop imageURL is being passed down from the parent component by: <nameOfComponent imageURL="../dir/name.png" />

When including the code above in my project, I am met with an error saying "Invalid call at line 15: require(props.imageURL)".

Why is this happening? Thanks!

1
javascriptreact-native
did u verify the require("../dir/name.png") – xdeepakv
Yes, it works correctly with a string value instead of props.imageURL – Questions123

1 Answers

0
votes

According to React-Native, all your image sources need to be loaded before compiling your bundle. So change your code as,

const nameOfComponent = props => (
    <View style={{ some_style }}>
        <Image source={props.imageURL} style={{ some_style }} />
    </View >
)

Call your child component as,

<nameOfComponent imageURL={require('imagepath')} />

Hope this helps you. Feel free for doubts.