How do I pass an image in dynamically in react native?

Question

I have the following code:

let fileIcon = props.type == DOCUMENT_TYPE.Project ? "024-folder-16" : "file";
let concatString = '../assets/images/'.concat(fileIcon, 'png');

and I'm trying to use the value "concatString" later on:

let fileIcon = props.type == DOCUMENT_TYPE.Project ? "024-folder-16" : "file";
let concatString = '../assets/images/'.concat(fileIcon, 'png');

const renderChapterItem = chapterData => {
    return (
        <TouchableOpacity 
            style={styles.gridItem} 
            onPress={() => { 
                props.navigation.navigate("Document", {text: chapterData.item[1]})
            }}
        >
            <Image
                style={styles.image}
                source={require(concatString)}/>
    )
}

However, I keep getting an error

Invalid call at line 21: require(concatString)

Why are you using require? Where in your code do you do the image source logic and where is the Image tag? — tomerpacific
– tomerpacific, Commented Feb 10, 2020 at 9:50
just use concatString variable without require if it is located within the same file. Might need to add this as a prefix. — tomerpacific
– tomerpacific, Commented Feb 10, 2020 at 9:55
I removed "require" and I'm not getting the error anymore but now no image is loading — klippy
– klippy, Commented Feb 10, 2020 at 9:57

Kailash · Accepted Answer · 2020-03-18 05:43:53Z

1

let concatString = '../assets/images/'.concat(fileIcon, '.png'); Replace your concatString with the above given variable. You haven't added "." before the extention "png".

Another option:

Import both your images separately, and use them rather require statement. like :

import img1 from '../../{YOUR_IMAGE_NAME_WITH_EXTENTION}';

import img2 from '../../{YOUR_IMAGE_NAME_WITH_EXTENTION}';


let img = (condition)? img1 : img2;


            <Image
                style={styles.image}
                source={img}/>

edited Mar 18, 2020 at 5:43

answered Feb 10, 2020 at 10:03

Kailash

8976 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How do I pass an image in dynamically in react native?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related