How to load images from res/drawable-folder in ReactNative-App?

Issue

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

I have the following folder structure in the android-subfolder:

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

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

<Image source={{uri: 'a1456'}} style={{width: 140, height: 140}} />

I also tried the filename together with the extension:

<Image source={{uri: 'a1456.jpg'}} style={{width: 140, height: 140}} />

and also:

<Image source={require('image!a1456')} style={{width: 140, height: 140, backgroundColor: 'yellow'}} />

And i tried the subfolder:

<Image source={{uri: 'drawable/a1456.jpg'}} style={{width: 140, height: 140}} />

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.

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

UPDATE

I just published an example project on github: https://github.com/itinance/testdrawable

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

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

Solution

Finally i got it: the <Image> Tag needs concrete "width" and "height" arguments as attributes, not only as style-parameter.

With that in mind, both declarations will work perfectly:

  <Image width={200} height={267} source={{uri: 'img_3665'}} style={{width: 200, height: 267}} />
  <Image width={200} height={267} source={require('image!img_3665')} style={{width: 200, height: 267}} />

Answered By - itinance