Loading a local image using require() doesn't work

Hi,

Is this a bug report?

yes.

Actual Behavior

I’m getting “require() must have a single string literal argument” when I’m trying to require a local image. Here is what I do :

I’m retrieving the image path as a string from Firebase database and I’m setting a state with it :

profilePicture: user.val().picture_1

here is the path => “…/…/img/user/profile/blank_profile.png”

Then I’m trying to set my image source using the path that I just retieved :

<Thumbnail large source={require(this.state.profilePicture)}/>

But I’m getting the error “require() must have a single string literal argument”.

Thank you in advance !

Expected Behavior

The image is displayed.

Steps to Reproduce

Require a local url from firebase stored in a state.

Environment

Environment: OS: Windows 10 Node: 6.10.2 Yarn: Not Found npm: 3.10.10 Watchman: Not Found Xcode: N/A Android Studio: Version 2.3.0.0 AI-162.3871768

Packages: (wanted => installed) react: 16.0.0-beta.5 => 16.0.0-beta.5 react-native: ^0.49.5 => 0.49.5

[talcoolcat]

Apparently it cannot work - require() is processed during transpilling or whatever you want to call a processing that happens during building the app, hence it requires a constant value. We are using a workaround:

import React, {Component} from 'react';
import {Image} from 'react-native';

class StaticImage extends React.Component {
  constructor(props) {

    super(props);

    this.images = {
      './../assets/img-0.png':require('./../assets/img-0.png'),
      './../assets/img-1.png':require('./../assets/img-1.png'),
      './../assets/img-2.png':require('./../assets/img-2.png'),
      './../assets/img-3.png':require('./../assets/img-3.png'),
      './../assets/img-4.png':require('./../assets/img-4.png'),
      './../assets/img-5.png':require('./../assets/img-5.png')}

      this.actualimage = this.images[props.staticsource]
      console.log("staticsource:",props.staticsource)
  }
  render() {
    return (
      <Image source={this.actualimage} {...this.props}/>
  )}
}

[lwinkyawmyat]

Hi @packouray, it absolute worked. Can you check on snack?