React Native - Image Require Module using Dynamic Names

Question

I m currently building a test app using React Native  The Image module  thus far has been working fine   For example  if I had an image named avatar  the below code snippet works fine    lt Image source  require  image avatar      gt    But but if I change it to a dynamic string  I get   lt Image source  require  image      avatar      gt    I get the error     Requiring unknown module  image avatar   If you are sure the module is there  try restarting the packager    Obviously this is a contrived example  but dynamic image names are important  Does React Native not support dynamic image names

User · Answer

Say if you have an application which 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.

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

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

Now create a Component named ImageView at your choice of folder. One can create functional, class or constant component. I have used 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;

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} />

User · Answer

you can use   lt Image source   uri   imagename    style   width  40  height  40     gt    to show image   from   https   facebook github io react-native docs images html images-from-hybrid-app-s-resources

User · Answer

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  lt Image source  this avatarImage    gt          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     lt Image source    uri   https   some-website online   superhero  png       gt

User · Answer

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          lt View gt           lt Image                             resizeMode  contain                              source   images  assets RetailerLogo 1 jpg                                 style  styles itemImg                            gt        lt  View gt

User · Answer

This is covered in the documentation under the section  Static Resources       The only allowed way to refer to an image in the bundle is to literally write require  image name-of-the-asset   in the source       GOOD  lt Image source  require  image my-icon      gt      BAD var icon   this props active    my-icon-active     my-icon-inactive    lt Image source  require  image     icon     gt      GOOD var icon   this props active   require  image my-icon-active     require  image my-icon-inactive     lt Image source  icon    gt    However you also need to remember to add your images to an xcassets bundle in your app in Xcode  though it seems from your comment you ve done that already   http   facebook github io react-native docs image html adding-static-resources-to-your-app-using-images-xcassets

User · Answer

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    Create a file  to hold our JSON database  e g ProfilesDB js     x000D   x000D  const Profiles   x000D       x000D      id     1   x000D      name     Peter Parker   x000D      src    require     images user1 png    x000D      age   70   x000D      x000D     x000D    id     2   x000D    name     Barack Obama   x000D    src    require     images user2 png    x000D    age   19   x000D      x000D     x000D    id     3   x000D    name     Hilary Clinton   x000D    src    require     images user3 png    x000D    age   50   x000D     x000D    x000D  export default Profiles  x000D   x000D   x000D     Then import the data in our component and loop through the list using a FlatList     x000D   x000D  import Profiles from    ProfilesDB js   x000D   x000D   lt FlatList x000D    data  Profiles  x000D    keyExtractor   item  index    gt  item id  x000D    renderItem    item     gt    x000D       lt View gt  x000D         lt Image source  item src    gt  x000D         lt Text gt  item name  lt  Text gt  x000D       lt  View gt  x000D       x000D    gt  x000D   x000D   x000D    Good luck

User · Answer

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      gt             lt View style  styles item  gt               lt Text gt Item number   item  lt  Text gt               lt Image source  Images item    gt           lt  View gt              render              const data     1   2   3   4   5           return                lt FlatList data  data  renderItem  this renderItem   gt                     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

User · Answer

This worked for me    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  lt CustomImage fromWeb  false  imageName  require    images logo png     gt      In CustomImage js which is my image component  lt Image style  styles image  source  this props imageName    gt    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

User · Answer

I know this is old but I m going to add this here as I ve found this question  whilst searching for a solution   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   lt Image source   uri  image     gt

User · Answer

lt StyledInput text  NAME  imgUri  require     assets userIcon png     gt  lt  StyledInput gt     lt Image             source  this props imgUri              style                  height  30                width  30                resizeMode   contain                              gt       in my case i tried so much but finally it work  StyledInput component name image inside the StyledInput if you still not understand let me know

User · Answer

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

User · Answer

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   const images       dog        imgName   Dog        uri  require  path to local image          cat        imgName   Cat on a Boat        uri  require  path to local image          export   images      Then I imported the object into the component where I want to use it and just do my conditional rendering like so   import   images   from  relative path    if  cond      cat       let imgSource   images cat uri      lt Image source  imgSource    gt    I know it is not the most efficient way but it is definitely a workaround   Hope it helps

User · Answer

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     lt Image style  styles image  source  All    imageValue     gt  lt  Image gt

User · Answer

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  gt       set new dynamic image  this setState  newimage this state randomImages Math floor Math random     3          view  lt Image         style     width  30  height  30  zIndex  500                     source  this state newimage          gt

[javascript] React Native - Image Require Module using Dynamic Names

Examples related to javascript

Examples related to react-native

Examples related to jsx