Dynamically load Images in React Native

react native image
dynamic image rendering react native
react native image source variable
react native image loading
react load image dynamically
react native image uri local
react native local image not showing
react native image fallback

Semi-new to React Native and i'm having an issue...

I'm trying to require local images based on a variable (an ID stored in a JSON file), I can achieve this if I stored the images online somewhere and used the prop: source:{uri: 'https://www.domian.com'+this.props.model.id'.png'} for example, but obviously require needs just a single string so I can't pass it a variable?

I would just use a lengthy for each/if statement but there will be 100+ options for the image name. Which is another reason i'd rather have the images stored locally.

I've been trying a bunch of different ways but haven't found anything, is there any way around this?

The following works for me:

// our data
// we need to require all images, 
// so that React Native knows about them statically
const items = [
    {
        id: '001',
        image: require('../images/001.jpeg'),
    },
    {
        id: '002',
        image: require('../images/002.jpeg'),
    },
];

// render
items.map( (item) => 
    <Image key={item.id} source={item.image} />
)

NB: This is based on @soutot's updated answer, but simplified. I don't think there is any need for a boolean.

React Native Dynamic Images, Depending on the number of images that you are expecting you could try placing an images.js file in your assets/images folder and require  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:

According to the official docs, the recommendation is using conditional rendering to create the Image require which contains the correct URI path:

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

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

More about conditional rendering: https://reactjs.org/docs/conditional-rendering.html

Example using array (just example, may have typos):

const imgs = [
  {
   id: '001',
   require: require('../images/001.jpeg'),
  },
  {
   id: '002',
   require: require('../images/002.jpeg'),
  },
];

imgs.map((item, i) => 
item.id === '001' &&
<Image
  key={i}
  source={item.require}
/>)

Hope it helps

Dynamic imports in React-Native - DEV, Have you ever tried to do this in a React-Native app? <Image source={require("./​images/  You can include the folder of images by creating a new context with require.context(). From there, you can dynamically access the image you want from that folder, and set it as a src. Going off of a structure like this:

AS per your comment and example you mentioned it is like : imageId is JSON and your passing it using props. Is your baseurl same ? then you can achive single string like :

source:{uri: `https://www.domian.com/${this.props.model.id}.png`}

I hope this will work for you : here is example in which I receive part of url to images from different resources, similar to yours:

https://github.com/patilrevansidh/movidb/blob/master/src/modules/movie/detail/screen.js

Load Images dynamically from state · Issue #3799 · facebook/react , Hi everybody, I have an issue where I try to change the image source facebook / react-native Load Images dynamically from state #3799. React Native Change Image Source Dynamically using State on Button Click The Image component has ability to programmatically rendering image at application runtime, This functionality is know as Dynamic image rendering. Now developer can dynamically change the Image URL from a specific function using State.

facebook/react-native, React native does not support dynamic path names in the image require… … 357053c How to dynamically load PDF source #52. Closed. Static Image Resources. React Native provides a unified way of managing images and other media assets in your Android and iOS apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this: < Image source = {require ('./my-icon.png')} /> The image name is resolved the same way JS modules are

Dynamic loading of locally stored images with react native, Problem with dynamic loading of image resources within a loop/list. I have all my static local resources required as such: assets/images.js const images  A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. This example shows fetching and displaying an image from local storage as well as one from network and even from data provided in the 'data:' uri scheme.

React Native Change Image Source Dynamically using State on , This State holds a Image URL this is the first image which would display before loading the other image. React Native offers a way to optimize images for different devices using @2x, @3x suffix. The app will load only the image necessary for particular screen density. The following will be the names of the image inside the img folder. my-image@2x.jpg my-image@3x.jpg

Comments
  • Ah this is the issue, it's not a case of a boolean dictating which image is required, it's a case of the ID in the JSON file will be a string such as 'badge-001' and the image that needs to be loaded will have a file name such as 'badge-001.png'. So I need to be able to do something similar to './images/'+this.props.model.id'+'.png'
  • As far as I know, the case you want to achieve is not possible, since react native needs to know the bundle previously. You can, however, have an array containing all possible images to render and use them conditionally
  • I added an example with the idea of using an array. Hope it helps