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

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

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.