Image Require Module using Dynamic Names in React Native

Question

What I'm trying to do

I wanna write mCategories's on in require in source of Image tag.

Code

const mCategories = [
  {
    id: 1, name: 'All', off: 'all_on', on: 'all_on',
  }, {
    id: 2, name: 'Whole Cakes', off: 'wc', on: 'wc_on',
  },
  {
    id: 3, name: 'Sliced Cakes', off: 'sc', on: 'sc_on',
  }, {
    id: 4, name: 'Chilled Items', off: 'chilled', on: 'chilled_on',
  },
];

export default class Category extends React.Component {
  render() {
    return mCategories.map((mCategory) => (
      <TouchableOpacity
        key={mCategory.id}
      >
        <Image
          source={require(`app/assets/ico/ico_category_${mCategory.on}.png`)}
        />
        <Text>{mCategory.name}</Text>
      </TouchableOpacity>
    ));
  }
}

Error

Invalid call at line 28: require("app/assets/ico/ico_category_" + mCategory.on + ".png")

Answer 1

You have two option

1- create a file with image required - React native images must be loaded this way.

export const friendsandfoe = require('./image1.png'); 
export const lifeanddeath = require('./image2.png'); 
export const homeandgarden = require('./image3.png');

after that

import * as images from '../../assets';

and

<Image source={images[`${imageValue}`]}></Image>

=================================================================

2- use this syntax

<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />

===========================================================================

Answer 2

I should have made it like this at first.

This Worked!

const mCategories = [
  {
    id: null,
    name: 'All',
    on: require('app/assets/ico/ico_category_all_on.png'),
  },
  {
    id: 1,
    name: 'Whole Cakes',
    on: require('app/assets/ico/ico_category_wc_on.png'),
  },
];

export default class Category extends React.Component {
  render() {
    return mCategories.map((mCategory) => (
      <TouchableOpacity
        key={mCategory.id}
      >
        <Image
          source={mCategory.on}
        />
        <Text>{mCategory.name}</Text>
      </TouchableOpacity>
    ));
  }
}