How to load images from res/drawable-folder in ReactNative-App?
<p>I'd like to display static images from res/drawable-folder in a ReactNative-App. However, there's nothing displayed.</p>

<p>I have the following folder structure in the android-subfolder:</p>

<pre><code>macbook:CompanyApp hagen$ tree android/app/src/main/res/
android/app/src/main/res/
├── drawable
│   ├── a1456.jpg
│   └── a1457.jpg
├── mipmap-hdpi
│   └── ic_launcher.png
├── mipmap-mdpi
│   └── ic_launcher.png
├── mipmap-xhdpi
│   └── ic_launcher.png
├── mipmap-xxhdpi
│   └── ic_launcher.png
└── values
    ├── strings.xml
    └── styles.xml

6 directories, 8 files
</code></pre>

<p>As mentioned in the documentation, i try to load the image-files from drawable-folder with the following code:</p>

<pre><code>&lt;Image source={{uri: 'a1456'}} style={{width: 140, height: 140}} /&gt;
</code></pre>

<p>I also tried the filename together with the extension:</p>

<pre><code>&lt;Image source={{uri: 'a1456.jpg'}} style={{width: 140, height: 140}} /&gt;
</code></pre>

<p>and also:</p>

<pre><code>&lt;Image source={require('image!a1456')} style={{width: 140, height: 140, backgroundColor: 'yellow'}} /&gt;
</code></pre>

<p>And i tried the subfolder:</p>

<pre><code>&lt;Image source={{uri: 'drawable/a1456.jpg'}} style={{width: 140, height: 140}} /&gt;
</code></pre>

<p>No image will be displayed.
Using a require-statement within image source for a local image in my current folder for instance is working fine. </p>

<p>But i am looking for a solution to consume the drawable-images like within a real native android application.</p>

<p><strong>UPDATE</strong></p>

<p>I just published an example project on github: <a href="https://github.com/itinance/testdrawable" rel="noreferrer">https://github.com/itinance/testdrawable</a></p>

<p>It is a standard RN-App with "react-native init" and just added an image to display in drawable-folder (android only).</p>

<p>Can someone have a look at it and tell me what i am doing wrong?</p>