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 a

Answer 1

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:

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

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.