Document new asset system

[frantic]

cc @mkonicek @martinbigio
@brentvatne mind doing a quick proofreading? :)

[facebook-github-bot]

By analyzing the blame information on this pull request, we identified @brentvatne, @vjeux and @mkonicek to be potential reviewers.

[facebook-github-bot]

@frantic updated the pull request.

[brentvatne]

bundle and server image

bundle and serve the image

If there is no image matching screen density, closest

If there is no image matching the screen density, the closest

[brentvatne]

Looks amazing @frantic! After those small grammar fixes let's 🚀

[chirag04]

👍 This means no need to add images to xcode now?

Edit: @brentvatne answered this on discord. Now, we won't need to add images to xcode.

[chirag04]

@frantic would it consider 1.5x and 4x for android?

[frantic]

@chirag04 yes, see https://github.com/facebook/react-native/blob/master/private-cli/src/bundle/getAssetDestPathAndroid.js#L13, we map @Nx to whatever-dpi on Android.

[martinbigio]

nit: missing . at the end of the sentence

[frantic]

Thanks for the review @brentvatne, I'm really bad with the.
Let's merge this when we cut the next release!

[facebook-github-bot]

@frantic updated the pull request.

[ptomasroos]

Oh my god this is good news! High five everyone involved!

[mkonicek]

Looks awesome @frantic!

[satya164]

That's super awesome!

[auser]

VERY awesome!

[negativetwelve]

This is great! Just curious, are there docs already written / upcoming that document how to release apps using the new asset system? I noticed the --assets-dest flag got added to the packager but didn't see how that was supposed to be used relative to the compiled bundle.

[martinbigio]

I'll submit a pr tomorrow or on Thursday to update the docs for the cli :)

[negativetwelve]

awesome, thanks @martinbigio!

[shishircc]

If I use react-native bundle command line to bundle the js code, the iPhone app run through Xcode is unable to show image.

[frantic]

Hey @shishircc, note that for this system to work we need to add a step to Xcode build process that would collect all required images and package them into the app. See be70e32.

TL;DR is – either regenerate your Xcode project using react-native init or react-native upgrade, or manually add "Run Script Phase" to your Xcode project:

../node_modules/react-native/packager/react-native-xcode.sh

Note that the location for main.jsbundle has changed and you no longer need to manually run react-native bundle, it will be handled by Xcode.

[shishircc]

Thanks @frantic ,
I created project again by using react-native init
By default it tries to load the code from developer node server running on my machine.
If I uncomment the bundle line (// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];) like I used to in earlier releases, the program still asks me to create offline bundle

How is the automatic offline bundling triggered ?

[frantic]

I created project again by using react-native init

This will be part of 0.14 release, the current version is 0.13.2.

If you want to try this feature before the release, do the following:

1. rm -rf node_modules
2. in your package.json change "react-native" version to "v0.14.0-rc"
3. npm install
4. react-native upgrade
5. Answer Y to all questions

[facebook-github-bot]

@frantic updated the pull request.

[chirag04]

@frantic I generated the project today using the master branch(modified cli). Xcode cannot build the new generated project. i get /bin/sh react-native command not found

However the build works fine when i check Run scripts only when installed in build phases. Can we enable it by default in the template if it's required?

cc @foghina

[frantic]

@chirag04 can you open a separate issue for this and assign to me?

[jaredly]

Does this mean that the require("image!some_name") syntax is no longer supported? It looks like the requires aren't being transformed, and I'm getting

Unable to resolve module image!my_image from /the/path: Invalid directory /the/path/image!my_image

[atticoos]

Hmmm also curious about this ☝️

Neither v0.14.0-rc nor v0.14.0 make mention of this being a breaking change

[foghina]

@frantic can you have a look into this? It looks similar to what I'm seeing on travis on the 0.14-stable branch: https://travis-ci.org/facebook/react-native/jobs/89546902#L1272

[foghina]

Also cc @martinbigio

[frantic]

Does this mean that the require("image!some_name") syntax is no longer supported?

@jaredly should just work, seem like a bug. FYI you can still use {uri: 'some_name'} (which is actually how require('image!some_name') is transformed under the hood).

[popbee]

2 questions about the Asset system:

#1- If I understand correctly, there will be no way to have images updated without updating the native portion of an app? I mean, one nice thing about react-native is the ability to update (the non-native portion of) apps instantly in the field.

#2- I see the names need to be statically defined. Would there be a way to have a simple wildcard pattern, something like Anim*.png or status_*.png?

(Not sure this is the right place to ask, please redirect me anywhere more appropriate if not)

[foghina]

1. We don't support OTA updates at all yet, but something could be built by the community / services like AppHub.
2. Not sure what you mean. Requiring e.g. image.png will return the correct resource for your current configuration (pixel density etc.), e.g. [email protected] or [email protected]. Not sure how wildcards would be useful if this already works?

[frantic]

@popbee regarding 1 see #3679 - basically we will load images from the same place as JS, which means you could potentially put your JS bundle and assets into a folder and tell RN to load from it and it should just work.

[bradbyte]

I had an issue when I tried to offline bundle the app, even after upgrading the react-native package with the react-native upgrade command, but it wasn't until I manually added the run script task that it is now working. Thanks @frantic.

[andpor]

I ran react-native upgrade but obviously couldn't answer Y to all overwrites as majority of existing project config would be lost so I had to be selective. Nonetheless, the run script task was not added.

Separately, the new run script task makes the assumption that the entry point has to be index.ios.js - this is an artificial and limiting constraint in my view . It should be passed in as param to the script. Also, locations it uses are artificial and limiting - they are user project dependent really...

Still, cannot get static images to work with the offline bundle deployment in Xcode...have not even tried Android..this is React 0.18...

The Awesome Project in Xcode does not show any references to assets folder and iOS is not finding the static images...I have not idea where the images should be placed and how they should be referenced from Xcode any longer...

[satya164]

I ran react-native upgrade but obviously couldn't answer Y to all overwrites as majority of existing project config would be lost so I had to be selective. Nonetheless, the run script task was not added.

You can press "d" to view the diff of what's changed, and do those changes manually.

Separately, the new run script task makes the assumption that the entry point has to be index.ios.js - this is an artificial and limiting constraint in my view . It should be passed in as param to the script. Also, locations it uses are artificial and limiting - they are user project dependent really...

The react-native bundle command takes the entry file name as an argument.

Still, cannot get static images to work with the offline bundle deployment in Xcode...have not even tried Android..this is React 0.18...

Try creating a project from scratch and port your changes over. This is the easiest way.

The Awesome Project in Xcode does not show any references to assets folder and iOS is not finding the static images...I have not idea where the images should be placed and how they should be referenced from Xcode any longer...

You can place them anywhere you want and reference them just like you reference javascript files.

[andpor]

@satya164 - thanks for your hints..commented on them below based on my experience...

1. You can press "d" to view the diff of what's changed, and do those changes manually.

Yes, did that. The run script task was never added to the Xcode project ...

1. The react-native bundle command takes the entry file name as an argument.

Yes. but all documentation scattered around refers to running the pre-canned script react-native-code.sh and supposedly this script is to be added by react-native init or upgrade so as you can image someone will be scratching their head to figure out what is going on unless they go into this sh script and modify things around. Furthermore, since the script does not take any params, the whole script has to be duplicated in order to run it against a different entry point - not a good thing.

1. react-native bundle fails if run with --dev false which is what the react-native-code.sh does. If you run it with --dev true - seems to work fine.

[frantic]

Regarding react-native upgrade: unfortunately this process is not streamlined yet, it just relies on yeoman's ability to upgrade generated files. Merging Xcode project files is pain, so if you want to do it manually I have a comment above with a few pictures that describe how to do it.

As for the entry point – we rely on convention over configuration here. If you think that the process of customizing the entry point is common enough, please send a PR. We have addressed a similar issue earlier by adding a configuration option.

The bug your experienced regarding whole program optimizations deserves a separate issue and is not related to this PR. I suspect your node_modules might be in a bad state, try rm -rf node_modules && npm install.