React Native 'require' statement resolves to a number when used in mapping

Question

I understand that require('') needs a static string, but when I try to map values in packaging to be used later in code

const BOXES2 = {
  silver: require('../../assets/imgs/status/silveroutline.png'),
  gold: require('../../assets/imgs/status/goldoutline.png'),
  platinum: require('../../assets/imgs/status/platinumoutline.png')
}

they resolve to integers , the following logs the number 6

constructor(props) {
    super(props);
    var data = BOXES2[this.props.userData.memberStatus];
    console.log(data);
  }

so then I cannot load images like this

<Image
        source={BOXES2[this.props.userData.memberStatus]}
        style={img}
        resizeMode="contain"
      />

memberStatus is a string value and the data and image paths are correct, as I can get it to work by creating a separate Image using each source path directly in render(), and then placing one of them in return() conditionally by the userData.

I would like to figure the other way out though, as it requires many many less lines and much easier to maintain.

Sathvik Nasani · Accepted Answer · 2018-08-06T14:38:08.213

2

keep all require statements in seperate file like

image.js

export default {                                                                
  silver: require('../../assets/imgs/status/silveroutline.png'),
  gold: require('../../assets/imgs/status/goldoutline.png'),
  platinum: require('../../assets/imgs/status/platinumoutline.png')
};

and import this file in your screen like this:

import BOXES2 from 'src/config/Images';

after importing use image component like this:

 eg: <Image
         source={BOXES2[this.props.userData.memberStatus]}
         style={img}
         resizeMode="contain"
     />

edited Aug 06 '18 at 14:38

answered Aug 06 '18 at 14:30

Sathvik Nasani

227
1
6

It does work that way! Do you know why it works that way, but I cannot set them like I did just outside the class definition? – 1pocketaces1 Aug 06 '18 at 20:36
const BOXES2 = { back: require('src/images/back.png'), down : require('src/images/down.png'), listening: require('src/images/listener.gif'), } export default class Information extends Component { // your screen code } – Sathvik Nasani Aug 07 '18 at 05:52
it worked for me if i define outside of the class like above. – Sathvik Nasani Aug 07 '18 at 05:54
that's exactly what I had and it would return an integer when I called the mapped value. – 1pocketaces1 Aug 07 '18 at 19:18
do you whant to map over the BOXES2 object? – Sathvik Nasani Aug 08 '18 at 09:48
Yea I got it sort of figured out, if I put the file in the same folder so that the path is './images' it works fine. I just was hoping to not have an extra file in every component to have one object mapping two or three values – 1pocketaces1 Aug 28 '18 at 20:11
if you have more images in your project it is better to maintain seperate file and import that file and do mapping because infuture if you whant to add an image to your BOXES2 you can add into that file. – Sathvik Nasani Aug 29 '18 at 07:26
If this answer solve the problem. it would be better if you accept the answer thank u – Sathvik Nasani Aug 29 '18 at 07:27

React Native 'require' statement resolves to a number when used in mapping

1 Answers1