RN FlatList loop variables

Question

React Native FlatList works wrong with loop variables

    renderItem = ({ item, i }) => {
    let imgName = item[0].image ? item[0].image : 'bekleidung_fo.png';
    let imgPath = require(`../../Images/category_images/${item[0].id}/${imgName}`);
    console.log(`../../Images/category_images/${item[0].id}/${imgName}`);
    return (
        <View key={i} style={styles.itemContainer}>
            <TouchableOpacity
                activeOpacity={.9}
                onPress={() => this.openCategory(item)}
            >
                <ImageBackground
                    source={imgPath}
                    style={styles.image}
                    resizeMode='contain'
                >
                    <View style={styles.textContainer}>
                        <Text style={{textAlign:'center'}} numberOfLines={4}>
                            {item[0].title}
                        </Text>
                    </View>
                </ImageBackground>
            </TouchableOpacity>
        </View>
    )

}

render() {
    let {data} = this.state;
    return (
        <View style={styles.mainContainer}>
            <FlatList
                contentContainerStyle={styles.container}
                data={data}
                keyExtractor={(item, index) => index}
                numColumns={4}
                getItemLayout={(data, index) => (
                    {length: width * .5, offset: width * .2 * index, index}
                )}
                removeClippedSubviews
                columnWrapperStyle={{width:width * .2}}
                renderItem={this.renderItem}
            />
            <View style={styles.bottomBox}/>
        </View>

    )
}

*into data i have an objects which have a id,title,image(not all)...... i am trying get each item ID and IMAGE name from this object and make the PATH for my local images and show it into the ImageBackground component into the FlatList (because its dosn't give me remote URI or something else for image) , but i am getting the compilation error on Android and Syntax :) error on IOS and its all about a ES6 templates string syntax ../../Images/category_images/${item[0].id}/${imgName} *

for my opinion maybe it related with render

Yes you are right.The thing is you cannot dynamically require a static asset,the full path name must be known.Here is link to other person's answer.Try it out https://stackoverflow.com/a/42245762/7364894 — Thakur Karthik, Sep 21 '19 at 11:53

Aurangzaib Rana · Accepted Answer · 2019-09-23T06:43:36.393

Dynamic paths in require are not currently supported

The only allowed way to refer to an image in the bundle is to literally write require('asset') in the source.

You can use a switch statement to implement this.

setParh(imageTitle) {
  switch (imageTitle) {
    case 'spiderman':
      return require('../../Images/category_images/spiderman.png');
    case 'superman':
      return require('../../Images/category_images/superman.png');
    case 'catWoman':
      return require('../../Images/category_images/catWoman.png');
  }
}

renderItem = ({ item }) => {
    return (
        <Image
             source={this.setParh(item.imageTitle)}
             style={[styles.image,
             resizeMode='contain'
        >
         {item[0].title}
        </Image>
    )

};

RN FlatList loop variables

1 Answers1