Generate bundle and assets when building via Xcode

Summary: This integrates React Native into Xcode's build process, which lets us automatically handle bundling and packaging image assets.

Tested the script via https://github.com/frantic/ReactNativeAssetsExample

Loaded from packager:
<img width="432" alt="screen shot 2015-10-19 at 3 11 12 pm" src="https://cloud.githubusercontent.com/assets/192222/10593447/be5bc7e8-7678-11e5-8c70-ecc2a1ee24fc.png">

Loaded from offline bundle:
<img width="432" alt="screen shot 2015-10-19 at 3 10 58 pm" src="https://cloud.githubusercontent.com/assets/192222/10593448/be5d5194-7678-11e5-8b02-d492a26cfb81.png">

Android:
<img width="639" alt="screen shot 2015-10-19 at 3 11 20 pm" src="https://cloud.githubusercontent.com/assets/192222/10593449/be5de2d0-7678-11e5-8d3c-0378fc447f15.png">
Closes #3523

Reviewed By: mkonicek

Differential Revision: D2557923

Pulled By: frantic

fb-gh-sync-id: 19957e255993696e793b0162662772efd89f5c1a

Author: frantic

local-cli/__tests__/generators-test.js

@@ -208,7 +208,6 @@ describe('React Yeoman Generators', function() {
 
     it('creates files', function() {
       assert.file([
-        'ios/main.jsbundle',
         'ios/TestAppIOS/AppDelegate.h',
         'ios/TestAppIOS/AppDelegate.m',
         'ios/TestAppIOS/Base.lproj/LaunchScreen.xib',

local-cli/generator-ios/index.js

@@ -15,12 +15,6 @@ var yeoman = require('yeoman-generator');
 module.exports = yeoman.generators.NamedBase.extend({
   writing: function() {
     var templateVars = {name: this.name};
-    // SomeApp/ios
-    this.fs.copyTpl(
-      this.templatePath(path.join('main', '**')),
-      this.destinationPath('ios'),
-      templateVars
-    );
     // SomeApp/ios/SomeApp
     this.fs.copyTpl(
       this.templatePath(path.join('app', '**')),

local-cli/generator-ios/templates/app/AppDelegate.m

@@ -35,12 +35,8 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 
   /**
    * OPTION 2
-   * Load from pre-bundled file on disk. To re-generate the static bundle
-   * from the root of your project directory, run
-   *
-   * $ react-native bundle --minify
-   *
-   * see http://facebook.github.io/react-native/docs/running-on-device-ios.html
+   * Load from pre-bundled file on disk. The static bundle is automatically
+   * generated by "Bundle React Native code and images" build step.
    */
 
 //   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

local-cli/generator-ios/templates/main/main.jsbundle

@@ -7,7 +7,6 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
-		008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */ = {isa = PBXBuildFile; fileRef = 008F07F21AC5B25A0029DE68 /* main.jsbundle */; };
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
 		00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; };
@@ -334,6 +333,7 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
+				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 			);
 			buildRules = (
 			);
@@ -505,14 +505,31 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
 /* End PBXResourcesBuildPhase section */
 
+/* Begin PBXShellScriptBuildPhase section */
+		00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Bundle React Native code and images";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "../node_modules/react-native/packager/react-native-xcode.sh";
+			showEnvVarsInLog = 1;
+		};
+/* End PBXShellScriptBuildPhase section */
+
 /* Begin PBXSourcesBuildPhase section */
 		00E356EA1AD99517003FC87E /* Sources */ = {
 			isa = PBXSourcesBuildPhase;

local-cli/generator-ios/templates/xcodeproj/project.pbxproj

@@ -0,0 +1,41 @@
+#!/bin/bash
+# Copyright (c) 2015-present, Facebook, Inc.
+# All rights reserved.
+#
+# This source code is licensed under the BSD-style license found in the
+# LICENSE file in the root directory of this source tree. An additional grant
+# of patent rights can be found in the PATENTS file in the same directory.
+
+# Bundle React Native app's code and image assets.
+# This script is supposed to be invoked as part of Xcode build process
+# and relies on envoronment variables (including PWD) set by Xcode
+
+case "$CONFIGURATION" in
+  Debug)
+    DEV=true
+    ;;
+  Release)
+    DEV=false
+    ;;
+  "")
+    echo "$0 must be invoked by Xcode"
+    exit 1
+    ;;
+  *)
+    echo "Unsupported value of \$CONFIGURATION=$CONFIGURATION"
+    exit 1
+    ;;
+esac
+
+# Xcode project file for React Native apps is located in ios/ subfolder
+cd ..
+
+set -x
+DEST=$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH
+
+react-native bundle \
+  --entry-file index.ios.js \
+  --platform ios \
+  --dev $DEV \
+  --bundle-output "$DEST/main.jsbundle" \
+  --assets-dest "$DEST"