React Native local images with URI on Android

Question

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.

Answer 1

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