9

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!

Improve this question
6
  • Did you follow the upgrade instructions here: facebook.github.io/react-native/docs/upgrading.html Commented Nov 21, 2015 at 13:36
  • Are you on Windows? Seems like the new assets system broke some things. If so you might wanna check github.com/facebook/react-native/issues/4207 for a solution. Commented Nov 22, 2015 at 21:01
  • @DaveSibiski I started with 0.14.2 directly for an existing project, so I don't think I need to upgrade anything. Commented Nov 25, 2015 at 2:20
  • @Almouro I'm using MacOS Commented Nov 25, 2015 at 2:21
  • have you solved the issue? Commented Sep 6, 2016 at 5:02

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

you might want to look visit https://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-android-app for you query, basically you set up you code like <Image source={require('./ res/check.png')} /> using the JS files and putting your images in the drawable folders e.g check.png in android/app/src/main/res/drawable-hdpi

Improve this answer

1 Comment

You can double check my question. I could run the app just fine using localhost. But after generating the assets and bundling the js file I couldn't see any image.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.