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

Question

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?

Could you give more details please. Simulator or device? If device, how did you deploy it? And can you please post a code sample of one of your image usages. — d-vine, Feb 12 '16 at 14:56
What I did to deploy it: 1) edited the schema to set the "release" mode. 2) changed the bundle location to use the local main bundle (main.jsbundle) 3) Executed the command above to bundle the app. 4) Selected my device and ran it. — meteorite, Feb 12 '16 at 15:01

score 65 · Answer 1 · answered Mar 23 '18 at 19:42

65

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/.."

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

Step 3

Step 4

answered Mar 23 '18 at 19:42

Milan Kamilya

2,188
1
31
44

Hi @SagarTrehan, I hope you go through the steps and execute accordingly. Do you see any problem while executing? – Milan Kamilya Sep 17 '19 at 07:09
Hi @Milan, I followed exact same steps multiple time, but still I am facing same issue that images are not getting loaded in iOS build. I am using react-native version "0.59.10" can this issue related to latest react-native? – Sagar Trehan Sep 17 '19 at 10:53
@SagarTrehan, let me check and get back – Milan Kamilya Sep 17 '19 at 13:16
Hi @SagarTrehan, I tested with react-native 0.60.3, it works perfectly. I will ask to check *Step 4* carefully. There you need to set "Create folder references". Please check that. – Milan Kamilya Sep 17 '19 at 14:11
If this is still not working, please share error log @SagarTrehan – Milan Kamilya Sep 17 '19 at 14:12
2

Its working for me now. I was copying the "$Project/src/assets" folder in "Copy Bundle Resources", instead of "$Project/ios/assets". This is stupid mistake from me. Very thankful to you for providing the solution. – Sagar Trehan Sep 24 '19 at 06:57
Hey @SagarTrehan, good to hear that it worked for you. please vote if this answer works for you. – Milan Kamilya Sep 24 '19 at 07:41
2

it worked for me just as you said, just selecting the assets folder inside the ios folder and then adding it to the copy bundle ressource. – Hugo Sep 28 '20 at 08:13
@BloodyMonkey, could you please tell if you get any error while executing the first command? – Milan Kamilya Feb 18 '21 at 17:29
@MilanKamilya No errors, assets seems to be successfully copied but i still have " [framework] CUICatalog: Invalid asset name supplied: '(null)' " in xcode terminal for each assets when building – BloodyMonkey Feb 22 '21 at 09:43
Cool... actual solution! Wish this was like automatic or something... just don't understand why the discontinuity here lol – Will Von Ullrich Feb 08 '22 at 19:03
I tried all the above steps but the app started crashing in release mode. – RB RB May 15 '22 at 14:37

score 26 · Accepted Answer · edited Jul 25 '19 at 17:26

26

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'.

edited Jul 25 '19 at 17:26

Oleg

488
4
14

answered Feb 12 '16 at 15:26

d-vine

5,317
3
27
25

What should be the jsCodeLocation path in this case? The current value is: jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; – meteorite Feb 12 '16 at 15:58
1

probably jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"release/main" withExtension:@"jsbundle"]; You can also try do --bundle-output ./main.jsbundle --assets-dest . The point is, that require() searches the assets relative to the current main.jsbundl – d-vine Feb 12 '16 at 16:06
1

Sorry didn't work. I think the problem is that the bundle always creates a folder called "assets" and copies the "images" folder inside it. – meteorite Feb 12 '16 at 16:24
But this is the expected behavior. The bundle has to be next to the asset folder. Both need to be copied to the device/simulator, as well. I'm not sure how the default schemes handle this, because I made my own. I integrated the assets folder as folder link in xcode and made sure it gets copied in 'Build Phases' -> 'Copy Bundle Resources' – d-vine Feb 12 '16 at 16:36
3

Ok finally got it working. You were right as both assets folder and the main.jsbundle have to be inside the same folder. However, things worked when I put both of them in the same directory where the default Images.xcassets is. Also I selected "create folder references" on adding the assets folder and the main.jsbundle to the project. This way, they both appeared in 'Build Phases' -> 'Copy Bundle Resources' and all worked as expected. Thanks. – meteorite Feb 12 '16 at 17:44
1

Yep this did the trick for me. I was missing adding the generated assets folder (not the individual files) in the "Copy Bundle Resources" build phase. – Adamski Jun 26 '16 at 21:12
1

I have added same, images are added in bundle resources. still images are not loading. I can see the added images and main,jsbundle in resources. – Afsara Feb 27 '18 at 12:14
@Afsara is totally right, images are still not loading, despite of the assets folder inside my iOS project. – Yurii N. Nov 26 '18 at 14:36
@YuriiN. Did you get the solution? Please help me if you know the answer. I am struggling with this issues since last week. :( – Sagar Trehan Sep 13 '19 at 16:49
@SagarTrehan unfortunately not at all, but I remember that problem was with Fastlane, so maybe you should dig in that way. – Yurii N. Sep 13 '19 at 21:13
these commands worked for me as an npm run build script `npx react-native bundle --entry-file index.js --dev false --assets-dest ./rn-assets --reset-cache --bundle-output ./main.jsbundle && mv ./main.jsbundle ./rn-assets` and in your controller/Delegate reference 'rn-assets/main' also be sure to add rn-assets with folder references to xcode – evanjmg Apr 10 '21 at 13:44

score 21 · Answer 3 · answered Nov 28 '18 at 07:08

21

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

answered Nov 28 '18 at 07:08

Julfikar

1,353
2
18
35

which version of react-native are you using? this command was working for v0.55, if I remember the version correctly – Julfikar Sep 14 '19 at 02:54
1

Still works with v0.62.2. Tnx for the help man, the issue was getting really annoying for me! – Lemon Aug 04 '20 at 21:40

Kumar Parth · Answer 4 · 2020-12-01T11:36:13.660

Local assets do not load even if you are working on a newer Xcode versions i.e. 12.x or later. There are two solutions to it :

Upgrade react-native versions
Or go to below file:

node_modules > react-native > Libraries > Images > RCTUIImageViewAnimated.m search for `if (_currentFrame)`

add the following else block to the if block as below

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

If its older xcode you need to add assets and main.jsbundle under Xcode -> build phases -> copy bundle resources

or

Use library react-native-image-fix Here's the link try the below commands:

npm install --save react-native-fix-image
npx react-native-fix-image

Rebuild the project.

score 3 · Answer 5 · answered Jan 15 '22 at 23:05

3

for me the solution was to run the command to build assets:

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

answered Jan 15 '22 at 23:05

Edi

1,900
18
27

DeltaCap019 · Answer 6 · 2021-11-09T15:51:29.940

2

Create an Assets folder inside the ios directory.

Add this folder to your project.
Select the Create groups option.

Assets folder won't show up in Copy Bundle Resources like it does in other solutions.
It will show up in Project Navigator. It looks different from the AWS folder because AWS is added as Create folder references

Tested on

react-native version > 0.63.
Xcode 12 and above.

Note

Solution (https://stackoverflow.com/a/53513935/1206052) I didn't want to use any command/script to force it as bundling comes out of the box.
Solution (https://stackoverflow.com/a/49457267/1206052) This solution didn't work for me.

edited Nov 09 '21 at 15:51

answered Nov 09 '21 at 15:46

DeltaCap019

6,532
3
48
70

but how the real static images are copied/linked from the original /assets folder into the /ios/Assets one ? – Jonathan Jan 09 '22 at 13:18
1

@Jonathan. I think the script for copying resources to some new place inside the compiled file is already there in the `build scripts`. For Android, it works seamlessly but for iOS, it fails in the absence of a destination directory. When I analyzed the apk I found all the images referred inside the project as `require('../../assets/images/ic_abc.png'),` were copied to `res` inside the compiled apk. How I came to know about creating an Assets folder for iOS was purely a result of a comparison with my old project. – DeltaCap019 Jan 10 '22 at 20:50
DeltaCap019 thanks for the answer, I later realised what caused the issue. The expo-update package, was pointing the asset location to a network location. Removing it, solved the issue. – Jonathan Mar 14 '22 at 13:25
I had the same issue with the NX monorepo. This answer fixed the assets linking. – Georgiy T. Jan 25 '23 at 15:34

Mathias Bradiceanu · Answer 7 · 2023-02-02T07:41:34.367

All the above questions are working.

But watch out, in my case i had to make this in this order :

delete the old assets folder first (in ios/assets)
add this in my package.json under the scripts attributes (so i can run it later, or for other developers)

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

Go to my Xcode (i am on v14.0.1), the to the "build phase" tab, and add my "assets" folder previoulsy created.
delete my app in my simulator
clean build iOS (Product > clean build)
run npm run build:ios in the root of my project

score -7 · Answer 8 · answered Aug 15 '18 at 15:49

-7

I fixed that problem changing my xcode version from 9.3 to 9.2

answered Aug 15 '18 at 15:49

mariovzc

173
1
2
12

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

8 Answers8

Linked