How can I conditionally include images in React Native Component?
<p>I am able to add static images to a <code>ListView</code> cell just fine (see code below), but how do I change the icon image dynamically?</p>

<p>From <a href="https://facebook.github.io/react-native/docs/images.html" rel="nofollow">React Native Docs</a></p>

<pre><code>&lt;Image source={require('./img/check.png')} /&gt;
</code></pre>

<p>is the recommended way to reference image files for both iOS and Android.</p>

<p>I have a component called <code>ExpandingCell</code> that has the option to show a bunch of different icons but everything else remains the same.</p>

<p>In a <code>ListView</code> I create a <code>cell</code> object and then pass it into the <code>ExpandingCell</code> to render</p>

<p>the ListView data source array looks like this:</p>

<pre><code>var LIST_DATA = [
 ...
  {type: 'ExpandingCell', 
   icon: './CellIcons/MagnifyingGlassIcon.png', //unused
   title: 'Lorem Ipsum', 
   detail: 'Donec id elit non mi porta gravida at eget metus.'},
...
];
</code></pre>

<p>then in <code>renderCell</code> method it gets passed the above cell object:</p>

<pre><code>renderCell(cell) {
    if (cell.type === 'ExpandingCell') {
        return (
          &lt;ExpandingCell cell={cell} /&gt;
        );
    }
}
</code></pre>

<p>Now in <code>ExpandingCell</code> I have this for <code>render()</code>:</p>

<pre><code>render() {
    return (
        ...
        &lt;Image source{
            require('./CellIcons/MagnifyingGlassIcon.png')
        }&gt;
        &lt;/Image&gt;
        ...
    );
}
</code></pre>

<p>However, when I try to make use of <code>this.props.cell.icon</code> like this:</p>

<pre><code>&lt;Image source={require(this.props.cell.icon)}&gt;&lt;/Image&gt;
</code></pre>

<p>I get the following error: <code>Requiring unknown module "./CellIcons/MagnifyingGlassIcon.png".</code></p>

<p>Thanks in advance =)</p>