Show local images in React-Native NativeBase

Question

It works if I show the image like this:

<Thumbnail source= {require('../images/01.jpg')} />

But fails on :

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />

person.id comes from an array of people. Printing it in <Text>{person.id}</Text> gives the output as 01 or 02.

How to show a local image with the name as the prop.value?

I tried:

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />

and

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />

Both fails with error : Unnamed named module: '../images/1.jpg'

Is that image that you are trying to require available before packaging an application? I mean like when that image is for example set by user at runtime, then require won't work and you need to use . Check this discussion here: https://github.com/facebook/react-native/issues/6391. — Patrik Prevuznak, Sep 02 '17 at 15:56
All the images are already in the images folder and i repacked the app a few times — Somename, Sep 02 '17 at 17:27

score 15 · Accepted Answer · answered Sep 02 '17 at 19:10

What you are trying to achieve is not really possible.

Packaging happens once before runtime so the variable person.id doesn't have value yet.

This has already been discussed here.

In the discussion you can see solutions to this problem.

Basically you need to import all possible files you are going to use.

Simple approach:

var firstImage = require('../images/01.jpg');
var secondImage =  require('../images/02.jpg');  
var myComponent = (whichImageToUse) ? firstComponent : secondComponent;

Sophisticated approach: Create a file which requires all images.

allImages.js

export default {
    '01': require('../images/01.jpg'),
    '02': require('../images/02.jpg'),
    // import all other images
}

Import that file where you need to use an image and access the individual image like this:

import images from '../images/allImages'
<Thumbnail source={images[person.id]} />

Thank you. I wanted this for testing. Works like a charm. Many thanks! — Somename, Sep 09 '17 at 14:47

Cesar William Alvarenga · Answer 2 · 2017-09-01T20:59:57.683

2

It will work if you remove the curly brackets from person.id:

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />

Like this:

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />

or this (using es6 template literals):

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />

edited Sep 01 '17 at 20:59

answered Sep 01 '17 at 20:49

Cesar William Alvarenga

475
3
9

Thanks. For both I get an error: Error: Unnamed named module: '../images/1.jpg' Edited the question and added the error. – Somename Sep 02 '17 at 09:13

Supriya Kalghatgi · Answer 3 · 2017-09-06T11:51:42.620

1

Replacing component of NativeBase Thumbnail is React-Native's Image.

If you achieve this with React Native Image and not with NativeBase Thumbnail then thats an issue with NativeBase.

This issue has already been discussed in the issues of React Native

#2481, #6391, #10290

edited Sep 06 '17 at 11:51

answered Sep 04 '17 at 08:16

Supriya Kalghatgi

1,155
9
10

Thank you @Supriya .. I followed Patrick's suggestion and it works. – Somename Sep 09 '17 at 15:06

Show local images in React-Native NativeBase

3 Answers3