Unable to display dynamic images

[jnoweb]

I was trying to display dynamic images on the ListTemplate but it is not working. I have gone through the documentation but I can't find anything relating to this. Is it currently possible to perform such action? And if yes, how?

Thanks!

[birkir]

What do you mean by dynamic images? Like images as URLs?

[martinthedinov]

@jnoweb Maybe you are hitting a common ReactNative bundler issue, rather than with this library. If you mean dynamic sources being used in images, RN doesn't allow this - see facebook/react-native#2481 . One way around this is to generate different static image paths in a method, and use this method where you want a 'dynamic image', like:

function getDynamicImage(somethingToCompare: string) {
      const image1 = require('../images/image1.jpg');
      const image2 = require('../images/image2.jpg');
  
      switch (somethingToCompare) {
        case "case1":
          return image1;
        case "case2":
          return image2;
      }
    }

[tomdye]

@jnoweb I came across some strange quirks when working on this, for example, png files only appear to work if they're post fixed with @3x and all list item images seem to need to be around 80 x 80 px.

[birkir]

Good find, let’s add it to the docs!

[harrymash2006]

@birkir the https images are not loading in ListItem, any clue?:

I am adding this like this:

const podcastItems: ListItem[] = [
{ text: 'Podcast 1', detailText: 'Podcast 1 description', image: { uri: 'https://commondatastorage.googleapis.com/codeskulptor-assets/week5-triangle2.png'}},
{ text: 'Podcast 2', detailText: 'Podcast 2 description', image: require('../images/IHXoEES.png') },

]