Managed assets support for RCTConvert

Reviewed By: @nicklockwood

Differential Revision: D2443130

Examples/UIExplorer/TabBarIOSExample.js

@@ -79,7 +79,8 @@ var TabBarExample = React.createClass({
           {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}
         </TabBarIOS.Item>
         <TabBarIOS.Item
-          systemIcon="more"
+          icon={require('./flux.png')}
+          title="More"
           selected={this.state.selectedTab === 'greenTab'}
           onPress={() => {
             this.setState({

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -15,6 +15,7 @@ var React = require('React');
 var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
+var resolveAssetSource = require('resolveAssetSource');
 
 var requireNativeComponent = require('requireNativeComponent');
 
@@ -114,7 +115,8 @@ var TabBarItemIOS = React.createClass({
     return (
       <RCTTabBarItem
         {...this.props}
-        icon={this.props.systemIcon || this.props.icon}
+        icon={this.props.systemIcon || resolveAssetSource(this.props.icon)}
+        selectedIcon={resolveAssetSource(this.props.selectedIcon)}
         badge={badge}
         style={[styles.tab, this.props.style]}>
         {tabContents}

Libraries/Image/__tests__/resolveAssetSource-test.js

@@ -77,10 +77,12 @@ describe('resolveAssetSource', () => {
         name: 'logo',
         type: 'png',
       }, {
+        __packager_asset: true,
         isStatic: false,
         width: 100,
         height: 200,
         uri: 'http://10.0.0.1:8081/assets/module/a/logo.png?platform=ios&hash=5b6f00f',
+        scale: 1,
       });
     });
 
@@ -96,10 +98,12 @@ describe('resolveAssetSource', () => {
         name: 'logo',
         type: 'png',
       }, {
+        __packager_asset: true,
         isStatic: false,
         width: 100,
         height: 200,
         uri: 'http://10.0.0.1:8081/assets/module/a/logo@2x.png?platform=ios&hash=5b6f00f',
+        scale: 2,
       });
     });
 
@@ -125,6 +129,7 @@ describe('resolveAssetSource', () => {
         name: 'logo',
         type: 'png',
       }, {
+        __packager_asset: true,
         isStatic: true,
         width: 100,
         height: 200,
@@ -153,6 +158,7 @@ describe('resolveAssetSource', () => {
         name: '!@Logo#1_€', // Invalid chars shouldn't get passed to native
         type: 'png',
       }, {
+        __packager_asset: true,
         isStatic: true,
         width: 100,
         height: 200,

Libraries/Image/resolveAssetSource.js

@@ -121,13 +121,16 @@ function assetToImageSource(asset) {
   var devServerURL = getDevServerURL();
   if (devServerURL) {
     return {
+      __packager_asset: true,
       width: asset.width,
       height: asset.height,
       uri: getPathOnDevserver(devServerURL, asset),
       isStatic: false,
+      scale: pickScale(asset.scales, PixelRatio.get()),
     };
   } else {
     return {
+      __packager_asset: true,
       width: asset.width,
       height: asset.height,
       uri: getPathInArchive(asset),

React/Base/RCTConvert.m

@@ -413,11 +413,13 @@ RCT_CGSTRUCT_CONVERTER(CGAffineTransform, (@[
   UIImage *image;
   NSString *path;
   CGFloat scale = 0.0;
+  BOOL isPackagerAsset = NO;
   if ([json isKindOfClass:[NSString class]]) {
     path = json;
   } else if ([json isKindOfClass:[NSDictionary class]]) {
     path = [self NSString:json[@"uri"]];
     scale = [self CGFloat:json[@"scale"]];
+    isPackagerAsset = [self BOOL:json[@"__packager_asset"]];
   } else {
     RCTLogConvertError(json, @"an image");
   }
@@ -459,6 +461,8 @@ RCT_CGSTRUCT_CONVERTER(CGAffineTransform, (@[
 
   } else if ([scheme isEqualToString:@"data"]) {
     image = [UIImage imageWithData:[NSData dataWithContentsOfURL:URL]];
+  } else if ([scheme isEqualToString:@"http"] && isPackagerAsset) {
+    image = [UIImage imageWithData:[NSData dataWithContentsOfURL:URL]];
   } else {
     RCTLogConvertError(json, @"an image. Only local files or data URIs are supported");
   }