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.

Improve this question

1 Answer 1

Reset to default
26
+50

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"}} />
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

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 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 :)
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.
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.
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.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.