Setting source of <Image/> with variable

Question

I am trying some react native code which is as follows , I want to set the static images to an image view as follows but it doesn't load

const items = [
            { name: './images/home.png', code: '#1abc9c' }, { name: './images/home.png', code: '#2ecc71' },
            { name: './images/home.png', code: '#3498db' }, { name: './images/home.png', code: '#9b59b6' }
        ];

        return (
            <ImageBackground
                source={require('./images/marble.jpg')}
                style={styles.backgroundImage}>

                <GridView
                    itemDimension={130}
                    items={items}
                    style={styles.gridView}
                    renderItem={item => (
                        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
                            <Image source={require(item.name)}></Image>
                        </View>
                    )}
                />

            </ImageBackground>
        );

Error I get is

calls to require expect exactly 1 string literal argument, but this was found: require(item.name).

Ofcourse I am new to react native so kindly ignore my missed terminology

Possible duplicate of react native use variable for image file — jmargolisvt
– jmargolisvt, Commented Mar 6, 2018 at 19:22
Possible duplicate of React Native - Image Require Module using Dynamic Names — sleighty
– sleighty, Commented Mar 6, 2018 at 21:01

erkan · Accepted Answer · 2018-03-06 19:46:17Z

2

You try like this

const items = [{ name: require('./images/home.png'), code: '#1abc9c' },{...}]

then

<Image source={item.name}></Image>

answered Mar 6, 2018 at 19:46

erkan

2421 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sleighty Over a year ago

Also keep in mind that the convention in RN is to use self-closing tags for images, like <Image ... />

Collectives™ on Stack Overflow

Setting source of <Image/> with variable

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related