In React-Native, how can I choose an assets folder instead of another one based on my environment fi-CodePudding

I'm building white label apps.

I have an assets folder that contains one images folder and one fonts folder for each brands.

Like so :

assets/
   brand1/
      fonts/
      images/
        img1.png
        img2.png
        img3.png
   brand2/
      fonts/
      images/
        img1.png
        img2.png
        img3.png
src/

My idea would be to have an index.js at the root of the assets folder where I'd be able to export the relevant set of folders based on my environment file.

Though I'm not sure how to achieve that.

Any hint ?

(My concern is that I don't want to have the environment conditioning in each of my components)

CodePudding user response：

Let us assume that you have two environments;

.env.brand1 NAME=BRAND1 .env.brand2 NAME=BRAND2

create an index.js file, it's code should look something like this;

const images = {
    BRAND1: {
        logo: require('./brand1/brand1Logo.jpeg')
    },
    BRAND2: {
        logo: require('./brand2/brand2Logo.jpeg')
    }

}

export default images;

You can now use image in any file like this;

... other imports
import images from '#assets/index'

export default function () {
    
    ...other code 

    <Image source={images[Config.NAME].logo} />

}