React Native: require() with Dynamic String?

Question

I have read several posts about issues that people are having with React Native and the require() function when trying to require a dynamic resource such as:

Dynamic (fails):

urlName = "sampleData.json"; data = require('../' + urlName); 

vs. Static (succeeds):

data = require('../sampleData.json'); 

I have read on some threads that this is a bug in React Native and in others that this is a feature.

Is there a new way to require a dynamic resource within a function?

Related Posts (all fairly old in React time):

• Importing Text from local json file in React native
• React Native - Dynamically List/Require Files In Directory
• React Native - Image Require Module using Dynamic Names
• React Native: how to use require(path) with dynamic urls?

Answer 1

As i have heard of, react's require() only uses static url not variables, that means that you have to do require('/path/file'), take a look at this issue on github and this one for more alternative solutions, there are a couple of other ways to do it! for e.g

const images = { profile: {     profile: require('./profile/profile.png'),     comments: require('./profile/comments.png'), },    image1: require('./image1.jpg'),    image2: require('./image2.jpg'), };  export default images; 

then

import Images from './img/index';  render() {     <Image source={Images.profile.comments} /> } 

from this answer

Answer 2

Here is my solution.

Setup

File structure:

app     |--src     |--assets       |--images         |--logos           |--small_kl_logo.png           |--small_a1_logo.png           |--small_kc_logo.png           |--small_nv_logo.png           |--small_other_logo.png          |--index.js     |--SearchableList.js 

In index.js, I have this:

const images = {   logos: {     kl: require('./logos/small_kl_logo.png'),     a1: require('./logos/small_a1_logo.png'),     kc: require('./logos/small_kc_logo.png'),     nv: require('./logos/small_nv_logo.png'),     other: require('./logos/small_other_logo.png'),   } };  export default images; 

In my SearchableList.js component, I then imported the Images component like this:

import Images from './assets/images'; 

I then created a new function imageSelect in my component:

imageSelect = network => {   if (network === null) {     return Images.logos.other;   }    const networkArray = {     'KL': Images.logos.kl,     'A1': Images.logos.a1,     'KC': Images.logos.kc,     'NV': Images.logos.nv,     'Other': Images.logos.other,   };    return networkArray[network]; }; 

Then in my components render function I call this new imageSelect function to dynamically assign the desired Image based on the value in the this.state.network:

render() {   <Image source={this.imageSelect(this.state.network)} /> } 

The value passed into the imageSelect function could be any dynamic string. I just chose to have it set in the state first and then passed in.

I hope this answer helps. :)