react-native: Image doesn't show after bundling into the apk

Here is the project structure:

android-project
+---app
|   \---src
|       \---main
|           \---assets
|           \---java
|           \---res
+---reactnative
|   \---assets
|       \---image@1x.png
|       \---image@2x.png
|       \---image@3x.png
----index.android.js

Here’s the code to show the image:

<Image
    source={require('./reactnative/assets/image.png')}
    resizeMode='contain'
    style={styles.image} />

The above code works fine when running together with localhost react-native start. But it doesn’t work after bundling react native resources into the apk:

react-native bundle --platform android -dev false --entry-file index.android.js \
--bundle-output app/src/main/assets/index.android.bundle \
--assets-dest app/src/main/res/

Here’s the output:

android-project
+---app
|   \---src
|       \---main
|           \---assets
|               \---index.android.bundle
|           \---java
|           \---res
|               \---drawable-xxxhdpi
|                   \---reactnative_assets_image1.png
|               \---drawable-xxhdpi
|                   \---reactnative_assets_image1.png
|               \---drawable-xhdpi
|                   \---reactnative_assets_image1.png
|               \---drawable-mdpi
|                   \---reactnative_assets_image1.png

Is it the right way to generate the apk with react native? Please troubleshoot. Thanks!

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 15 (3 by maintainers)

Most upvoted comments

Follow this process:

Run the bundle command from your project root (adjust as needed):

react-native bundle \
--platform ios \
--entry-file index.ios.js \
--bundle-output ./main.jsbundle \
--assets-dest ./ \
--dev false

Above step will generate an “assets” folder and a “main.jsbundle” file. Add them both to your project in Xcode.
Finally, make sure that the images path in your JS follow the same path relative to the assets folder. E.g. if your image has: source={require('./app/img/image.png'), that file should be in “assets/app/img/image.jpg”.

typologist on Feb 13, 2016

@rockerhieu Thanks for bringing up this issue!

This issue should be resolved in later versions of React Native. Assets are also automatically bundled by the iOS and Android release builds.

jsierles on Mar 20, 2016

It’s interesting that there is no one else ever asked this question. Am I the only one getting this issue with 0.14.2 on Android?

rockerhieu on Nov 19, 2015