CODEWITHSUNDEEP
iosxcodereact-native
scgough
scgough

Reputation: 5252

React-Native Offline Bundle - Images not showing

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:

Any help would be greatly appreciated!

Upvotes: 26

Views: 22372

Answers (5)

Fecoded
Fecoded

Reputation: 11

I add the assets folder as a whole in Build Phases > Copy Bundle Resources and run this;

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

Hope this helps someone.

Upvotes: 0

matt
matt

Reputation: 625

Run this command in your react native project root:

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

And add a reference of the folder in your project in XCode.

Upvotes: 0

Dinesh Sharma
Dinesh Sharma

Reputation: 658

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

Upvotes: 29

MehdiNasiriPoor
MehdiNasiriPoor

Reputation: 334

for ios 14 : go to this directory: node_modules/react-native/Libraries/Image and open the RCTUIImageViewAnimated.m then add the else condition to this part :

if (_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
[super displayLayer:layer];
}

Upvotes: 0

papacostas
papacostas

Reputation: 858

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

Upvotes: 14

Related Questions