Merge pull request #157 from vjeux/update5

Updates from Mon 16 Mar

Examples/UIExplorer/NetInfoExample.js

@@ -0,0 +1,135 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  NetInfo,
+  Text,
+  View
+} = React;
+
+var ReachabilitySubscription = React.createClass({
+  getInitialState() {
+    return {
+      reachabilityHistory: [],
+    };
+  },
+  componentDidMount: function() {
+    NetInfo.reachabilityIOS.addEventListener(
+      'change',
+      this._handleReachabilityChange
+    );
+  },
+  componentWillUnmount: function() {
+    NetInfo.reachabilityIOS.removeEventListener(
+      'change',
+      this._handleReachabilityChange
+    );
+  },
+  _handleReachabilityChange: function(reachability) {
+    var reachabilityHistory = this.state.reachabilityHistory.slice();
+    reachabilityHistory.push(reachability);
+    this.setState({
+      reachabilityHistory,
+    });
+  },
+  render() {
+    return (
+      <View>
+        <Text>{JSON.stringify(this.state.reachabilityHistory)}</Text>
+      </View>
+    );
+  }
+});
+
+var ReachabilityCurrent = React.createClass({
+  getInitialState() {
+    return {
+      reachability: null,
+    };
+  },
+  componentDidMount: function() {
+    NetInfo.reachabilityIOS.addEventListener(
+      'change',
+      this._handleReachabilityChange
+    );
+    NetInfo.reachabilityIOS.fetch().done(
+      (reachability) => { this.setState({reachability}); }
+    );
+  },
+  componentWillUnmount: function() {
+    NetInfo.reachabilityIOS.removeEventListener(
+      'change',
+      this._handleReachabilityChange
+    );
+  },
+  _handleReachabilityChange: function(reachability) {
+    this.setState({
+      reachability,
+    });
+  },
+  render() {
+    return (
+      <View>
+        <Text>{this.state.reachability}</Text>
+      </View>
+    );
+  }
+});
+
+var IsConnected = React.createClass({
+  getInitialState() {
+    return {
+      isConnected: null,
+    };
+  },
+  componentDidMount: function() {
+    NetInfo.isConnected.addEventListener(
+      'change',
+      this._handleConnectivityChange
+    );
+    NetInfo.isConnected.fetch().done(
+      (isConnected) => { this.setState({isConnected}); }
+    );
+  },
+  componentWillUnmount: function() {
+    NetInfo.isConnected.removeEventListener(
+      'change',
+      this._handleConnectivityChange
+    );
+  },
+  _handleConnectivityChange: function(isConnected) {
+    this.setState({
+      isConnected,
+    });
+  },
+  render() {
+    return (
+      <View>
+        <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
+      </View>
+    );
+  }
+});
+
+exports.title = 'NetInfo';
+exports.description = 'Monitor network status';
+exports.examples = [
+  {
+    title: 'NetInfo.isConnected',
+    description: 'Asyncronously load and observe connectivity',
+    render() { return <IsConnected />; }
+  },
+  {
+    title: 'NetInfo.reachabilityIOS',
+    description: 'Asyncronously load and observe iOS reachability',
+    render() { return <ReachabilityCurrent />; }
+  },
+  {
+    title: 'NetInfo.reachabilityIOS',
+    description: 'Observed updates to iOS reachability',
+    render() { return <ReachabilitySubscription />; }
+  },
+];

Examples/UIExplorer/UIExplorerList.js

@@ -42,6 +42,7 @@ var EXAMPLES = [
   require('./MapViewExample'),
   require('./WebViewExample'),
   require('./AppStateIOSExample'),
+  require('./NetInfoExample'),
   require('./AlertIOSExample'),
   require('./AdSupportIOSExample'),
   require('./AppStateExample'),

Libraries/AppState/AppState.js

@@ -25,22 +25,4 @@ var AppState = {
 
 };
 
-// This check avoids redboxing if native RKReachability library isn't included in app
-// TODO: Move reachability API into separate JS module to prevent need for this
-if (RKReachability) {
-  AppState.networkReachability = new Subscribable(
-    RCTDeviceEventEmitter,
-    'reachabilityDidChange',
-    (resp) => resp.network_reachability,
-    RKReachability.getCurrentReachability
-  );
-}
-
-AppState.NetworkReachability = keyMirror({
-  wifi: true,
-  cell: true,
-  none: true,
-  unknown: true,
-});
-
 module.exports = AppState;

Libraries/Network/NetInfo.js

@@ -0,0 +1,143 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule NetInfo
+ * @flow
+ */
+'use strict';
+
+var NativeModules = require('NativeModules');
+var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+var RKReachability = NativeModules.RKReachability;
+
+var DEVICE_REACHABILITY_EVENT = 'reachabilityDidChange';
+
+type ChangeEventName = $Enum<{
+  change: string;
+}>;
+
+
+/**
+ * NetInfo exposes info about online/offline status
+ *
+ * == iOS Reachability
+ *
+ * Asyncronously determine if the device is online and on a cellular network.
+ *
+ * - "none" - device is offline
+ * - "wifi" - device is online and connected via wifi, or is the iOS simulator
+ * - "cell" - device is connected via Edge, 3G, WiMax, or LTE
+ * - "unknown" - error case and the network status is unknown
+ *
+ * ```
+ * NetInfo.reachabilityIOS.fetch().done((reach) => {
+ *   console.log('Initial: ' + reach);
+ * });
+ * function handleFirstReachabilityChange(reach) {
+ *   console.log('First change: ' + reach);
+ *   NetInfo.reachabilityIOS.removeEventListener(
+ *     'change',
+ *     handleFirstReachabilityChange
+ *   );
+ * }
+ * NetInfo.reachabilityIOS.addEventListener(
+ *   'change',
+ *   handleFirstReachabilityChange
+ * );
+ * ```
+ */
+
+var NetInfo = {};
+
+if (RKReachability) {
+  var _reachabilitySubscriptions = {};
+
+  NetInfo.reachabilityIOS = {
+    addEventListener: function (
+      eventName: ChangeEventName,
+      handler: Function
+    ): void {
+      _reachabilitySubscriptions[handler] = RCTDeviceEventEmitter.addListener(
+        DEVICE_REACHABILITY_EVENT,
+        (appStateData) => {
+          handler(appStateData.network_reachability);
+        }
+      );
+    },
+
+    removeEventListener: function(
+      eventName: ChangeEventName,
+      handler: Function
+    ): void {
+      if (!_reachabilitySubscriptions[handler]) {
+        return;
+      }
+      _reachabilitySubscriptions[handler].remove();
+      _reachabilitySubscriptions[handler] = null;
+    },
+
+    fetch: function(): Promise {
+      return new Promise((resolve, reject) => {
+        RKReachability.getCurrentReachability(
+          (resp) => {
+            resolve(resp.network_reachability);
+          },
+          reject
+        );
+      });
+    },
+  };
+
+  /**
+   *
+   * == NetInfo.isConnected
+   *
+   * Available on all platforms. Asyncronously fetch a boolean to determine
+   * internet connectivity.
+   *
+   * ```
+   * NetInfo.isConnected.fetch().done((isConnected) => {
+   *   console.log('First, is ' + (isConnected ? 'online' : 'offline'));
+   * });
+   * function handleFirstConnectivityChange(isConnected) {
+   *   console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
+   *   NetInfo.isConnected.removeEventListener(
+   *     'change',
+   *     handleFirstConnectivityChange
+   *   );
+   * }
+   * NetInfo.isConnected.addEventListener(
+   *   'change',
+   *   handleFirstConnectivityChange
+   * );
+   * ```
+   *
+   */
+  var _isConnectedSubscriptions = {};
+  NetInfo.isConnected = {
+    addEventListener: function (
+      eventName: ChangeEventName,
+      handler: Function
+    ): void {
+      _isConnectedSubscriptions[handler] = (reachability) => {
+        handler(reachability !== 'none');
+      };
+      NetInfo.reachabilityIOS.addEventListener(eventName, _isConnectedSubscriptions[handler]);
+    },
+
+    removeEventListener: function(
+      eventName: ChangeEventName,
+      handler: Function
+    ): void {
+      NetInfo.reachabilityIOS.removeEventListener(eventName, _isConnectedSubscriptions[handler]);
+    },
+
+    fetch: function(): Promise {
+      return NetInfo.reachabilityIOS.fetch().then(
+        (reachability) => reachability !== 'none'
+      );
+    },
+  };
+}
+
+module.exports = NetInfo;

Libraries/ReactIOS/renderApplication.js

@@ -15,12 +15,10 @@ function renderApplication(RootComponent, initialProps, rootTag) {
     rootTag,
     'Expect to have a valid rootTag, instead got ', rootTag
   );
-  var pushNotification = initialProps.launchOptions &&
-    initialProps.launchOptions.remoteNotification &&
-    new PushNotificationIOS(initialProps.launchOptions.remoteNotification);
+  var initialNotification = PushNotificationIOS.popInitialNotification();
   React.render(
     <RootComponent
-      pushNotification={pushNotification}
+      pushNotification={initialNotification}
       {...initialProps}
     />,
     rootTag

Libraries/Utilities/PixelRatio.js

@@ -10,45 +10,49 @@ var Dimensions = require('Dimensions');
 /**
  * PixelRatio class gives access to the device pixel density.
  *
- * Some examples:
- *   - PixelRatio.get() === 2
- *     - iPhone 4, 4S
- *     - iPhone 5, 5c, 5s
- *     - iPhone 6
- *
- *   - PixelRatio.get() === 3
- *     - iPhone 6 plus
- *
  * There are a few use cases for using PixelRatio:
  *
- * == Displaying a line that's as thin as the device permits
+ * ### Displaying a line that's as thin as the device permits
  *
  * A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's
- * thinner using a width of 1 / PixelRatio.get(). It's a technique that works
+ * thinner using a width of `1 / PixelRatio.get()`. It's a technique that works
  * on all the devices independent of their pixel density.
  *
- *   style={{ borderWidth: 1 / PixelRatio.get() }}
+ * ```
+ * style={{ borderWidth: 1 / PixelRatio.get() }}
+ * ```
  *
- * == Fetching a correctly sized image
+ * ### Fetching a correctly sized image
  *
  * You should get a higher resolution image if you are on a high pixel density
  * device. A good rule of thumb is to multiply the size of the image you display
  * by the pixel ratio.
  *
- *   var image = getImage({
- *     width: 200 * PixelRatio.get(),
- *     height: 100 * PixelRatio.get()
- *   });
- *   <Image source={image} style={{width: 200, height: 100}} />
+ * ```
+ * var image = getImage({
+ *   width: 200 * PixelRatio.get(),
+ *   height: 100 * PixelRatio.get()
+ * });
+ * <Image source={image} style={{width: 200, height: 100}} />
+ * ```
  */
 class PixelRatio {
+  /**
+   * Returns the device pixel density. Some examples:
+   *
+   *   - PixelRatio.get() === 2
+   *     - iPhone 4, 4S
+   *     - iPhone 5, 5c, 5s
+   *     - iPhone 6
+   *   - PixelRatio.get() === 3
+   *     - iPhone 6 plus
+   */
   static get() {
     return Dimensions.get('window').scale;
   }
+}
 
-  static startDetecting() {
-    // no-op for iOS, but this is useful for other platforms
-  }
-};
+// No-op for iOS, but used on the web. Should not be documented.
+PixelRatio.startDetecting = function() {};
 
 module.exports = PixelRatio;

Libraries/Utilities/PushNotificationIOS.js

@@ -5,8 +5,14 @@
  */
 'use strict';
 
+var NativeModules = require('NativeModules');
 var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
 
+var RCTPushNotificationManager = NativeModules.RCTPushNotificationManager;
+if (RCTPushNotificationManager) {
+  var _initialNotification = RCTPushNotificationManager.initialNotification;
+}
+
 var _notifHandlers = {};
 
 var DEVICE_NOTIF_EVENT = 'remoteNotificationReceived';
@@ -30,6 +36,14 @@ class PushNotificationIOS {
     _notifHandlers[handler] = null;
   }
 
+
+  static popInitialNotification() {
+    var initialNotification = _initialNotification &&
+      new PushNotificationIOS(_initialNotification);
+    _initialNotification = null;
+    return initialNotification;
+  }
+
   constructor(nativeNotif) {
     this._data = {};
 

Libraries/react-native/react-native.js

@@ -24,6 +24,7 @@ var ReactNative = {
   ListViewDataSource: require('ListViewDataSource'),
   MapView: require('MapView'),
   NavigatorIOS: require('NavigatorIOS'),
+  NetInfo: require('NetInfo'),
   PickerIOS: require('PickerIOS'),
   PixelRatio: require('PixelRatio'),
   ScrollView: require('ScrollView'),

ReactKit/Base/RCTBridge.m

@@ -554,7 +554,7 @@ static id<RCTJavaScriptExecutor> _latestJSExecutor;
     }];
 
     if (dispatch_semaphore_wait(semaphore, dispatch_time(DISPATCH_TIME_NOW, NSEC_PER_SEC)) != 0) {
-      RCTLogMustFix(@"JavaScriptExecutor took too long to inject JSON object");
+      RCTLogError(@"JavaScriptExecutor took too long to inject JSON object");
     }
   }
 

ReactKit/Modules/RCTPushNotificationManager.h

@@ -0,0 +1,12 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <FBReactKit/RCTBridgeModule.h>
+
+extern NSString *const RKRemoteNotificationReceived;
+extern NSString *const RKOpenURLNotification;
+
+@interface RCTPushNotificationManager : NSObject <RCTBridgeModule>
+
+- (instancetype)initWithInitialNotification:(NSDictionary *)initialNotification NS_DESIGNATED_INITIALIZER;
+
+@end

ReactKit/Modules/RCTPushNotificationManager.m

@@ -0,0 +1,64 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "RCTPushNotificationManager.h"
+
+#import "RCTAssert.h"
+#import "RCTBridge.h"
+#import "RCTEventDispatcher.h"
+
+NSString *const RKRemoteNotificationReceived = @"RemoteNotificationReceived";
+NSString *const RKOpenURLNotification = @"RKOpenURLNotification";
+
+@implementation RCTPushNotificationManager
+{
+  NSDictionary *_initialNotification;
+}
+
+@synthesize bridge = _bridge;
+
+- (instancetype)init
+{
+  return [self initWithInitialNotification:nil];
+}
+
+- (instancetype)initWithInitialNotification:(NSDictionary *)initialNotification
+{
+  if ((self = [super init])) {
+    _initialNotification = [initialNotification copy];
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(handleRemoteNotificationReceived:)
+                                                 name:RKRemoteNotificationReceived
+                                               object:nil];
+    [[NSNotificationCenter defaultCenter] addObserver:self
+                                             selector:@selector(handleOpenURLNotification:)
+                                                 name:RKOpenURLNotification
+                                               object:nil];
+  }
+  return self;
+}
+
+- (void)handleRemoteNotificationReceived:(NSNotification *)notification
+{
+  [_bridge.eventDispatcher sendDeviceEventWithName:@"remoteNotificationReceived"
+                                              body:[notification userInfo]];
+}
+
+- (void)handleOpenURLNotification:(NSNotification *)notification
+{
+  [_bridge.eventDispatcher sendDeviceEventWithName:@"openURL"
+                                              body:[notification userInfo]];
+}
+
+- (NSDictionary *)constantsToExport
+{
+  return @{
+    @"initialNotification": _initialNotification ?: [NSNull null]
+  };
+}
+
+- (void)dealloc
+{
+  [[NSNotificationCenter defaultCenter] removeObserver:self];
+}
+
+@end

packager/react-packager/src/DependencyResolver/haste/DependencyGraph/index.js

@@ -134,13 +134,17 @@ DependecyGraph.prototype.resolveDependency = function(
   fromModule,
   depModuleId
 ) {
-  // Process asset requires.
-  var assetMatch = depModuleId.match(/^image!(.+)/);
-  if (assetMatch && assetMatch[1]) {
-    if (!this._assetMap[assetMatch[1]]) {
-      throw new Error('Cannot find asset: ' + assetMatch[1]);
+
+  if (this._assetMap != null) {
+    // Process asset requires.
+    var assetMatch = depModuleId.match(/^image!(.+)/);
+    if (assetMatch && assetMatch[1]) {
+      if (!this._assetMap[assetMatch[1]]) {
+        console.warn('Cannot find asset: ' + assetMatch[1]);
+        return null;
+      }
+      return this._assetMap[assetMatch[1]];
     }
-    return this._assetMap[assetMatch[1]];
   }
 
   var packageJson, modulePath, dep;
@@ -577,7 +581,8 @@ function buildAssetMap(roots, exts) {
         } else {
           var ext = path.extname(file).replace(/^\./, '');
           if (exts.indexOf(ext) !== -1) {
-            var assetName = path.basename(file, '.' + ext);
+            var assetName = path.basename(file, '.' + ext)
+                  .replace(/@[\d\.]+x/, '');
             if (map[assetName] != null) {
               debug('Conflcting assets', assetName);
             }