title: react native - requiring unknown module
body: <p>I have been trying to load local image files in ListView. </p>
  
  <p>It does work when I hard code:</p>
  
  <p><code>return &lt;Image source={require('./public/image1.png')} style={{width: 60, height: 60}}/&gt;</code></p>
  
  <p>However, it doesn't work when I read the path of the image like this:</p>
  
  <pre><code>var path = rowData.thumbnail;
  console.log(path); // './public/image1.png'
  return &lt;Image source={require(path)} style={{width: 60, height: 60}}/&gt;
  </code></pre>
  
  <p>or like this:</p>
  
  <pre><code>return &lt;Image source={require(rowData.thumbnail)} style={{width: 60, height: 60}}/&gt;
  </code></pre>
  
  <p>with this error message,</p>
  
  <blockquote>
    <p>Requiring unknown module"'./public/image1.png'". If you are sure the module is there, try restarting the packager or running "npm install".</p>
  </blockquote>
  
  <p>Could you please give me an advice to read the path from the object? I attached the full code below. Thank you in advance.</p>
  
  <pre><code>class MyClass extends Component {
    constructor(props) {
      super(props);
      const ds = new ListView.DataSource({rowHasChanged: (r1, r2) =&gt; r1 !== r2});
      let data = importedData.map(function(d) {
        return {
          thumbnail: "'./public" + d.thumbnail + "'"
        }
      });
      this.state = {
        dataSource: ds.cloneWithRows(data)
      };
    }
    renderRow(rowData) {
      var path = rowData.thumbnail;
      return &lt;View style={{flex: 1, flexDirection: 'row'}}&gt;
        &lt;Image source={require(path)} style={{width: 60, height: 60}}/&gt;
      &lt;/View&gt;
    }
    render() {
      return (
        &lt;View style={{paddingTop: 22}}&gt;
          &lt;ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>