9

I've searched around and haven't quite found the correct solution for this. I have the app displaying images no problem with uri on iOS using the following code after adding a local folder reference to the XCode project:

<Image style={styles.catimg} source={{uri: "imgs/1.png"}} />

But on Android I can't quite figure out where to put the images and how to reference them in the code. Some people have said about a folder called 'drawable-hdpi' in android/app/src/main/res/drawable-hdpi but the build fails if this folder is added there. At the moment there are mipmap folders only.

Hasen
  • 11,710
  • 23
  • 77
  • 135

1 Answers1

26

The React Native Image doc is pretty good!

Static images

As of React Native 0.14, they recommend using static images like so:

<Image style={styles.catimg} source={require("./imgs/1.png")} />

Here are some benefits that you get:

  1. Same system on iOS and Android.
  2. Images live in the same folder as your JS code. Components are self-contained.
  3. No global namespace, i.e. you don't have worry about name collisions.
  4. Only the images that are actually used will be packaged into your app.
  5. Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do.
  6. The packager knows the image dimensions, no need to duplicate it in the code.
  7. Images can be distributed via npm packages.

Images From Native side

However, you might still wanna use an image from the native side, if for instance, you are building a hybrid app (some UIs in React Native, some UIs in platform code).

On Android, the images will indeed be read from the android/app/src/main/res/drawable-* folders.

When you create a new React Native app, only the mipmap folders are present. The mipmap folders are for your app/launcher icons only. Any other drawable assets you use should be placed in the relevant drawable folders as before. More info here.

So you need to create at least one drawable folder, say android/app/src/main/res/drawable-hdpi, then place your image imgs_1.png in it.

Unfortunately, the drawable folders cannot contain subdirectories. More info here.

Moreover, the image name must start with a letter, and can only contain lowercase letters, numbers or the undescore character. See this, for example.

Then you'll be able to use your image like this, without the extension:

<Image style={styles.catimg} source={{uri: "imgs_1"}} />
Community
  • 1
  • 1
Almouro
  • 6,424
  • 2
  • 19
  • 20
  • Yeah I know about that but its also possible to use URI and for my purpose I need to here. If it works on iOS why wouldn't it work on Android? It says clearly in the docs that URI also works with local files. – Hasen Apr 17 '16 at 17:04
  • @Hasen ok then, I updated my answer! As you can see, this method has some drawbacks on Android, so may I wonder what is your specific need? Maybe there's another way to make it work :) – Almouro Apr 18 '16 at 22:18
  • The image doc states that you can use URI with a URL or static file but it does not state how to use it with a static file or give any examples. That would have saved me and many others it seems from asking for one, how to do it in iOS and then now again in Android. It was very difficult to get an answer for iOS too and many didn't seem to know how to do it but actually it can be done no problem. Requiring the image is ok for standalone image but for dynamic its no good because you can't include strings in the request. – Hasen Apr 19 '16 at 05:16
  • 1
    Ok it does work - I was forgetting to remove the extension. To be honest, the methods for using URI to display local images with both iOS and Android should be added to the docs. Would save a lot of headaches. – Hasen Apr 19 '16 at 07:19
  • Forgot to award your bounty. I thought selecting you as the correct answer would automatically award it. – Hasen Apr 23 '16 at 02:35
  • I have a similar issue, and neither the uri nor the require-statement will work. I provided also an example project and will file an issue on RN now: http://stackoverflow.com/questions/38174722/how-to-load-images-from-res-drawable-folder-in-reactnative-app – itinance Jul 04 '16 at 06:47
  • 1
    Hi @itinance, your repo works for me, so I assume you found the problem, which was I guess having a single `drawable` folder instead of `drawable-hdpi`, `drawable-mdpi`... folders. – Almouro Jul 10 '16 at 17:23
  • Yes @Almouro, i should update my question/comment. Thanks that you have taken the time for my question/comment! – itinance Jul 10 '16 at 17:29