React-Native Offline Bundle - Images not showing

Question

I have a React-Native app I'm trying to deploy in Release mode to my phone. I can bundle the app to the phone. Database, Video and audio assets are all in there but no images are showing in the UI.

I have done the following to 'bundle' my app:

1. in the project folder in Terminal run react-native bundle --platfrom ios --dev false --entry-file index.ios.js --bundle-output main.jsbundle
2. Drag the reference to the main.jsbundle file into XCode under myapp folder
3. In XCode, open AppDelegate.m and uncomment jsCodeLocation = [[NSBundle mainBundle]…
4. Open Product > Scheme > Edit Scheme then change Build Configuration to Release
5. Select myapp under the project navigator and then: under TARGETS: myappTests > Build Phases > Link Binary With Libraries press + select Workspace > libReact.a and Add

When I try and compile in XCode with the ../node_modules/react-native/packager/react-native-xcode.sh setting in myapp > targets > myapp > Bundle React Native code and images it fails with error code 1.

I've seen LOADS of posts on this and I've tried:

• to check Run script only when installing- the app then installs but with no images
• adding source ~/.bash_profile to react-native-xcode.sh - the app build fails

Any help would be greatly appreciated!

Answer 1

When you are generating bundle , Also put --assets-dest ./

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

It will generate main.jsbundle and Assets folder . Go to your Xcode right click add files to project and add main.jsbundle file to project. Also drag and drop Assets folder and select create by reference (note: do not select create group).

i was using react 0.33, main.jsbundle is using assets(small a) folder but generating Assets(Caps A). I just changed the generated folder from Assets to assets and import it to xcode and it start working

Answer 2

are the images in xcode or in the file system?, i dont see an --assets-dest in your bundle parameters

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

also add the assets folder to xcode like the bundle.

note that the image assets are only copied if they are required correctly, see the documentation