0

I've got an environment file.

Like the title says, I want to build the path for my images based on the config setup, like so :

const images = {
      logo: require(`./${Config.BRAND}/images/logo_${Config.BRAND}.png`)
    };

Unfortunately, it does not work.

Is there any other way to achieve it ?

JSharles
  • 565
  • 1
  • 5
  • 16
  • 1
    Did you maybe forget the extension? (.png, .jpg, ...) – MauriceNino Oct 27 '21 at 12:49
  • If you use [dotenv](https://www.npmjs.com/package/dotenv) you can achieve this. – Erenn Oct 27 '21 at 12:50
  • Dynamic imports is an anti-pattern https://github.com/import-js/eslint-plugin-import/blob/v2.22.1/docs/rules/no-dynamic-require.md – Ugur Eren Oct 27 '21 at 12:53
  • @enzo in react-native every image is a module (more or less). It's the official way to load local images: https://reactnative.dev/docs/image. – MauriceNino Oct 27 '21 at 12:55
  • 1
    @Erenn How would this solve the problem? I don't see how this has anything to do with JSharles question. – MauriceNino Oct 27 '21 at 12:56
  • @MauriceNino Indeed, I forgot to add the extension in the example, but I've added it in the code. – JSharles Oct 27 '21 at 13:00
  • What is the exact error you are getting? Does the path actually resolve to anything, if you write it as a static string? – MauriceNino Oct 27 '21 at 13:02
  • @MauriceNino Static string works fine. The error I get is : error: assets/index.js: assets/index.js:Invalid call at line 11: require("./" + _reactNativeConfig.default.BRAND + "/images/logo_" + _reactNativeConfig.default.BRAND + ".png") – JSharles Oct 27 '21 at 13:08
  • Did you print the value of `./${Config.BRAND}/images/logo_${Config.BRAND}.png` to the console? Is it correct? – MauriceNino Oct 27 '21 at 13:12
  • Yes, it logs me the correct string. – JSharles Oct 27 '21 at 13:18

2 Answers2

1

You should avoid using dynamic requires as it has bad consequences.

You can use if-else (or simply ternary) or switch statement to get the image you want to use.

const images = {
  logo: Config.BRAND === 'brand1' ? require(`./brand1/images/logo_brand1.png`) : require(`./brand2/images/logo_brand2.png`);
};
MauriceNino
  • 6,214
  • 1
  • 23
  • 60
Ugur Eren
  • 1,968
  • 2
  • 11
  • 21
  • Indeed, this method works fine but the dynamic require would reduce a lot the amount of code. – JSharles Oct 27 '21 at 13:10
  • I don't think this applies here. Static code analysis is generally not done on images. I would say you can ignore/disable this eslint rule at that position. – MauriceNino Oct 27 '21 at 13:11
  • 1
    Most likely images would not be copied to bundle because metro bundler will think those images are not used because of dynamic require. – Ugur Eren Oct 27 '21 at 13:12
  • @MauriceNino actually, metro bundler doesn't copy the unused images to the release build, and dynamic require makes it hard to detect. – Ugur Eren Oct 27 '21 at 13:13
  • It worked for me. Excellent answer.... – Crown716 Oct 27 '21 at 13:13
  • 1
    Safe to say, you are right @UgurEren :) https://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names You should however extend your answer to include the reason why it does not work. – MauriceNino Oct 27 '21 at 13:15
-1

Create a .env file in the root of project. Put dynamic brand there.

BRAND=Your_dynamic_link

install than import dotenv module

require('dotenv').config()

Than you can access that environment

const images = {
  logo: require(`./${process.env.BRAND}/images/logo_${process.env.BRAND}.png`)
};
Erenn
  • 625
  • 6
  • 18