React-native, import image depends on a variable

Issue

I'm currently working on a react-native project, I spent a lot of time trying to deal with this issue.

I have this code:

import { activeCompany } from "../../../companies";

export default function MyFunc(){
  const SLIDER_DATA = [
    {
      key: '1',
      title: appContexts.splashScreenTitle1,
      description: appContexts.splashScreenDesc1,
      picture: require(`../../../companies/${activeCompany}/assets/images/splash- 3.png`), // the issue is coming from this line...
      splashScreen: require('../../Assets/swipeScreenBg3.jpg'),
      titleColor: appColors.swipeScreenTitle1,
    },
    {
      key: '2',
      title: appContexts.splashScreenTitle2,
      description: appContexts.splashScreenDesc2,
      picture: require('../../Assets/splash-1.png'),
      splashScreen: require('../../Assets/swipeScreenBg2.jpg'),
      titleColor: appColors.swipeScreenTitle2,
  }];

  return (
    ...
    <Image style={styles.spalshItemImage} source={item.picture} />
    ...
  )
}

so as you see when I use activeCompany I got error: require("../../../companies/" + require('../../../companies/index') + "/assets/images/splash-3.png")

the correct path should be like : require("../../../companies/companyName/assets/images/splash-3.png

but when I use normal string it works as well, I don't know the reason of this problem, even if I render a activeCompany inside a text like <Text>{activeCompany}</Text> I get the correct value which is companyName

here is the file from where I export company name

...
const activeCompany: string = 'OzApp'; //as you see it's just a string
...
export {activeCompany, ...};

Thank you for your time!

Solution

Okay. What if you try this? I just read on stackoverflow that you cant use variables or anything in a require. So you will have to first create the string and require later.

Can you try if this works?

import { activeCompany } from "../../../companies";

export default function MyFunc(){
  const SLIDER_DATA = [
    {
      key: '1',
      title: appContexts.splashScreenTitle1,
      description: appContexts.splashScreenDesc1,
      picture: `../../../companies/${activeCompany}/assets/images/splash- 3.png`,
      splashScreen: '../../Assets/swipeScreenBg3.jpg',
      titleColor: appColors.swipeScreenTitle1,
    },
    {
      key: '2',
      title: appContexts.splashScreenTitle2,
      description: appContexts.splashScreenDesc2,
      picture: '../../Assets/splash-1.png',
      splashScreen: '../../Assets/swipeScreenBg2.jpg',
      titleColor: appColors.swipeScreenTitle2,
  }];

  return (
    ...
    <Image style={styles.spalshItemImage} source={require(item.picture)} />
    ...
  )
}

Answered By - Refilon