Anyone success in using local image in react native for Android?

Question

I'm using react native 0.14.2. I asked this question on github but that repo is overwhelming by too many issues. Hope I can find the answer here.

So here is the project structure:

android-project
+---app
|   \---src
|       \---main
|           \---assets
|           \---java
|           \---res
+---reactnative
|   \---assets
|       \[email protected]
|       \[email protected]
|       \[email protected]
----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!

Answer 1

when using require() in standard JS, the path given is relative, therefore any paths given need to be relative to the file you're requiring them in. THe best way to do this is not to have them inside the 'android' and 'ios' directories, but have a seperate one with your apps JS code in, and store the images in there, that way the paths will be much shorter, and not different per OS.