I've built a React Native app which has 2 versions - production and dev. I've created slightly different app icons and added these in XCode & Android Studio, and those are working fine. However, I have a screen within the app which needs a logo, and I'm having trouble getting the appropriate logo to show on that screen.

I've uploaded both versions of the logo to the assets folder, but with different names, and then added the appropriate name to each .env file:

LOGO=logo_main.png  // In .env.prod
LOGO=logo_dev.png   // In .env.dev

Then, on the screen in question, I have a simple Image with the source pulled from the .env file, like this:

<Image source={require(`../../../assets/${Config.LOGO}`)} />

(Config uses react-native-config-reader to read the config file).

However, this doesn't work (on iOS at least) due to webpack not having access to the config file when it's getting the images together.

I can't find anything online which explains how to do this, but I assume it's possible as it seems like a basic thing to do. Can anyone advise?

CodePudding user response：

You can have different bundleId's for different flavours and then based on bundleId choose an appropriate image.