React native require with backticks

Question

I'm implementing an app and on the homescreen I have a flatlist element with inside for each item a card element.

import React, { useEffect, useContext } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import {ListItem, Card} from 'react-native-elements';

import { Context as ParkingContext } from '../context/ParkingContext';

const HomeScreen = () => {
    const { state: {records}, fetchParkings } = useContext(ParkingContext);

    useEffect(() => {
        fetchParkings();
    },[])

    return (
        <View style={styles.container}>
            <FlatList 
                data={records}
                keyExtractor={item => item.recordid}
                renderItem={({item}) => {
                    return (
                        <Card containerStyle={styles.cardStyle} title={item.fields.description}>
                            <Text style={styles.textStyle}>{item.fields.address.replace(/\n/g,'')}</Text>
                            <Text style={styles.textStyle}>Aantal vrije plaatsen: {item.fields.availablecapacity}</Text>
                        </Card>
                    )
                }}
            />
        </View>
    )
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 25
    },
    cardStyle: {
        padding: 0,
        borderRadius: 10
    },
    textStyle: {
        flexDirection: 'row',
        flex: 1,
        marginBottom: 10,
        marginLeft: 5
    }
});

export default HomeScreen;

The card element has a property image which can be used to set a image to the card. I want to give different images to the cards by doing

image={require(`../../assets/${item.fields.description}.jpg`)}

but require doesn't let me do this with backticks and neither with a variable... is there some way to use backticks or a variable so I can have different photo's for the different cards?

My apologies if the answer is obvious but I tried a lot of things and it does not work.

There are different options on an existing SO post that seem to give an answer to your dilemma: https://stackoverflow.com/a/43821056/1188197. And this blog post (https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths) which is also referenced in the SO post summarizes how to use relative paths within a require function. In short, you cannot use variables in place of a literal string, ...and require statements are resolved at bundle time. Instead, you can define your static assets the way they have in the SO links I've shared. — EspressoBeans, Aug 26 '20 at 20:03

score 1 · Answer 1 · answered Aug 26 '20 at 18:29

Assuming you created your react app with create-react-app or you are using webpack to bundle your code then what you are trying to achieve will not work: Since Webpack is running in build-time, it can't figure out which modules to bundle when the name is a dynamic variable. Packaging happens once before runtime so those variables don't have values yet.

If you have a small number of images, you can do something like this:

let image1 = require('../../assets/xxx.jpg');
let image2 = require('../../assets/xxx.jpg');
...
image={image1}
...

But of course, if you have a long list of images this way will not be optimal

Further details can be found in the discussion of this issue

React native require with backticks

1 Answers1