React Native - Image Require Module using Dynamic Names

RELEVANT IF YOU HAVE KNOWN IMAGES (URLS):

The way I hacked my way through this problem:

I created a file with an object that stored the image and the name of the image:

export const ANIMAL_IMAGES = { dog: { imgName: 'Dog', uri: require('path/to/local/image') }, cat: { imgName: 'Cat on a Boat', uri: require('path/to/local/image') } } 

Then I imported the object into the component where I want to use it and just do my conditional rendering like so:

import { ANIMAL_IMAGES } from 'path/to/images/object'; let imgSource = null; if (condition === 'cat') { imgSource = ANIMAL_IMAGES.cat.uri; } <Image source={imgSource} /> 

I know it is not the most efficient way but it is definitely a workaround.

Hope it helps!

I made a custom image component which takes in a boolean to check if the image is from web or is being passed from a local folder.

// In index.ios.js after importing the component <CustomImage fromWeb={false} imageName={require('./images/logo.png')}/> // In CustomImage.js which is my image component <Image style={styles.image} source={this.props.imageName} /> 

If you see the code, instead of using one of these:

// NOTE: Neither of these will work source={require('../images/'+imageName)} var imageName = require('../images/'+imageName) 

I'm just sending the entire require('./images/logo.png') as a prop. It works!

If you're looking for a way to create a list by looping through a JSON array of your images and descriptions for example, this will work for you.

1. Create a file (to hold our JSON database) e.g ProfilesDB.js:

const Profiles = [ { id: '1', name: 'Peter Parker', src: require('../images/user1.png'), age: '70', }, { id: '2', name: 'Barack Obama', src: require('../images/user2.png'), age: '19', }, { id: '3', name: 'Hilary Clinton', src: require('../images/user3.png'), age: '50', }, ]; export default Profiles;

2. Then import the data in our component and loop through the list using a FlatList:

import Profiles from './ProfilesDB.js'; <FlatList data={Profiles} keyExtractor={(item, index) => item.id} renderItem={({item}) => ( <View> <Image source={item.src} /> <Text>{item.name}</Text> </View> )} />

As the React Native Documentation says, all your images sources needs to be loaded before compiling your bundle

So another way you can use dynamic images it's using a switch statement. Let's say you want to display a different avatar for a different character, you can do something like this:

class App extends Component { state = { avatar: "" } get avatarImage() { switch (this.state.avatar) { case "spiderman": return require('./spiderman.png'); case "batman": return require('./batman.png'); case "hulk": return require('./hulk.png'); default: return require('./no-image.png'); } } render() { return <Image source={this.avatarImage} /> } } 

Check the snack: https://snack.expo.io/@abranhe/dynamic-images

Also, remember if your image it's online you don't have any problems, you can do:

let superhero = "spiderman"; <Image source={{ uri: `https://some-website.online/${superhero}.png` }} /> 

First, create a file with image required - React native images must be loaded this way.

assets/index.js

export const friendsandfoe = require('./friends-and-foe.png'); export const lifeanddeath = require('./life-and-death.png'); export const homeandgarden = require('./home-and-garden.png'); 

Now import all your assets

App.js

import * as All from '../../assets'; 

You can now use your image as an interpolated value where imageValue (coming in from backend) is the same as named local file ie: 'homeandgarden':

<Image style={styles.image} source={All[`${imageValue}`]}></Image> 

Important Part here: We cannot concat the image name inside the require like [require('item'+vairable+'.png')]

Step 1: We create a ImageCollection.js file with the following collection of image properties

ImageCollection.js ================================ export default images={ "1": require("./item1.png"), "2": require("./item2.png"), "3": require("./item3.png"), "4": require("./item4.png"), "5": require("./item5.png") } 

Step 2: Import image in your app and manipulate as necessary

class ListRepoApp extends Component { renderItem = ({item }) => ( <View style={styles.item}> <Text>Item number :{item}</Text> <Image source={Images[item]}/> </View> ); render () { const data = ["1","2","3","4","5"] return ( <FlatList data={data} renderItem={this.renderItem}/> ) } } export default ListRepoApp; 

If you want a detailed explanation you could follow the link below Visit https://www.thelearninguy.com/react-native-require-image-using-dynamic-names

Courtesy : https://www.thelearninguy.com

You can use:

<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} /> 

to show image.

From:

https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

import React, { Component } from 'react'; import { Image } from 'react-native'; class Images extends Component { constructor(props) { super(props); this.state = { images: { './assets/RetailerLogo/1.jpg': require('../../../assets/RetailerLogo/1.jpg'), './assets/RetailerLogo/2.jpg': require('../../../assets/RetailerLogo/2.jpg'), './assets/RetailerLogo/3.jpg': require('../../../assets/RetailerLogo/3.jpg') } } } render() { const { images } = this.state return ( <View> <Image resizeMode="contain" source={ images['assets/RetailerLogo/1.jpg'] } style={styles.itemImg} /> </View> )} } 

To dynamic image using require

this.state={ //defualt image newimage: require('../../../src/assets/group/kids_room3.png'), randomImages=[ { image:require('../../../src/assets/group/kids_room1.png') }, { image:require('../../../src/assets/group/kids_room2.png') } , { image:require('../../../src/assets/group/kids_room3.png') } ] } 

when press the button-(i select image random number betwenn 0-2))

let setImage=>(){ //set new dynamic image this.setState({newimage:this.state.randomImages[Math.floor(Math.random() * 3)]; }) } 

view

<Image style={{ width: 30, height: 30 ,zIndex: 500 }} source={this.state.newimage} /> 

Say if you have an application that has similar functionality as that of mine. Where your app is mostly offline and you want to render the Images one after the other. Then below is the approach that worked for me in React Native version 0.60.

1. First create a folder named Resources/Images and place all your images there.
2. Now create a file named Index.js (at Resources/Images) which is responsible for Indexing all the images in the Resources/Images folder.

const Images = { 'image1': require('./1.png'), 'image2': require('./2.png'), 'image3': require('./3.png') }

3. Now create a Component named ImageView in your choice of folder. One can create functional, class or constant component. I have used the Const component. This file is responsible for returning the Image depending on the Index.

import React from 'react'; import { Image, Dimensions } from 'react-native'; import Images from './Index'; const ImageView = ({ index }) => { return ( <Image source={Images['image' + index]} /> ) } export default ImageView; 

4. Now from the component wherever you want to render the Static Images dynamically, just use the ImageView component and pass the index.

   < ImageView index={this.qno + 1} />

Here is a simple and truly dynamic solution to the problem if you have a bigger no of files.

-Won't work for Expo Managed

Although the question is old I think this is the simpler solution and might be helpful. But I beg a pardon for any terminological mistakes, correct me please if I do any.

INSTEAD OF USING REQUIRE WE CAN USE THE URI WITH NATIVE APP ASSETS FOR ANDROID (AND/OR iOS). HERE WE WILL DISCUSS ABOUT ANDROID ONLY

URI can easily be manipulated as per the requirement but normally it's used for network/remote assets only but works for local and native assets too. Whereas require can not be used for dynamic file names and dirs

STEPS

1. Open android/app/src/main/assets folder from your App.js or index.js containing directory, if the assets folder doesn't exist create one.
2. Make a folder named images or any NAME of your choice inside assets, and paste all the images there.
3. Create a file named react-native.config.js in the main app folder containing App.js or index.js.
4. Add these lines to the new js file:

 module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/YOUR_FOLDER_NAME/'], }; 

at the place of YOUR_FOLDER_NAME use the newly created folder's name images or any given NAME

5. Now run npx react-native link in your terminal from main app folder, this will link/add the assets folder in the android bundle. Then rebuild the debug app.
6. From now on you can access all the files from inside android/app/src/main/assets in your react-native app. For example:

<Image style={styles.ImageStyle} source={{ uri: 'asset:/YOUR_FOLDER_NAME/img' + Math.floor(Math.random() * 100) + '.png' }} /> 

StyledInput component name image inside the StyledInput:

 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput> <Image source={this.props.imgUri} style={{ height: 30, width: 30, resizeMode: 'contain', }} /> 

The docs allow for a uri: 'Network Image'

https://facebook.github.io/react-native/docs/images#network-images

For me I got images working dynamically with this

<Image source={{uri: image}} /> 

Create a constant where you save the image path including require, then in source put the name of that constant.

const image = condition ? require("../img/image1.png") : require('../img/image2.png'); <Image source={image} /> 

Use a thumb rule. One require for every image.

So if you want to dynamically load 20 images, make sure you have written require keyword 20 times explicitely.

You should use an object for that.

For example, let's say that I've made an AJAX request to an API and it returns an image link that I'll save to state as imageLink:

source={{uri: this.state.imageLink}}