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-06 14:38:08Z

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 6, 2018 at 14:38

answered Aug 6, 2018 at 14:30

Sathvik Nasani

2271 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

1pocketaces1 Over a year ago

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?

Sathvik Nasani Over a year ago

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 Over a year ago

it worked for me if i define outside of the class like above.

1pocketaces1 Over a year ago

that's exactly what I had and it would return an integer when I called the mapped value.

Sathvik Nasani Over a year ago

do you whant to map over the BOXES2 object?

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related