status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-27 09:45:04 +00:00
Code Issues Projects Releases Wiki Activity

Generate bundle and assets when building via Xcode

Browse Source 
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 https://github.com/facebook/react-native/pull/3523

Reviewed By: mkonicek

Differential Revision: D2557923

Pulled By: frantic

fb-gh-sync-id: 19957e255993696e793b0162662772efd89f5c1a
This commit is contained in:
Alex Kotliarskyi 2015-10-21 18:42:08 -07:00 committed by facebook-github-bot-7
parent aff4cfb3b3
commit be70e32de2
6 changed files with 62 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
local-cli/__tests__/generators-test.js
View File

@ -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',

6
local-cli/generator-ios/index.js
View File

@ -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', '**')),

8
local-cli/generator-ios/templates/app/AppDelegate.m
View File

@ -35,12 +35,8 @@
/**
* 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"];

8
local-cli/generator-ios/templates/main/main.jsbundle
View File

@ -1,8 +0,0 @@
// Offline JS
// To re-generate the offline bundle, run this from the root of your project:
//
// $ react-native bundle --minify
//
// See http://facebook.github.io/react-native/docs/running-on-device-ios.html for more details.
throw new Error('Offline JS file is empty. See iOS/main.jsbundle for instructions');

21
local-cli/generator-ios/templates/xcodeproj/project.pbxproj
View File

@ -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,7 +505,6 @@
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */,
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
);
@ -513,6 +512,24 @@
};
/* 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;

41
packager/react-native-xcode.sh Executable file
View File

@ -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"