Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react-native iOS app not showing static/local assets (images) after deploying

I have all my static images in a folder called "images" in the root of my project. However, after I run the following command to bundle my app, the app works but no image is shown.

The command I use to bundle:

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

Note that the assets folder is created and it has my images folder with all images ok.

Can you help please?

like image 673
meteorite Avatar asked Feb 12 '16 04:02

meteorite


People also ask

Where are photos stored in react-native app?

Storing Images in Source Directory Most react developers tend to store their images in src/assets folder.

How do you run Reactnative on iOS?

If you wish to run your app on an iPhone SE (2nd generation), run npx react-native run-ios --simulator="iPhone SE (2nd generation)" . The device names correspond to the list of devices available in Xcode. You can check your available devices by running xcrun simctl list devices from the console.


3 Answers

Please check XCode console log first. You will find that the app couldn't find out those specific image assets on path "{project name}.app/assets/resources/.."

enter image description here

So, you need to put images on those fixed paths, unlike iOS native App. Lets add "assets" folder to your 'Copy Bundle Resources'.

Step 1: Select XCode project -> Build Phases -> Copy Bundle Resources

Step 2 enter image description here

Step 3 enter image description here

Step 4 enter image description here

like image 141
Milan Kamilya Avatar answered Oct 10 '22 19:10

Milan Kamilya


The asset destination and the main.jsbundle have to be in the same folder. Try:

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

The bundler will create an assets folder in there anyway.

UPDATE including information from the discussions below:

The react-native-xcode.sh script that is executed in a XCode build step copies the main.jsbundle and the assets folder created by the bundler into the app package. If you want to deploy the package manually you need to make sure, that those files are copied. The easiest way is to include the main.jsbundle directly into the project and create a folder link to the assets folder. Verify that both are showing up in 'Build Phases' -> 'Copy Bundle Resources'.

like image 22
d-vine Avatar answered Oct 10 '22 19:10

d-vine


For a newer version of react-native use the following:

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

You will see asset folder and main.jsbundle file in the ios folder. After that go to Xcode -> build phases -> copy bundle resources and then add the asset folder and main.jsbundle file. Don't forget to click on the Copy if needed

like image 19
Julfikar Avatar answered Oct 10 '22 18:10

Julfikar