Image require() with a dynamic String in react native

Question

I am trying to display an image on my app based on the image name string retrieved, but image did not show see my code below.

const Viewers = () => {
  return (
            <FlatList 
                data = {profileData} 
                keyExtractor={item => item.id} 
                renderItem={({item}) => {
                    return (
                        <View>
                                <Image 
                                    source={require("../assets/pix/" + item.user_image)}
                                    style={{
                                        width: 35,
                                        height: 35
}}
                                />
                        </View>                                                
                        )
                }}
            />
  );
};

I also tried this also source={{uri: '../assets/pix/'+item.user_image}} no result.

Thanks for the help

Does this answer your question? [React Native - Image Require Module using Dynamic Names](https://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names) — Charlie, Jun 24 '22 at 17:14
You cannot use `require` with dynamic values.. You need to predefine all assets in enum constants and then dynamically call that enum types. — iphonic, Jun 24 '22 at 17:28
@iphonic can you explain this by showing it in my code, cause where and how will I put `item.user_image` which is the name of image. — delle, Jun 24 '22 at 17:48

score 0 · Answer 1 · answered Jun 24 '22 at 18:30

For the solution, you will need to change your assets structure a bit. Since all the assets are already available to you and you know their name already.

You may go and set up set of images rendered by a dynamic key which is item.user_image in your case.

See code here

import * as React from 'react';
import { View, Image,FlatList } from 'react-native';

const images = {
    user1: require('./assets/1.jpeg'),
    user2: require('./assets/2.jpeg')
};

const profileData=[
  {id:1,user_image:'user1'},
  {id:2,user_image:'user2'}
]

export default function App() {
  return (
    <View>
      <FlatList 
        data = {profileData} 
        keyExtractor={item => item.id} 
        renderItem={({item}) => {
            return (
                <View style={{padding:10}}>
                        <Image 
                            source={images[item.user_image]}
                            style={{
                                width: 35,
                                height: 35
                                }}
                        />
                </View>                                                
                )
          }}
        />
    </View>
  );
}

Working demo

Note - This demo just gives an idea of how it can be done, you need to come up with a solution that suits your case.

Cheers.

Image require() with a dynamic String in react native

1 Answers1