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

Question

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?

Answer 1

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}} />

Answer 2

I am also trying to do this. Am using RN 0.47.1 - reason I want this, is because I want to have the "loading" screen and my landing page have an image in the exact same spot, so I want the image to load instantly.

Re instant loading: Adding the resource within the folder in my js bundled directories, is taking time to load it. So I thought that if I put it in "res/drawable" (for Android) it should already be loaded as it just used it for the splash. I have found this is true, however there is a blink, I am trying to avoid that blink.

However here is the official docs on how to load local images on Android and iOS - facebook.github.io :: React Native - Images From Hybrid App's Resources

If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.

For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

For images in the Android assets folder, use the asset:/ scheme:

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />

These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.

So yes, your discovery of having to set the width/height is true. In latest RN though (i am using 0.47.1) we can't set props of width/height, it has to be done via style.