version 0.20.0-rc1

Summary:
accessibilityLabels are missing in these touchable*.js files.
for #5322
ide This is not tested yet. I will update with test.
Closes https://github.com/facebook/react-native/pull/5346

Reviewed By: svcscm

Differential Revision: D2882061

Pulled By: gkassabli

fb-gh-sync-id: dff0ef373e5f5895027cb1cc08c8887a6ace8eee

.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

.buckjavaargs

@@ -0,0 +1 @@
+-Xmx512m -XX:+HeapDumpOnOutOfMemoryError

.eslintrc

@@ -19,6 +19,7 @@
     "__DEV__": true,
     "__dirname": false,
     "__fbBatchedBridgeConfig": false,
+    "alert": false,
     "cancelAnimationFrame": false,
     "clearImmediate": true,
     "clearInterval": false,
@@ -26,8 +27,11 @@
     "console": false,
     "document": false,
     "escape": false,
+    "Event": false,
+    "EventTarget": false,
     "exports": false,
     "fetch": false,
+    "FormData": false,
     "global": false,
     "jest": false,
     "Map": true,
@@ -43,7 +47,29 @@
     "setTimeout": false,
     "window": false,
     "XMLHttpRequest": false,
-    "pit": false
+    "pit": false,
+
+    // Flow global types.
+    "ReactComponent": false,
+    "ReactClass": false,
+    "ReactElement": false,
+    "ReactPropsCheckType": false,
+    "ReactPropsChainableTypeChecker": false,
+    "ReactPropTypes": false,
+    "SyntheticEvent": false,
+    "$Either": false,
+    "$All": false,
+    "$Tuple": false,
+    "$Supertype": false,
+    "$Subtype": false,
+    "$Shape": false,
+    "$Diff": false,
+    "$Keys": false,
+    "$Enum": false,
+    "$Exports": false,
+    "$FlowIssue": false,
+    "$FlowFixMe": false,
+    "$FixMe": false
   },
 
   "rules": {

.flowconfig

@@ -51,15 +51,15 @@ module.system=haste
 munge_underscores=true
 
 module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.20.1
+0.21.0

.gitignore

@@ -26,6 +26,10 @@ project.xcworkspace
 /Examples/**/android/app/build/
 /ReactAndroid/build/
 
+# Buck
+.buckd
+buck-out
+
 # Android
 .idea
 .gradle

.travis.yml

@@ -1,6 +1,6 @@
 language: objective-c
 
-osx_image: xcode7
+osx_image: xcode7.2
 
 cache:
     directories:

Examples/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-alert": 0
+  }
+}

Examples/Movies/MovieCell.js

@@ -18,7 +18,6 @@
 var React = require('react-native');
 var {
   Image,
-  PixelRatio,
   Platform,
   StyleSheet,
   Text,
@@ -99,8 +98,7 @@ var styles = StyleSheet.create({
   },
   cellBorder: {
     backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    // Trick to get the thinest line the device can display
-    height: 1 / PixelRatio.get(),
+    height: StyleSheet.hairlineWidth,
     marginLeft: 4,
   },
 });

Examples/Movies/MovieScreen.js

@@ -18,7 +18,6 @@
 var React = require('react-native');
 var {
   Image,
-  PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
@@ -152,7 +151,7 @@ var styles = StyleSheet.create({
   },
   separator: {
     backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    height: 1 / PixelRatio.get(),
+    height: StyleSheet.hairlineWidth,
     marginVertical: 10,
   },
   castTitle: {

Examples/UIExplorer/AlertExample.js

@@ -18,7 +18,6 @@
 var React = require('react-native');
 var {
   Alert,
-  Platform,
   StyleSheet,
   Text,
   TouchableHighlight,
@@ -134,4 +133,4 @@ var styles = StyleSheet.create({
 module.exports = {
   AlertExample,
   SimpleAlertExampleBlock,
-}
+};

Examples/UIExplorer/AlertIOSExample.js

@@ -36,110 +36,71 @@ exports.examples = [{
   }
 },
 {
-  title: 'Alert Types',
+  title: 'Prompt Options',
+  render(): React.Component {
+    return <PromptOptions />;
+  }
+},
+{
+  title: 'Prompt Types',
   render() {
     return (
       <View>
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
-            'Hello World',
-            null,
-            [
-              {text: 'OK', onPress: (text) => console.log('OK pressed'), type: 'default'}
-            ]
-          )}>
-
-          <View style={styles.button}>
-            <Text>
-              {'default'}
-            </Text>
-          </View>
-          
-        </TouchableHighlight>
-        <TouchableHighlight
-          style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
-            'Plain Text Entry',
-            null,
-            [
-              {text: 'Submit', onPress: (text) => console.log('Text: ' + text), type: 'plain-text'},
-              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
-            ]
-          )}>
+          onPress={() => AlertIOS.prompt('Plain Text Entry')}>
 
           <View style={styles.button}>
             <Text>
               plain-text
             </Text>
           </View>
-          
+
         </TouchableHighlight>
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
-            'Secure Text Entry',
-            null,
-            [
-              {text: 'Submit', onPress: (text) => console.log('Password: ' + text), type: 'secure-text'},
-              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
-            ]
-          )}>
+          onPress={() => AlertIOS.prompt('Secure Text', null, null, 'secure-text')}>
 
           <View style={styles.button}>
             <Text>
               secure-text
             </Text>
           </View>
-          
+
         </TouchableHighlight>
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => AlertIOS.alert(
-            'Login & Password',
-            null,
-            [
-              {text: 'Submit', onPress: (details) => console.log('Login: ' + details.login + '; Password: ' + details.password), type: 'login-password'},
-              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
-            ]
-          )}>
+          onPress={() => AlertIOS.prompt('Login & Password', null, null, 'login-password')}>
 
           <View style={styles.button}>
             <Text>
               login-password
             </Text>
           </View>
-          
+
         </TouchableHighlight>
       </View>
     );
   }
-},
-{
-  title: 'Prompt',
-  render(): React.Component {
-    return <PromptExample />
-  }
 }];
 
-class PromptExample extends React.Component {
+class PromptOptions extends React.Component {
   constructor(props) {
     super(props);
 
-    this.promptResponse = this.promptResponse.bind(this);
-    this.state = {
-      promptValue: undefined,
-    };
+    this.saveResponse = this.saveResponse.bind(this);
 
-    this.title = 'Type a value';
-    this.defaultValue = 'Default value';
-    this.buttons = [{
+    this.customButtons = [{
       text: 'Custom OK',
-      onPress: this.promptResponse
+      onPress: this.saveResponse
     }, {
       text: 'Custom Cancel',
       style: 'cancel',
     }];
+
+    this.state = {
+      promptValue: undefined,
+    };
   }
 
   render() {
@@ -151,7 +112,7 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, null, null, this.promptResponse)}>
+          onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse)}>
 
           <View style={styles.button}>
             <Text>
@@ -162,7 +123,7 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, null, this.buttons, null)}>
+          onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons)}>
 
           <View style={styles.button}>
             <Text>
@@ -173,22 +134,22 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, this.defaultValue, null, this.promptResponse)}>
+          onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse, undefined, 'Default value')}>
 
           <View style={styles.button}>
             <Text>
-              prompt with title, default value & callback
+              prompt with title, callback & default value
             </Text>
           </View>
         </TouchableHighlight>
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons, null)}>
+          onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons, 'login-password', 'admin@site.com')}>
 
           <View style={styles.button}>
             <Text>
-              prompt with title, default value & custom buttons
+              prompt with title, custom buttons, login/password & default value
             </Text>
           </View>
         </TouchableHighlight>
@@ -196,13 +157,8 @@ class PromptExample extends React.Component {
     );
   }
 
-  prompt() {
-    // Flow's apply support is broken: #7035621
-    ((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments);
-  }
-
-  promptResponse(promptValue) {
-    this.setState({ promptValue });
+  saveResponse(promptValue) {
+    this.setState({ promptValue: JSON.stringify(promptValue) });
   }
 }
 

Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js

@@ -95,6 +95,7 @@ class AnExBobble extends React.Component {
           return (
             <Animated.Image
               {...handlers}
+              key={i}
               source={{uri: BOBBLE_IMGS[j]}}
               style={[styles.circle, {
                 backgroundColor: randColor(),                             // re-renders are obvious

Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js

@@ -77,6 +77,7 @@ class AnExChained extends React.Component {
           return (
             <Animated.Image
               {...handlers}
+              key={i}
               source={{uri: CHAIN_IMGS[j]}}
               style={[styles.sticker, {
                 transform: this.state.stickers[j].getTranslateTransform(), // simple conversion

Examples/UIExplorer/AppStateExample.js

@@ -0,0 +1,80 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule AppStateExample
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  AppState,
+  Text,
+  View
+} = React;
+
+var AppStateSubscription = React.createClass({
+  getInitialState() {
+    return {
+      appState: AppState.currentState,
+      previousAppStates: [],
+    };
+  },
+  componentDidMount: function() {
+    AppState.addEventListener('change', this._handleAppStateChange);
+  },
+  componentWillUnmount: function() {
+    AppState.removeEventListener('change', this._handleAppStateChange);
+  },
+  _handleAppStateChange: function(appState) {
+    var previousAppStates = this.state.previousAppStates.slice();
+    previousAppStates.push(this.state.appState);
+    this.setState({
+      appState,
+      previousAppStates,
+    });
+  },
+  render() {
+    if (this.props.showCurrentOnly) {
+      return (
+        <View>
+          <Text>{this.state.appState}</Text>
+        </View>
+      );
+    }
+    return (
+      <View>
+        <Text>{JSON.stringify(this.state.previousAppStates)}</Text>
+      </View>
+    );
+  }
+});
+
+exports.title = 'AppState';
+exports.description = 'app background status';
+exports.examples = [
+  {
+    title: 'AppState.currentState',
+    description: 'Can be null on app initialization',
+    render() { return <Text>{AppState.currentState}</Text>; }
+  },
+  {
+    title: 'Subscribed AppState:',
+    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; }
+  },
+  {
+    title: 'Previous states:',
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; }
+  },
+];

Examples/UIExplorer/BoxShadowExample.js

@@ -0,0 +1,85 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Image,
+  StyleSheet,
+  View
+} = React;
+
+var styles = StyleSheet.create({
+  box: {
+    width: 100,
+    height: 100,
+    borderWidth: 2,
+  },
+  shadow1: {
+    shadowOpacity: 0.5,
+    shadowRadius: 3,
+    shadowOffset: {width: 2, height: 2},
+  },
+  shadow2: {
+    shadowOpacity: 1.0,
+    shadowColor: 'red',
+    shadowRadius: 0,
+    shadowOffset: {width: 3, height: 3},
+  },
+});
+
+exports.title = 'Box Shadow';
+exports.description = 'Demonstrates some of the shadow styles available to Views.';
+exports.examples = [
+  {
+    title: 'Basic shadow',
+    description: 'shadowOpacity: 0.5, shadowOffset: {2, 2}',
+    render() {
+      return <View style={[styles.box, styles.shadow1]} />;
+    }
+  },
+  {
+    title: 'Colored shadow',
+    description: 'shadowColor: \'red\', shadowRadius: 0',
+    render() {
+      return <View style={[styles.box, styles.shadow2]} />;
+    }
+  },
+  {
+    title: 'Shaped shadow',
+    description: 'borderRadius: 50',
+    render() {
+      return <View style={[styles.box, styles.shadow1, {borderRadius: 50}]} />;
+    }
+  },
+  {
+    title: 'Image shadow',
+    description: 'Image shadows are derived exactly from the pixels.',
+    render() {
+      return <Image
+        source={require('./hawk.png')}
+        style={[styles.box, styles.shadow1, {borderWidth: 0, overflow: 'visible'}]}
+      />;
+    }
+  },
+  {
+    title: 'Child shadow',
+    description: 'For views without an opaque background color, shadow will be derived from the subviews.',
+    render() {
+      return <View style={[styles.box, styles.shadow1, {backgroundColor: 'transparent'}]}>
+        <View style={[styles.box, {width: 80, height: 80, borderRadius: 40, margin: 8, backgroundColor: 'red'}]}/>
+      </View>;
+    }
+  },
+];

Examples/UIExplorer/CameraRollExample.js

@@ -15,24 +15,25 @@
  */
 'use strict';
 
-var React = require('react-native');
-var {
+const React = require('react-native');
+const {
   CameraRoll,
   Image,
   SliderIOS,
   StyleSheet,
-  SwitchIOS,
+  Switch,
   Text,
   View,
   TouchableOpacity
 } = React;
 
-var CameraRollView = require('./CameraRollView.ios');
-var AssetScaledImageExampleView = require('./AssetScaledImageExample');
+const CameraRollView = require('./CameraRollView');
 
-var CAMERA_ROLL_VIEW = 'camera_roll_view';
+const AssetScaledImageExampleView = require('./AssetScaledImageExample');
 
-var CameraRollExample = React.createClass({
+const CAMERA_ROLL_VIEW = 'camera_roll_view';
+
+const CameraRollExample = React.createClass({
 
   getInitialState() {
     return {
@@ -45,7 +46,7 @@ var CameraRollExample = React.createClass({
   render() {
     return (
       <View>
-        <SwitchIOS
+        <Switch
           onValueChange={this._onSwitchChange}
           value={this.state.bigImages} />
         <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
@@ -65,18 +66,20 @@ var CameraRollExample = React.createClass({
   },
 
   loadAsset(asset){
-    this.props.navigator.push({
-      title: 'Camera Roll Image',
-      component: AssetScaledImageExampleView,
-      backButtonTitle: 'Back',
-      passProps: { asset: asset },
-    });
+    if (this.props.navigator) {
+      this.props.navigator.push({
+        title: 'Camera Roll Image',
+        component: AssetScaledImageExampleView,
+        backButtonTitle: 'Back',
+        passProps: { asset: asset },
+      });
+    }
   },
 
   _renderImage(asset) {
-    var imageSize = this.state.bigImages ? 150 : 75;
-    var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
-    var location = asset.node.location.longitude ?
+    const imageSize = this.state.bigImages ? 150 : 75;
+    const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
+    const location = asset.node.location.longitude ?
       JSON.stringify(asset.node.location) : 'Unknown location';
     return (
       <TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
@@ -97,9 +100,9 @@ var CameraRollExample = React.createClass({
   },
 
   _onSliderChange(value) {
-    var options = CameraRoll.GroupTypesOptions;
-    var index = Math.floor(value * options.length * 0.99);
-    var groupTypes = options[index];
+    const options = CameraRoll.GroupTypesOptions;
+    const index = Math.floor(value * options.length * 0.99);
+    const groupTypes = options[index];
     if (groupTypes !== this.state.groupTypes) {
       this.setState({groupTypes: groupTypes});
     }
@@ -111,7 +114,7 @@ var CameraRollExample = React.createClass({
   }
 });
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     flex: 1,

Examples/UIExplorer/CameraRollView.js

@@ -22,6 +22,7 @@ var {
   CameraRoll,
   Image,
   ListView,
+  Platform,
   StyleSheet,
   View,
 } = React;
@@ -139,6 +140,10 @@ var CameraRollView = React.createClass({
       groupTypes: this.props.groupTypes,
       assetType: this.props.assetType,
     };
+    if (Platform.OS === "android") {
+      // not supported in android
+      delete fetchParams.groupTypes;
+    }
     if (this.state.lastCursor) {
       fetchParams.after = this.state.lastCursor;
     }

Examples/UIExplorer/ClipboardExample.js

@@ -23,23 +23,26 @@ var {
 } = React;
 
 var ClipboardExample = React.createClass({
-  getInitialState: function() {
+  getInitialState() {
     return {
       content: 'Content will appear here'
     };
   },
-  
-  _setContentToClipboard:function(){
+
+  async _setClipboardContent(){
     Clipboard.setString('Hello World');
-    Clipboard.getString(content => {
+    try {
+      var content = await Clipboard.getString();
       this.setState({content});
-    });
+    } catch (e) {
+      this.setState({content:e.message});
+    }
   },
-  
+
   render() {
     return (
       <View>
-        <Text onPress={this._setContentToClipboard} style={{color: 'blue'}}>
+        <Text onPress={this._setClipboardContent} style={{color: 'blue'}}>
           Tap to put "Hello World" in the clipboard
         </Text>
         <Text style={{color: 'red', marginTop: 20}}>
@@ -55,6 +58,8 @@ exports.description = 'Show Clipboard contents.';
 exports.examples = [
   {
     title: 'Clipboard.setString() and getString()',
-    render(): ReactElement { return <ClipboardExample />; }
+    render() {
+      return <ClipboardExample/>;
+    }
   }
 ];

Examples/UIExplorer/DatePickerAndroidExample.js

@@ -0,0 +1,117 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  DatePickerAndroid,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+} = React;
+
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var DatePickerAndroidExample = React.createClass({
+
+  statics: {
+    title: 'DatePickerAndroid',
+    description: 'Standard Android date picker dialog',
+  },
+
+  getInitialState() {
+    return {
+      presetDate: new Date(2020, 4, 5),
+      allDate: new Date(2020, 4, 5),
+      simpleText: 'pick a date',
+      minText: 'pick a date, no earlier than today',
+      maxText: 'pick a date, no later than today',
+      presetText: 'pick a date, preset to 2020/5/5',
+      allText: 'pick a date between 2020/5/1 and 2020/5/10',
+    };
+  },
+
+  async showPicker(stateKey, options) {
+    try {
+      var newState = {};
+      const {action, year, month, day} = await DatePickerAndroid.open(options);      
+      if (action === DatePickerAndroid.dismissedAction) {
+        newState[stateKey + 'Text'] = 'dismissed';
+      } else {
+        var date = new Date(year, month, day);
+        newState[stateKey + 'Text'] = date.toLocaleDateString();
+        newState[stateKey + 'Date'] = date;
+      }
+      this.setState(newState);
+    } catch ({code, message}) {
+      console.warn(`Error in example '${stateKey}': `, message);
+    }
+  },
+
+  render() {
+    return (
+      <UIExplorerPage title="DatePickerAndroid">
+        <UIExplorerBlock title="Simple date picker">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'simple', {date: this.state.simpleDate})}>
+            <Text style={styles.text}>{this.state.simpleText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Date picker with pre-set date">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})}>
+            <Text style={styles.text}>{this.state.presetText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Date picker with minDate">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'min', {
+              date: this.state.minDate,
+              minDate: new Date(),
+            })}>
+            <Text style={styles.text}>{this.state.minText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Date picker with maxDate">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'max', {
+              date: this.state.maxDate,
+              maxDate: new Date(),
+            })}>
+            <Text style={styles.text}>{this.state.maxText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Date picker with all options">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'all', {
+              date: this.state.allDate,
+              minDate: new Date(2020, 4, 1),
+              maxDate: new Date(2020, 4, 10),
+            })}>
+            <Text style={styles.text}>{this.state.allText}</Text>
+          </TouchableWithoutFeedback>
+          </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  text: {
+    color: 'black',
+  },
+});
+
+module.exports = DatePickerAndroidExample;

Examples/UIExplorer/ExampleTypes.js

@@ -18,7 +18,6 @@
 
 export type Example = {
   title: string,
-  /* $FlowFixMe(>=0.16.0) */
   render: () => ?ReactElement<any, any, any>,
   description?: string,
   platform?: string;

Examples/UIExplorer/ImageCapInsetsExample.js

@@ -46,6 +46,7 @@ var ImageCapInsetsExample = React.createClass({
           <Image
             source={require('image!story-background')}
             style={styles.storyBackground}
+            resizeMode={Image.resizeMode.stretch}
             capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
           />
         </View>

Examples/UIExplorer/ImageEditingExample.js

@@ -22,6 +22,7 @@ var {
   Image,
   ImageEditor,
   NativeModules,
+  Platform,
   ScrollView,
   StyleSheet,
   Text,
@@ -30,8 +31,6 @@ var {
   View,
 } = React;
 
-var RCTScrollViewConsts = UIManager.RCTScrollView.Constants;
-
 var PAGE_SIZE = 20;
 
 type ImageOffset = {
@@ -67,22 +66,21 @@ class SquareImageCropper extends React.Component {
     this._fetchRandomPhoto();
   }
 
-  _fetchRandomPhoto() {
-    CameraRoll.getPhotos(
-      {first: PAGE_SIZE},
-      (data) => {
-        if (!this._isMounted) {
-          return;
-        }
-        var edges = data.edges;
-        var edge = edges[Math.floor(Math.random() * edges.length)];
-        var randomPhoto = edge && edge.node && edge.node.image;
-        if (randomPhoto) {
-          this.setState({randomPhoto});
-        }
-      },
-      (error) => undefined
-    );
+  async _fetchRandomPhoto() {
+    try {
+      const data = await CameraRoll.getPhotos({first: PAGE_SIZE});
+      if (!this._isMounted) {
+        return;
+      }
+      var edges = data.edges;
+      var edge = edges[Math.floor(Math.random() * edges.length)];
+      var randomPhoto = edge && edge.node && edge.node.image;
+      if (randomPhoto) {
+        this.setState({randomPhoto});
+      }
+    } catch (error) {
+      console.warn("Can't get a photo from camera roll", error);
+    }
   }
 
   componentWillUnmount() {
@@ -190,29 +188,49 @@ class SquareImageCropper extends React.Component {
 }
 
 class ImageCropper extends React.Component {
-  _scaledImageSize: ImageSize;
   _contentOffset: ImageOffset;
+  _maximumZoomScale: number;
+  _minimumZoomScale: number;
+  _scaledImageSize: ImageSize;
+  _horizontal: boolean;
 
   componentWillMount() {
     // Scale an image to the minimum size that is large enough to completely
     // fill the crop box.
     var widthRatio = this.props.image.width / this.props.size.width;
     var heightRatio = this.props.image.height / this.props.size.height;
-    if (widthRatio < heightRatio) {
-      this._scaledImageSize = {
-        width: this.props.size.width,
-        height: this.props.image.height / widthRatio,
-      };
-    } else {
+    this._horizontal = widthRatio > heightRatio;
+    if (this._horizontal) {
       this._scaledImageSize = {
         width: this.props.image.width / heightRatio,
         height: this.props.size.height,
       };
+    } else {
+      this._scaledImageSize = {
+        width: this.props.size.width,
+        height: this.props.image.height / widthRatio,
+      };
+      if (Platform.OS === 'android') {
+        // hack to work around Android ScrollView a) not supporting zoom, and
+        // b) not supporting vertical scrolling when nested inside another
+        // vertical ScrollView (which it is, when displayed inside UIExplorer)
+        this._scaledImageSize.width *= 2;
+        this._scaledImageSize.height *= 2;
+        this._horizontal = true;
+      }
     }
     this._contentOffset = {
       x: (this._scaledImageSize.width - this.props.size.width) / 2,
       y: (this._scaledImageSize.height - this.props.size.height) / 2,
     };
+    this._maximumZoomScale = Math.min(
+      this.props.image.width / this._scaledImageSize.width,
+      this.props.image.height / this._scaledImageSize.height
+    );
+    this._minimumZoomScale = Math.max(
+      this.props.size.width / this._scaledImageSize.width,
+      this.props.size.height / this._scaledImageSize.height 
+    );
     this._updateTransformData(
       this._contentOffset,
       this._scaledImageSize,
@@ -248,19 +266,15 @@ class ImageCropper extends React.Component {
   }
 
   render() {
-    var decelerationRate =
-      RCTScrollViewConsts && RCTScrollViewConsts.DecelerationRate ?
-        RCTScrollViewConsts.DecelerationRate.Fast :
-        0;
-
     return (
       <ScrollView
         alwaysBounceVertical={true}
         automaticallyAdjustContentInsets={false}
         contentOffset={this._contentOffset}
-        decelerationRate={decelerationRate}
-        horizontal={true}
-        maximumZoomScale={3.0}
+        decelerationRate="fast"
+        horizontal={this._horizontal}
+        maximumZoomScale={this._maximumZoomScale}
+        minimumZoomScale={this._minimumZoomScale}
         onMomentumScrollEnd={this._onScroll.bind(this)}
         onScrollEndDrag={this._onScroll.bind(this)}
         showsHorizontalScrollIndicator={false}

Examples/UIExplorer/ImageExample.js

@@ -148,15 +148,15 @@ exports.examples = [
   },
   {
     title: 'Plain Static Image',
-    description: 'Static assets should be required by prefixing with `image!` ' +
-      'and are located in the app bundle.',
+    description: 'Static assets should be placed in the source code tree, and ' +
+    'required in the same way as JavaScript modules.',
     render: function() {
       return (
         <View style={styles.horizontal}>
-          <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
-          <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
-          <Image source={require('image!uie_comment_normal')} style={styles.icon} />
-          <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
+          <Image source={require('./uie_thumb_normal.png')} style={styles.icon} />
+          <Image source={require('./uie_thumb_selected.png')} style={styles.icon} />
+          <Image source={require('./uie_comment_normal.png')} style={styles.icon} />
+          <Image source={require('./uie_comment_highlighted.png')} style={styles.icon} />
         </View>
       );
     },
@@ -187,6 +187,20 @@ exports.examples = [
     },
     platform: 'ios',
   },
+  {
+    title: 'defaultSource',
+    description: 'Show a placeholder image when a network image is loading',
+    render: function() {
+      return (
+        <Image
+          defaultSource={require('./bunny.png')}
+          source={{uri: 'http://facebook.github.io/origami/public/images/birds.jpg'}}
+          style={styles.base}
+        />
+      );
+    },
+    platform: 'ios',
+  },
   {
     title: 'Border Color',
     render: function() {
@@ -320,19 +334,19 @@ exports.examples = [
         <View>
           <View style={styles.horizontal}>
             <Image
-              source={require('image!uie_thumb_normal')}
+              source={require('./uie_thumb_normal.png')}
               style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa' }]}
             />
             <Image
-              source={require('image!uie_thumb_normal')}
+              source={require('./uie_thumb_normal.png')}
               style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
             />
             <Image
-              source={require('image!uie_thumb_normal')}
+              source={require('./uie_thumb_normal.png')}
               style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
             />
             <Image
-              source={require('image!uie_thumb_normal')}
+              source={require('./uie_thumb_normal.png')}
               style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
             />
           </View>

Examples/UIExplorer/ListViewExample.js

@@ -30,7 +30,7 @@ var UIExplorerPage = require('./UIExplorerPage');
 
 var ListViewSimpleExample = React.createClass({
   statics: {
-    title: '<ListView> - Simple',
+    title: '<ListView>',
     description: 'Performant, scrollable list of data.'
   },
 
@@ -50,13 +50,14 @@ var ListViewSimpleExample = React.createClass({
   render: function() {
     return (
       <UIExplorerPage
-        title={this.props.navigator ? null : '<ListView> - Simple'}
+        title={this.props.navigator ? null : '<ListView>'}
         noSpacer={true}
         noScroll={true}>
         <ListView
           dataSource={this.state.dataSource}
           renderRow={this._renderRow}
           renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
+          renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
         />
       </UIExplorerPage>
     );
@@ -74,7 +75,6 @@ var ListViewSimpleExample = React.createClass({
               {rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
             </Text>
           </View>
-          <View style={styles.separator} />
         </View>
       </TouchableHighlight>
     );

Examples/UIExplorer/MapViewExample.js

@@ -290,9 +290,15 @@ exports.examples = [
     }
   },
   {
-    title: 'Map shows user location',
+    title: 'showsUserLocation + followUserLocation',
     render() {
-      return <MapView style={styles.map} showsUserLocation={true} />;
+      return (
+        <MapView
+          style={styles.map}
+          showsUserLocation={true}
+          followUserLocation={true}
+        />
+      );
     }
   },
   {
@@ -307,13 +313,27 @@ exports.examples = [
             }}>
             <Image
               style={{width:30, height:30}}
-              source={require('image!uie_thumb_selected')}
+              source={require('./uie_thumb_selected.png')}
             />
           </TouchableOpacity>
         ),
       }}/>;
     }
   },
+  {
+    title: 'Annotation focus example',
+    render() {
+      return <AnnotationExample style={styles.map} annotation={{
+        title: 'More Info...',
+        onFocus: () => {
+          alert('Annotation gets focus');
+        },
+        onBlur: () => {
+          alert('Annotation lost focus');
+        }
+      }}/>;
+    }
+  },
   {
     title: 'Draggable pin',
     render() {

Examples/UIExplorer/Navigator/BreadcrumbNavSample.js

@@ -15,7 +15,6 @@
 
 var React = require('react-native');
 var {
-  PixelRatio,
   Navigator,
   StyleSheet,
   ScrollView,
@@ -131,7 +130,7 @@ var styles = StyleSheet.create({
   button: {
     backgroundColor: 'white',
     padding: 15,
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#CDCDCD',
   },
   buttonText: {

Examples/UIExplorer/Navigator/JumpingNavSample.js

@@ -16,7 +16,6 @@
 var React = require('react-native');
 var {
   Navigator,
-  PixelRatio,
   StyleSheet,
   ScrollView,
   TabBarIOS,
@@ -185,7 +184,7 @@ var styles = StyleSheet.create({
   button: {
     backgroundColor: 'white',
     padding: 15,
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#CDCDCD',
   },
   buttonText: {

Examples/UIExplorer/Navigator/NavigationBarSample.js

@@ -16,7 +16,6 @@
 
 var React = require('react-native');
 var {
-  PixelRatio,
   Navigator,
   ScrollView,
   StyleSheet,
@@ -164,7 +163,7 @@ var styles = StyleSheet.create({
   button: {
     backgroundColor: 'white',
     padding: 15,
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#CDCDCD',
   },
   buttonText: {

Examples/UIExplorer/Navigator/NavigatorExample.js

@@ -16,7 +16,6 @@
 var React = require('react-native');
 var {
   Navigator,
-  PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
@@ -190,7 +189,7 @@ var styles = StyleSheet.create({
   button: {
     backgroundColor: 'white',
     padding: 15,
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#CDCDCD',
   },
   buttonText: {

Examples/UIExplorer/NavigatorIOSExample.js

@@ -20,7 +20,6 @@ var ViewExample = require('./ViewExample');
 var createExamplePage = require('./createExamplePage');
 var {
   AlertIOS,
-  PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
@@ -227,7 +226,7 @@ var styles = StyleSheet.create({
   },
   line: {
     backgroundColor: '#bbbbbb',
-    height: 1 / PixelRatio.get(),
+    height: StyleSheet.hairlineWidth,
   },
   row: {
     backgroundColor: 'white',
@@ -236,7 +235,7 @@ var styles = StyleSheet.create({
     paddingVertical: 15,
   },
   separator: {
-    height: 1 / PixelRatio.get(),
+    height: StyleSheet.hairlineWidth,
     backgroundColor: '#bbbbbb',
     marginLeft: 15,
   },

Examples/UIExplorer/PickerAndroidExample.js

@@ -0,0 +1,140 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+const React = require('react-native');
+const StyleSheet = require('StyleSheet');
+const UIExplorerBlock = require('UIExplorerBlock');
+const UIExplorerPage = require('UIExplorerPage');
+
+const {
+  Picker,
+  Text,
+  TouchableWithoutFeedback,
+} = React;
+const Item = Picker.Item;
+
+const PickerExample = React.createClass({
+
+  statics: {
+    title: '<Picker>',
+    description: 'Provides multiple options to choose from, using either a dropdown menu or a dialog.',
+  },
+
+  getInitialState: function() {
+    return {
+      selected1: 'key1',
+      selected2: 'key1',
+      selected3: 'key1',
+      color: 'red',
+      mode: Picker.MODE_DIALOG,
+    };
+  },
+
+  displayName: 'Android Picker',
+
+  render: function() {
+    return (
+      <UIExplorerPage title="<Picker>">
+        <UIExplorerBlock title="Basic Picker">
+          <Picker
+            style={styles.picker}
+            selectedValue={this.state.selected1}
+            onValueChange={this.onValueChange.bind(this, 'selected1')}>
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Disabled picker">
+          <Picker style={styles.picker} enabled={false} selectedValue={this.state.selected1}>
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Dropdown Picker">
+          <Picker
+            style={styles.picker}
+            selectedValue={this.state.selected2}
+            onValueChange={this.onValueChange.bind(this, 'selected2')}
+            mode="dropdown">
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Picker with prompt message">
+          <Picker
+            style={styles.picker}
+            selectedValue={this.state.selected3}
+            onValueChange={this.onValueChange.bind(this, 'selected3')}
+            prompt="Pick one, just one">
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Picker with no listener">
+          <Picker style={styles.picker}>
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+          <Text>
+            Cannot change the value of this picker because it doesn't update selectedValue.
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Colorful pickers">
+          <Picker
+            style={[styles.picker, {color: 'white', backgroundColor: '#333'}]}
+            selectedValue={this.state.color}
+            onValueChange={this.onValueChange.bind(this, 'color')}
+            mode="dropdown">
+            <Item label="red" color="red" value="red" />
+            <Item label="green" color="green" value="green" />
+            <Item label="blue" color="blue" value="blue" />
+          </Picker>
+          <Picker
+            style={styles.picker}
+            selectedValue={this.state.color}
+            onValueChange={this.onValueChange.bind(this, 'color')}
+            mode="dialog">
+            <Item label="red" color="red" value="red" />
+            <Item label="green" color="green" value="green" />
+            <Item label="blue" color="blue" value="blue" />
+          </Picker>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+
+  changeMode: function() {
+    const newMode = this.state.mode === Picker.MODE_DIALOG
+        ? Picker.MODE_DROPDOWN
+        : Picker.MODE_DIALOG;
+    this.setState({mode: newMode});
+  },
+
+  onValueChange: function(key: string, value: string) {
+    const newState = {};
+    newState[key] = value;
+    this.setState(newState);
+  },
+});
+
+var styles = StyleSheet.create({
+  picker: {
+    width: 100,
+  },
+});
+
+module.exports = PickerExample;

Examples/UIExplorer/ProgressBarAndroidExample.android.js

@@ -60,6 +60,10 @@ var ProgressBarAndroidExample = React.createClass({
           <ProgressBar />
         </UIExplorerBlock>
 
+        <UIExplorerBlock title="Normal ProgressBar">
+          <ProgressBar styleAttr="Normal" />
+        </UIExplorerBlock>
+
         <UIExplorerBlock title="Small ProgressBar">
           <ProgressBar styleAttr="Small" />
         </UIExplorerBlock>

Examples/UIExplorer/PullToRefreshViewAndroidExample.android.js

@@ -72,7 +72,8 @@ const PullToRefreshViewAndroidExample = React.createClass({
       isRefreshing: false,
       loaded: 0,
       rowData: Array.from(new Array(20)).map(
-        (val, i) => {return {text: 'Initial row' + i, clicks: 0}}),
+        (val, i) => ({text: 'Initial row' + i, clicks: 0})
+      ),
     };
   },
 
@@ -107,10 +108,10 @@ const PullToRefreshViewAndroidExample = React.createClass({
     setTimeout(() => {
       // prepend 10 items
       const rowData = Array.from(new Array(10))
-      .map((val, i) => {return {
+      .map((val, i) => ({
         text: 'Loaded row' + (+this.state.loaded + i),
         clicks: 0,
-      }})
+      }))
       .concat(this.state.rowData);
 
       this.setState({

Examples/UIExplorer/RefreshControlExample.js

@@ -69,7 +69,7 @@ const RefreshControlExample = React.createClass({
       isRefreshing: false,
       loaded: 0,
       rowData: Array.from(new Array(20)).map(
-        (val, i) => ({text: 'Initial row' + i, clicks: 0})),
+        (val, i) => ({text: 'Initial row ' + i, clicks: 0})),
     };
   },
 
@@ -108,7 +108,7 @@ const RefreshControlExample = React.createClass({
       // prepend 10 items
       const rowData = Array.from(new Array(10))
       .map((val, i) => ({
-        text: 'Loaded row' + (+this.state.loaded + i),
+        text: 'Loaded row ' + (+this.state.loaded + i),
         clicks: 0,
       }))
       .concat(this.state.rowData);

Examples/UIExplorer/ScrollViewExample.js

@@ -19,6 +19,8 @@ var React = require('react-native');
 var {
   ScrollView,
   StyleSheet,
+  Text,
+  TouchableOpacity,
   View,
   Image
 } = React;
@@ -31,27 +33,45 @@ exports.examples = [
   title: '<ScrollView>',
   description: 'To make content scrollable, wrap it within a <ScrollView> component',
   render: function() {
+    var _scrollView: ScrollView;
     return (
-      <ScrollView
-        automaticallyAdjustContentInsets={false}
-        onScroll={() => { console.log('onScroll!'); }}
-        scrollEventThrottle={200}
-        style={styles.scrollView}>
-        {THUMBS.map(createThumbRow)}
-      </ScrollView>
+      <View>
+        <ScrollView
+          ref={(scrollView) => { _scrollView = scrollView; }}
+          automaticallyAdjustContentInsets={false}
+          onScroll={() => { console.log('onScroll!'); }}
+          scrollEventThrottle={200}
+          style={styles.scrollView}>
+          {THUMBS.map(createThumbRow)}
+        </ScrollView>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => { _scrollView.scrollTo({y: 0}); }}>
+          <Text>Scroll to top</Text>
+        </TouchableOpacity>
+      </View>
     );
   }
 }, {
   title: '<ScrollView> (horizontal = true)',
   description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
   render: function() {
+    var _scrollView: ScrollView;
     return (
-      <ScrollView
-        automaticallyAdjustContentInsets={false}
-        horizontal={true}
-        style={[styles.scrollView, styles.horizontalScrollView]}>
-        {THUMBS.map(createThumbRow)}
-      </ScrollView>
+      <View>
+        <ScrollView
+          ref={(scrollView) => { _scrollView = scrollView; }}
+          automaticallyAdjustContentInsets={false}
+          horizontal={true}
+          style={[styles.scrollView, styles.horizontalScrollView]}>
+          {THUMBS.map(createThumbRow)}
+        </ScrollView>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => { _scrollView.scrollTo({x: 0}); }}>
+          <Text>Scroll to start</Text>
+        </TouchableOpacity>
+      </View>
     );
   }
 }];

Examples/UIExplorer/StatusBarExample.js

@@ -0,0 +1,206 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+const React = require('react-native');
+const {
+  StyleSheet,
+  View,
+  Text,
+  TouchableHighlight,
+  StatusBar,
+} = React;
+
+type BarStyle = 'default' | 'light-content';
+type ShowHideTransition = 'fade' | 'slide';
+
+type State = {
+  animated: boolean,
+  backgroundColor: string,
+  hidden?: boolean,
+  showHideTransition: ShowHideTransition,
+  translucent?: boolean,
+  barStyle?: BarStyle,
+  networkActivityIndicatorVisible?: boolean
+};
+
+exports.framework = 'React';
+exports.title = '<StatusBar>';
+exports.description = 'Component for controlling the status bar';
+
+const colors = [
+  '#ff0000',
+  '#00ff00',
+  '#0000ff',
+];
+
+const barStyles = [
+  'default',
+  'light-content',
+];
+
+const showHideTransitions = [
+  'fade',
+  'slide',
+];
+
+const StatusBarExample = React.createClass({
+  getInitialState(): State {
+    return {
+      animated: true,
+      backgroundColor: this._getValue(colors, 0),
+      showHideTransition: this._getValue(showHideTransitions, 0),
+    };
+  },
+
+  _colorIndex: 0,
+  _barStyleIndex: 0,
+  _showHideTransitionIndex: 0,
+
+  _getValue(values: Array<any>, index: number): any {
+    return values[index % values.length];
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          backgroundColor={this.state.backgroundColor}
+          translucent={this.state.translucent}
+          hidden={this.state.hidden}
+          showHideTransition={this.state.showHideTransition}
+          animated={this.state.animated}
+          barStyle={this.state.barStyle}
+          networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}
+        />
+        <View>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() => this.setState({animated: !this.state.animated})}>
+            <View style={styles.button}>
+              <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+        <View>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() => this.setState({hidden: !this.state.hidden})}>
+            <View style={styles.button}>
+              <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+        <Text style={styles.title}>iOS</Text>
+        <View>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() => {
+              this._barStyleIndex++;
+              this.setState({barStyle: this._getValue(barStyles, this._barStyleIndex)});
+            }}>
+            <View style={styles.button}>
+              <Text>style: '{this._getValue(barStyles, this._barStyleIndex)}'</Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+        <View>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() => this.setState({
+              networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible,
+            })}>
+            <View style={styles.button}>
+              <Text>
+                networkActivityIndicatorVisible:
+                {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
+              </Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+        <View>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() => {
+              this._showHideTransitionIndex++;
+              this.setState({
+                showHideTransition:
+                this._getValue(showHideTransitions, this._showHideTransitionIndex),
+              });
+            }}>
+            <View style={styles.button}>
+              <Text>
+                showHideTransition:
+                '{this._getValue(showHideTransitions, this._showHideTransitionIndex)}'
+              </Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+        <Text style={styles.title}>Android</Text>
+        <View>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() => {
+              this._colorIndex++;
+              this.setState({backgroundColor: this._getValue(colors, this._colorIndex)});
+            }}>
+            <View style={styles.button}>
+              <Text>backgroundColor: '{this._getValue(colors, this._colorIndex)}'</Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+        <View>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() => {
+              this.setState({
+                translucent: !this.state.translucent,
+                backgroundColor: !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black',
+              });
+            }}>
+            <View style={styles.button}>
+              <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+      </View>
+    );
+  },
+});
+
+exports.examples = [{
+  title: 'Status Bar',
+  render() {
+    return <StatusBarExample />;
+  },
+}];
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    borderRadius: 5,
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+  title: {
+    marginTop: 16,
+    marginBottom: 8,
+    fontWeight: 'bold',
+  }
+});

Examples/UIExplorer/SwitchAndroidExample.android.js

@@ -1,70 +0,0 @@
-/**
- * Copyright 2004-present Facebook. All Rights Reserved.
- */
-'use strict';
-
-var React = require('React');
-
-var SwitchAndroid = require('SwitchAndroid');
-var Text = require('Text');
-var UIExplorerBlock = require('UIExplorerBlock');
-var UIExplorerPage = require('UIExplorerPage');
-
-var SwitchAndroidExample = React.createClass({
-  statics: {
-    title: '<SwitchAndroid>',
-    description: 'Standard Android two-state toggle component.'
-  },
-
-  getInitialState : function() {
-    return {
-      trueSwitchIsOn: true,
-      falseSwitchIsOn: false,
-      colorTrueSwitchIsOn: true,
-      colorFalseSwitchIsOn: false,
-      eventSwitchIsOn: false,
-    };
-  },
-
-  render: function() {
-    return (
-      <UIExplorerPage title="<SwitchAndroid>">
-        <UIExplorerBlock title="Switches can be set to true or false">
-          <SwitchAndroid
-            onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
-            style={{marginBottom: 10}}
-            value={this.state.falseSwitchIsOn} />
-          <SwitchAndroid
-            onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
-            value={this.state.trueSwitchIsOn} />
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Switches can be disabled">
-          <SwitchAndroid
-            disabled={true}
-            style={{marginBottom: 10}}
-            value={true} />
-          <SwitchAndroid
-            disabled={true}
-            value={false} />
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Change events can be detected">
-          <SwitchAndroid
-            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
-            style={{marginBottom: 10}}
-            value={this.state.eventSwitchIsOn} />
-          <SwitchAndroid
-            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
-            style={{marginBottom: 10}}
-            value={this.state.eventSwitchIsOn} />
-          <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Switches are controlled components">
-          <SwitchAndroid />
-          <SwitchAndroid value={true} />
-        </UIExplorerBlock>
-      </UIExplorerPage>
-    );
-  }
-});
-
-module.exports = SwitchAndroidExample;

Examples/UIExplorer/SwitchExample.js

@@ -17,7 +17,7 @@
 
 var React = require('react-native');
 var {
-  SwitchIOS,
+  Switch,
   Text,
   View
 } = React;
@@ -32,11 +32,11 @@ var BasicSwitchExample = React.createClass({
   render() {
     return (
       <View>
-        <SwitchIOS
+        <Switch
           onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
           style={{marginBottom: 10}}
           value={this.state.falseSwitchIsOn} />
-        <SwitchIOS
+        <Switch
           onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
           value={this.state.trueSwitchIsOn} />
       </View>
@@ -48,11 +48,11 @@ var DisabledSwitchExample = React.createClass({
   render() {
     return (
       <View>
-        <SwitchIOS
+        <Switch
           disabled={true}
           style={{marginBottom: 10}}
           value={true} />
-        <SwitchIOS
+        <Switch
           disabled={true}
           value={false} />
       </View>
@@ -70,14 +70,14 @@ var ColorSwitchExample = React.createClass({
   render() {
     return (
       <View>
-        <SwitchIOS
+        <Switch
           onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
           onTintColor="#00ff00"
           style={{marginBottom: 10}}
           thumbTintColor="#0000ff"
           tintColor="#ff0000"
           value={this.state.colorFalseSwitchIsOn} />
-        <SwitchIOS
+        <Switch
           onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
           onTintColor="#00ff00"
           thumbTintColor="#0000ff"
@@ -99,22 +99,22 @@ var EventSwitchExample = React.createClass({
     return (
       <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
         <View>
-          <SwitchIOS
+          <Switch
             onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
             style={{marginBottom: 10}}
             value={this.state.eventSwitchIsOn} />
-          <SwitchIOS
+          <Switch
             onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
             style={{marginBottom: 10}}
             value={this.state.eventSwitchIsOn} />
             <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
         </View>
         <View>
-          <SwitchIOS
+          <Switch
             onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
             style={{marginBottom: 10}}
             value={this.state.eventSwitchRegressionIsOn} />
-          <SwitchIOS
+          <Switch
             onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
             style={{marginBottom: 10}}
             value={this.state.eventSwitchRegressionIsOn} />
@@ -125,10 +125,7 @@ var EventSwitchExample = React.createClass({
   }
 });
 
-exports.title = '<SwitchIOS>';
-exports.displayName = 'SwitchExample';
-exports.description = 'Native boolean input';
-exports.examples = [
+var examples = [
   {
     title: 'Switches can be set to true or false',
     render(): ReactElement { return <BasicSwitchExample />; }
@@ -137,16 +134,24 @@ exports.examples = [
     title: 'Switches can be disabled',
     render(): ReactElement { return <DisabledSwitchExample />; }
   },
-  {
-    title: 'Custom colors can be provided',
-    render(): ReactElement { return <ColorSwitchExample />; }
-  },
   {
     title: 'Change events can be detected',
     render(): ReactElement { return <EventSwitchExample />; }
   },
   {
     title: 'Switches are controlled components',
-    render(): ReactElement { return <SwitchIOS />; }
+    render(): ReactElement { return <Switch />; }
   }
 ];
+
+if (React.Platform.OS === 'ios') {
+  examples.push({
+    title: 'Custom colors can be provided',
+    render(): ReactElement { return <ColorSwitchExample />; }
+  });
+}
+
+exports.title = '<Switch>';
+exports.displayName = 'SwitchExample';
+exports.description = 'Native boolean input';
+exports.examples = examples;

Examples/UIExplorer/TextExample.ios.js

@@ -419,7 +419,7 @@ exports.examples = [
     return (
       <View>
         <Text>
-          This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
+          This text contains an inline image <Image source={require('./flux.png')} style={{width: 30, height: 11, resizeMode: 'cover'}}/>. Neat, huh?
         </Text>
       </View>
     );

Examples/UIExplorer/TextInputExample.android.js

@@ -72,6 +72,29 @@ var TextEventsExample = React.createClass({
   }
 });
 
+class AutoExpandingTextInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: '', height: 0};
+  }
+  render() {
+    return (
+      <TextInput
+        {...this.props}
+        multiline={true}
+        onChange={(event) => {
+          this.setState({
+            text: event.nativeEvent.text,
+            height: event.nativeEvent.contentSize.height,
+          });
+        }}
+        style={[styles.default, {height: Math.max(35, this.state.height)}]}
+        value={this.state.text}
+      />
+    );
+  }
+}
+
 class RewriteExample extends React.Component {
   constructor(props) {
     super(props);
@@ -185,7 +208,13 @@ exports.examples = [
   {
     title: 'Auto-focus',
     render: function() {
-      return <TextInput autoFocus={true} style={styles.singleLine} />;
+      return (
+        <TextInput
+          autoFocus={true}
+          style={styles.singleLine}
+          accessibilityLabel="I am the accessibility label for text input"
+        />
+      );
     }
   },
   {
@@ -242,6 +271,7 @@ exports.examples = [
         'default',
         'email-address',
         'numeric',
+        'phone-pad',
       ];
       var examples = keyboardTypes.map((type) => {
         return (
@@ -298,6 +328,11 @@ exports.examples = [
               Darker backgroundColor
             </Text>
           </TextInput>
+          <TextInput
+            defaultValue="Highlight Color is red"
+            selectionColor={'red'}
+            style={styles.singleLine}>
+          </TextInput>
         </View>
       );
     }
@@ -347,25 +382,19 @@ exports.examples = [
             placeholder="multiline, aligned top-left"
             placeholderTextColor="red"
             multiline={true}
-            textAlign="start"
-            textAlignVertical="top"
-            style={styles.multiline}
+            style={[styles.multiline, {textAlign: "left", textAlignVertical: "top"}]}
           />
           <TextInput
             autoCorrect={true}
             placeholder="multiline, aligned center"
             placeholderTextColor="green"
             multiline={true}
-            textAlign="center"
-            textAlignVertical="center"
-            style={[styles.multiline]}
+            style={[styles.multiline, {textAlign: "center", textAlignVertical: "center"}]}
           />
           <TextInput
             autoCorrect={true}
             multiline={true}
-            textAlign="end"
-            textAlignVertical="bottom"
-            style={[styles.multiline, {color: 'blue'}]}>
+            style={[styles.multiline, {color: 'blue'}, {textAlign: "right", textAlignVertical: "bottom"}]}>
             <Text style={styles.multiline}>multiline with children, aligned bottom-right</Text>
           </TextInput>
         </View>
@@ -390,6 +419,20 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Auto-expanding',
+    render: function() {
+      return (
+        <View>
+          <AutoExpandingTextInput
+            placeholder="height increases with content"
+            enablesReturnKeyAutomatically={true}
+            returnKeyType="done"
+          />
+        </View>
+      );
+    }
+  },
   {
     title: 'Attributed text',
     render: function() {

Examples/UIExplorer/TextInputExample.ios.js

@@ -96,6 +96,29 @@ var TextEventsExample = React.createClass({
   }
 });
 
+class AutoExpandingTextInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: '', height: 0};
+  }
+  render() {
+    return (
+      <TextInput
+        {...this.props}
+        multiline={true}
+        onChange={(event) => {
+          this.setState({
+            text: event.nativeEvent.text,
+            height: event.nativeEvent.contentSize.height,
+          });
+        }}
+        style={[styles.default, {height: Math.max(35, this.state.height)}]}
+        value={this.state.text}
+      />
+    );
+  }
+}
+
 class RewriteExample extends React.Component {
   constructor(props) {
     super(props);
@@ -202,52 +225,52 @@ class TokenizedTextExample extends React.Component {
 
 var BlurOnSubmitExample = React.createClass({
   focusNextField(nextField) {
-    this.refs[nextField].focus()
+    this.refs[nextField].focus();
   },
 
   render: function() {
     return (
       <View>
         <TextInput
-          ref='1'
+          ref="1"
           style={styles.default}
-          placeholder='blurOnSubmit = false'
-          returnKeyType='next'
+          placeholder="blurOnSubmit = false"
+          returnKeyType="next"
           blurOnSubmit={false}
           onSubmitEditing={() => this.focusNextField('2')}
         />
         <TextInput
-          ref='2'
+          ref="2"
           style={styles.default}
-          keyboardType='email-address'
-          placeholder='blurOnSubmit = false'
-          returnKeyType='next'
+          keyboardType="email-address"
+          placeholder="blurOnSubmit = false"
+          returnKeyType="next"
           blurOnSubmit={false}
           onSubmitEditing={() => this.focusNextField('3')}
         />
         <TextInput
-          ref='3'
+          ref="3"
           style={styles.default}
-          keyboardType='url'
-          placeholder='blurOnSubmit = false'
-          returnKeyType='next'
+          keyboardType="url"
+          placeholder="blurOnSubmit = false"
+          returnKeyType="next"
           blurOnSubmit={false}
           onSubmitEditing={() => this.focusNextField('4')}
         />
         <TextInput
-          ref='4'
+          ref="4"
           style={styles.default}
-          keyboardType='numeric'
-          placeholder='blurOnSubmit = false'
+          keyboardType="numeric"
+          placeholder="blurOnSubmit = false"
           blurOnSubmit={false}
           onSubmitEditing={() => this.focusNextField('5')}
         />
         <TextInput
-          ref='5'
+          ref="5"
           style={styles.default}
-          keyboardType='numbers-and-punctuation'
-          placeholder='blurOnSubmit = true'
-          returnKeyType='done'
+          keyboardType="numbers-and-punctuation"
+          placeholder="blurOnSubmit = true"
+          returnKeyType="done"
         />
       </View>
     );
@@ -325,7 +348,13 @@ exports.examples = [
   {
     title: 'Auto-focus',
     render: function() {
-      return <TextInput autoFocus={true} style={styles.default} />;
+      return (
+        <TextInput
+          autoFocus={true}
+          style={styles.default}
+          accessibilityLabel="I am the accessibility label for text input"
+        />
+      );
     }
   },
   {
@@ -335,7 +364,7 @@ exports.examples = [
     }
   },
   {
-    title: "Live Re-Write (no spaces allowed)",
+    title: 'Live Re-Write (no spaces allowed)',
     render: function() {
       return <RewriteExampleInvalidCharacters />;
     }
@@ -513,6 +542,25 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Colored highlight/cursor for text input',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={styles.default}
+            selectionColor={"green"}
+            defaultValue="Highlight me"
+          />
+          <TextInput
+            style={styles.default}
+            selectionColor={"rgba(86, 76, 205, 1)"}
+            defaultValue="Highlight me"
+          />
+        </View>
+      );
+    }
+  },
   {
     title: 'Clear button mode',
     render: function () {
@@ -582,8 +630,8 @@ exports.examples = [
         <View>
           <TextInput
             style={styles.multiline}
-            placeholder='blurOnSubmit = true'
-            returnKeyType='next'
+            placeholder="blurOnSubmit = true"
+            returnKeyType="next"
             blurOnSubmit={true}
             multiline={true}
             onSubmitEditing={event => alert(event.nativeEvent.text)}
@@ -630,6 +678,20 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Auto-expanding',
+    render: function() {
+      return (
+        <View>
+          <AutoExpandingTextInput
+            placeholder="height increases with content"
+            enablesReturnKeyAutomatically={true}
+            returnKeyType="done"
+          />
+        </View>
+      );
+    }
+  },
   {
     title: 'Attributed text',
     render: function() {

Examples/UIExplorer/TimePickerAndroidExample.js

@@ -0,0 +1,112 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  TimePickerAndroid,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+} = React;
+
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var TimePickerAndroidExample = React.createClass({
+
+  statics: {
+    title: 'TimePickerAndroid',
+    description: 'Standard Android time picker dialog',
+  },
+
+  getInitialState() {
+    // *Text, *Hour and *Minute are set by successCallback -- this updates the text with the time
+    // picked by the user and makes it so the next time they open it the hour and minute they picked
+    // before is displayed.
+    return {
+      isoFormatText: 'pick a time (24-hour format)',
+      presetHour: 4,
+      presetMinute: 4,
+      presetText: 'pick a time, default: 4:04AM',
+      simpleText: 'pick a time',
+    };
+  },
+
+  async showPicker(stateKey, options) {
+    try {
+      const {action, minute, hour} = await TimePickerAndroid.open(options);
+      var newState = {};
+      if (action === TimePickerAndroid.timeSetAction) {
+        newState[stateKey + 'Text'] = _formatTime(hour, minute);
+        newState[stateKey + 'Hour'] = hour;
+        newState[stateKey + 'Minute'] = minute;
+      } else if (action === TimePickerAndroid.dismissedAction) {
+        newState[stateKey + 'Text'] = 'dismissed';
+      }
+      this.setState(newState);
+    } catch ({code, message}) {
+      console.warn(`Error in example '${stateKey}': `, message);
+    }
+  },
+
+  render() {
+    return (
+      <UIExplorerPage title="TimePickerAndroid">
+        <UIExplorerBlock title="Simple time picker">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'simple')}>
+            <Text style={styles.text}>{this.state.simpleText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Time picker with pre-set time">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'preset', {
+              hour: this.state.presetHour,
+              minute: this.state.presetMinute,
+            })}>
+            <Text style={styles.text}>{this.state.presetText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Time picker with 24-hour time format">
+          <TouchableWithoutFeedback
+            onPress={this.showPicker.bind(this, 'isoFormat', {
+              hour: this.state.isoFormatHour,
+              minute: this.state.isoFormatMinute,
+              is24Hour: true,
+            })}>
+            <Text style={styles.text}>{this.state.isoFormatText}</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+});
+
+/**
+ * Returns e.g. '3:05'.
+ */
+function _formatTime(hour, minute) {
+  return hour + ':' + (minute < 10 ? '0' + minute : minute);
+}
+
+var styles = StyleSheet.create({
+  text: {
+    color: 'black',
+  },
+});
+
+module.exports = TimePickerAndroidExample;
+

Examples/UIExplorer/TouchableExample.js

@@ -23,6 +23,7 @@ var {
   Text,
   TouchableHighlight,
   TouchableOpacity,
+  UIManager,
   View,
 } = React;
 
@@ -85,6 +86,13 @@ exports.examples = [
   render: function(): ReactElement {
     return <TouchableDelayEvents />;
   },
+}, {
+  title: '3D Touch / Force Touch',
+  description: 'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',
+  render: function(): ReactElement {
+    return <ForceTouchExample />;
+  },
+  platform: 'ios',
 }];
 
 var TextOnPressBox = React.createClass({
@@ -133,18 +141,21 @@ var TouchableFeedbackEvents = React.createClass({
     return (
       <View testID="touchable_feedback_events">
         <View style={[styles.row, {justifyContent: 'center'}]}>
-        <TouchableOpacity
-          style={styles.wrapper}
-          testID="touchable_feedback_events_button"
-          onPress={() => this._appendEvent('press')}
-          onPressIn={() => this._appendEvent('pressIn')}
-          onPressOut={() => this._appendEvent('pressOut')}
-          onLongPress={() => this._appendEvent('longPress')}>
-          <Text style={styles.button}>
-            Press Me
-          </Text>
-        </TouchableOpacity>
-      </View>
+          <TouchableOpacity
+            style={styles.wrapper}
+            testID="touchable_feedback_events_button"
+            accessibilityLabel="touchable feedback events"
+            accessibilityTraits="button"
+            accessibilityComponentType="button"
+            onPress={() => this._appendEvent('press')}
+            onPressIn={() => this._appendEvent('pressIn')}
+            onPressOut={() => this._appendEvent('pressOut')}
+            onLongPress={() => this._appendEvent('longPress')}>
+            <Text style={styles.button}>
+              Press Me
+            </Text>
+          </TouchableOpacity>
+        </View>
         <View testID="touchable_feedback_events_console" style={styles.eventLogBox}>
           {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
         </View>
@@ -169,21 +180,21 @@ var TouchableDelayEvents = React.createClass({
     return (
       <View testID="touchable_delay_events">
         <View style={[styles.row, {justifyContent: 'center'}]}>
-        <TouchableOpacity
-          style={styles.wrapper}
-          testID="touchable_delay_events_button"
-          onPress={() => this._appendEvent('press')}
-          delayPressIn={400}
-          onPressIn={() => this._appendEvent('pressIn - 400ms delay')}
-          delayPressOut={1000}
-          onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
-          delayLongPress={800}
-          onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
-          <Text style={styles.button}>
-            Press Me
-          </Text>
-        </TouchableOpacity>
-      </View>
+          <TouchableOpacity
+            style={styles.wrapper}
+            testID="touchable_delay_events_button"
+            onPress={() => this._appendEvent('press')}
+            delayPressIn={400}
+            onPressIn={() => this._appendEvent('pressIn - 400ms delay')}
+            delayPressOut={1000}
+            onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
+            delayLongPress={800}
+            onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
+            <Text style={styles.button}>
+              Press Me
+            </Text>
+          </TouchableOpacity>
+        </View>
         <View style={styles.eventLogBox} testID="touchable_delay_events_console">
           {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
         </View>
@@ -198,6 +209,40 @@ var TouchableDelayEvents = React.createClass({
   },
 });
 
+var ForceTouchExample = React.createClass({
+  getInitialState: function() {
+    return {
+      force: 0,
+    };
+  },
+  _renderConsoleText: function() {
+    return View.forceTouchAvailable ?
+      'Force: ' + this.state.force.toFixed(3) :
+      '3D Touch is not available on this device';
+  },
+  render: function() {
+    return (
+      <View testID="touchable_3dtouch_event">
+        <View style={styles.forceTouchBox} testID="touchable_3dtouch_output">
+          <Text>{this._renderConsoleText()}</Text>
+        </View>
+        <View style={[styles.row, {justifyContent: 'center'}]}>
+          <View
+            style={styles.wrapper}
+            testID="touchable_3dtouch_button"
+            onStartShouldSetResponder={() => true}
+            onResponderMove={(event) => this.setState({force: event.nativeEvent.force})}
+            onResponderRelease={(event) => this.setState({force: 0})}>
+            <Text style={styles.button}>
+              Press Me
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  },
+});
+
 var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
 
 var styles = StyleSheet.create({
@@ -229,7 +274,7 @@ var styles = StyleSheet.create({
   logBox: {
     padding: 20,
     margin: 10,
-    borderWidth: 1 / PixelRatio.get(),
+    borderWidth: StyleSheet.hairlineWidth,
     borderColor: '#f0f0f0',
     backgroundColor: '#f9f9f9',
   },
@@ -237,10 +282,18 @@ var styles = StyleSheet.create({
     padding: 10,
     margin: 10,
     height: 120,
-    borderWidth: 1 / PixelRatio.get(),
+    borderWidth: StyleSheet.hairlineWidth,
     borderColor: '#f0f0f0',
     backgroundColor: '#f9f9f9',
   },
+  forceTouchBox: {
+    padding: 10,
+    margin: 10,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+    alignItems: 'center',
+  },
   textBlock: {
     fontWeight: '500',
     color: 'blue',

Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer.xcscheme

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
    LastUpgradeVersion = "0700"
-   version = "1.8">
+   version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
       buildImplicitDependencies = "YES">
@@ -51,10 +51,10 @@
       </BuildActionEntries>
    </BuildAction>
    <TestAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      buildConfiguration = "Debug">
+      shouldUseLaunchSchemeArgsEnv = "YES">
       <Testables>
          <TestableReference
             skipped = "NO">
@@ -90,11 +90,11 @@
       </AdditionalOptions>
    </TestAction>
    <LaunchAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Debug"
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
       debugServiceExtension = "internal"
@@ -113,10 +113,10 @@
       </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
+      buildConfiguration = "Release"
       shouldUseLaunchSchemeArgsEnv = "YES"
       savedToolIdentifier = ""
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Release"
       debugDocumentVersioning = "YES">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">

Examples/UIExplorer/UIExplorer/Images.xcassets/uie_comment_highlighted.imageset/Contents.json

@@ -1,21 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x",
-      "filename" : "uie_comment_highlighted@2x.png"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

Examples/UIExplorer/UIExplorer/Images.xcassets/uie_comment_normal.imageset/Contents.json

@@ -1,21 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x",
-      "filename" : "uie_comment_normal@2x.png"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

Examples/UIExplorer/UIExplorer/Images.xcassets/uie_thumb_normal.imageset/Contents.json

@@ -1,21 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x",
-      "filename" : "uie_thumb_normal@2x.png"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

Examples/UIExplorer/UIExplorer/Images.xcassets/uie_thumb_selected.imageset/Contents.json

@@ -1,21 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x",
-      "filename" : "uie_thumb_selected@2x.png"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

Examples/UIExplorer/UIExplorerApp.android.js

@@ -25,6 +25,7 @@ var {
   StyleSheet,
   ToolbarAndroid,
   View,
+  StatusBar,
 } = React;
 var UIExplorerList = require('./UIExplorerList.android');
 
@@ -98,6 +99,9 @@ var UIExplorerApp = React.createClass({
     var Component = this.state.example.component;
     return (
       <View style={styles.container}>
+        <StatusBar
+          backgroundColor="#589c90"
+        />
         <ToolbarAndroid
           logo={require('image!launcher_icon')}
           navIcon={require('image!ic_menu_black_24dp')}

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -24,7 +24,8 @@ var {
   StyleSheet,
   Text,
   TouchableHighlight,
-  View
+  View,
+  StatusBar,
 } = React;
 
 var UIExplorerApp = React.createClass({
@@ -48,20 +49,23 @@ var UIExplorerApp = React.createClass({
     }
 
     return (
-      <NavigatorIOS
-        style={styles.container}
-        initialRoute={{
-          title: 'UIExplorer',
-          component: UIExplorerList,
-          passProps: {
-            onExternalExampleRequested: (example) => {
-              this.setState({ openExternalExample: example, });
-            },
-          }
-        }}
-        itemWrapperStyle={styles.itemWrapper}
-        tintColor="#008888"
-      />
+      <View style={{flex: 1}}>
+        <StatusBar barStyle="default" />
+        <NavigatorIOS
+          style={styles.container}
+          initialRoute={{
+            title: 'UIExplorer',
+            component: UIExplorerList,
+            passProps: {
+              onExternalExampleRequested: (example) => {
+                this.setState({ openExternalExample: example, });
+              },
+            }
+          }}
+          itemWrapperStyle={styles.itemWrapper}
+          tintColor="#008888"
+        />
+      </View>
     );
   }
 });

Examples/UIExplorer/UIExplorerList.android.js

@@ -25,11 +25,13 @@ var UIExplorerListBase = require('./UIExplorerListBase');
 var COMPONENTS = [
   require('./ImageExample'),
   require('./ListViewExample'),
+  require('./PickerAndroidExample'),
   require('./ProgressBarAndroidExample'),
-  require('./ScrollViewSimpleExample'),
-  require('./SwitchAndroidExample'),
-  require('./RefreshControlExample'),
   require('./PullToRefreshViewAndroidExample.android'),
+  require('./RefreshControlExample'),
+  require('./ScrollViewSimpleExample'),
+  require('./StatusBarExample'),
+  require('./SwitchExample'),
   require('./TextExample.android'),
   require('./TextInputExample.android'),
   require('./ToolbarAndroidExample'),
@@ -42,15 +44,20 @@ var COMPONENTS = [
 var APIS = [
   require('./AccessibilityAndroidExample.android'),
   require('./AlertExample').AlertExample,
+  require('./AppStateExample'),
   require('./BorderExample'),
+  require('./CameraRollExample'),
   require('./ClipboardExample'),
+  require('./DatePickerAndroidExample'),
   require('./GeolocationExample'),
+  require('./ImageEditingExample'),
   require('./IntentAndroidExample.android'),
   require('./LayoutEventsExample'),
   require('./LayoutExample'),
   require('./NetInfoExample'),
   require('./PanResponderExample'),
   require('./PointerEventsExample'),
+  require('./TimePickerAndroidExample'),
   require('./TimerExample'),
   require('./ToastAndroidExample.android'),
   require('./XHRExample'),

Examples/UIExplorer/UIExplorerList.ios.js

@@ -46,7 +46,8 @@ var COMPONENTS = [
   require('./ScrollViewExample'),
   require('./SegmentedControlIOSExample'),
   require('./SliderIOSExample'),
-  require('./SwitchIOSExample'),
+  require('./StatusBarExample'),
+  require('./SwitchExample'),
   require('./TabBarIOSExample'),
   require('./TextExample.ios'),
   require('./TextInputExample.ios'),
@@ -64,11 +65,14 @@ var APIS = [
   require('./AnimatedExample'),
   require('./AnimatedGratuitousApp/AnExApp'),
   require('./AppStateIOSExample'),
+  require('./AppStateExample'),
   require('./AsyncStorageExample'),
   require('./BorderExample'),
-  require('./CameraRollExample.ios'),
+  require('./BoxShadowExample'),
+  require('./CameraRollExample'),
   require('./ClipboardExample'),
   require('./GeolocationExample'),
+  require('./ImageEditingExample'),
   require('./LayoutExample'),
   require('./NetInfoExample'),
   require('./PanResponderExample'),
@@ -80,7 +84,6 @@ var APIS = [
   require('./TransformExample'),
   require('./VibrationIOSExample'),
   require('./XHRExample.ios'),
-  require('./ImageEditingExample'),
 ];
 
 type Props = {

Examples/UIExplorer/UIExplorerListBase.js

@@ -18,7 +18,6 @@
 var React = require('react-native');
 var {
   ListView,
-  PixelRatio,
   StyleSheet,
   Text,
   TextInput,
@@ -87,11 +86,9 @@ class UIExplorerListBase extends React.Component {
 
   _renderSectionHeader(data: any, section: string) {
     return (
-      <View style={styles.sectionHeader}>
-        <Text style={styles.sectionHeaderTitle}>
-          {section.toUpperCase()}
-        </Text>
-      </View>
+      <Text style={styles.sectionHeader}>
+        {section.toUpperCase()}
+      </Text>
     );
   }
 
@@ -148,14 +145,12 @@ var styles = StyleSheet.create({
   },
   sectionHeader: {
     padding: 5,
+    fontWeight: '500',
+    fontSize: 11,
   },
   group: {
     backgroundColor: 'white',
   },
-  sectionHeaderTitle: {
-    fontWeight: '500',
-    fontSize: 11,
-  },
   row: {
     backgroundColor: 'white',
     justifyContent: 'center',
@@ -163,7 +158,7 @@ var styles = StyleSheet.create({
     paddingVertical: 8,
   },
   separator: {
-    height: 1 / PixelRatio.get(),
+    height: StyleSheet.hairlineWidth,
     backgroundColor: '#bbbbbb',
     marginLeft: 15,
   },

Examples/UIExplorer/UIExplorerUnitTests/RCTAllocationTests.m

@@ -22,13 +22,12 @@
 #import "RCTRootView.h"
 
 #define RUN_RUNLOOP_WHILE(CONDITION) \
-_Pragma("clang diagnostic push") \
-_Pragma("clang diagnostic ignored \"-Wshadow\"") \
-NSDate *timeout = [[NSDate date] dateByAddingTimeInterval:5]; \
-while ((CONDITION) && [timeout timeIntervalSinceNow] > 0) { \
-  [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:timeout]; \
-} \
-_Pragma("clang diagnostic pop")
+{ \
+  NSDate *timeout = [NSDate dateWithTimeIntervalSinceNow:5]; \
+  while ((CONDITION) && [timeout timeIntervalSinceNow] > 0) { \
+    [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; \
+  } \
+}
 
 @interface RCTJavaScriptContext : NSObject
 
@@ -212,8 +211,6 @@ RCT_EXPORT_METHOD(test:(__unused NSString *)a
   XCTAssertFalse(rootContentView.userInteractionEnabled, @"RCTContentView should have been invalidated");
 }
 
-// This test is flaky, and needs to be fixed before re-enabling. See t9456702.
-#if 0
 - (void)testUnderlyingBridgeIsDeallocated
 {
   RCTBridge *bridge;
@@ -229,7 +226,15 @@ RCT_EXPORT_METHOD(test:(__unused NSString *)a
 
   XCTAssertNotNil(bridge, @"RCTBridge should not have been deallocated");
   XCTAssertNil(batchedBridge, @"RCTBatchedBridge should have been deallocated");
+
+  // Wait to complete the test until the new batchedbridge is also deallocated
+  @autoreleasepool {
+    batchedBridge = bridge.batchedBridge;
+    bridge = nil;
+  }
+
+  RUN_RUNLOOP_WHILE(batchedBridge != nil);
+  XCTAssertNil(batchedBridge);
 }
-#endif
 
 @end

Examples/UIExplorer/UIExplorerUnitTests/RCTBridgeTests.m

@@ -21,6 +21,14 @@
 #import "RCTJavaScriptExecutor.h"
 #import "RCTUtils.h"
 
+#define RUN_RUNLOOP_WHILE(CONDITION) \
+{ \
+  NSDate *timeout = [NSDate dateWithTimeIntervalSinceNow:5]; \
+  while ((CONDITION) && [timeout timeIntervalSinceNow] > 0) { \
+    [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; \
+  } \
+}
+
 @interface TestExecutor : NSObject <RCTJavaScriptExecutor>
 
 @property (nonatomic, readonly, copy) NSMutableDictionary<NSString *, id> *injectedStuff;
@@ -93,6 +101,8 @@ RCT_EXPORT_MODULE()
 @interface RCTBridgeTests : XCTestCase <RCTBridgeModule>
 {
   RCTBridge *_bridge;
+  __weak TestExecutor *_jsExecutor;
+
   BOOL _testMethodCalled;
 }
 @end
@@ -112,35 +122,34 @@ RCT_EXPORT_MODULE(TestModule)
                                    launchOptions:nil];
 
   _bridge.executorClass = [TestExecutor class];
+
   // Force to recreate the executor with the new class
   // - reload: doesn't work here since bridge hasn't loaded yet.
   [_bridge invalidate];
   [_bridge setUp];
+
+  _jsExecutor = [_bridge.batchedBridge valueForKey:@"javaScriptExecutor"];
+  XCTAssertNotNil(_jsExecutor);
 }
 
 - (void)tearDown
 {
   [super tearDown];
 
-  [_bridge invalidate];
   _testMethodCalled = NO;
-}
 
-#define RUN_RUNLOOP_WHILE(CONDITION) \
-_Pragma("clang diagnostic push") \
-_Pragma("clang diagnostic ignored \"-Wshadow\"") \
-NSDate *timeout = [[NSDate date] dateByAddingTimeInterval:0.1]; \
-while ((CONDITION) && [timeout timeIntervalSinceNow] > 0) { \
-  [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:timeout]; \
-} \
-_Pragma("clang diagnostic pop")
+  [_bridge invalidate];
+  _bridge = nil;
+
+  RUN_RUNLOOP_WHILE(_jsExecutor != nil);
+  XCTAssertNotNil(_jsExecutor);
+}
 
 - (void)testHookRegistration
 {
-  TestExecutor *executor =  [_bridge.batchedBridge valueForKey:@"_javaScriptExecutor"];
-
   NSString *injectedStuff;
-  RUN_RUNLOOP_WHILE(!(injectedStuff = executor.injectedStuff[@"__fbBatchedBridgeConfig"]));
+  RUN_RUNLOOP_WHILE(!(injectedStuff = _jsExecutor.injectedStuff[@"__fbBatchedBridgeConfig"]));
+  XCTAssertNotNil(injectedStuff);
 
   __block NSNumber *testModuleID = nil;
   __block NSDictionary<NSString *, id> *testConstants = nil;
@@ -165,10 +174,9 @@ _Pragma("clang diagnostic pop")
 
 - (void)testCallNativeMethod
 {
-  TestExecutor *executor =  [_bridge.batchedBridge valueForKey:@"_javaScriptExecutor"];
-
   NSString *injectedStuff;
-  RUN_RUNLOOP_WHILE(!(injectedStuff = executor.injectedStuff[@"__fbBatchedBridgeConfig"]));
+  RUN_RUNLOOP_WHILE(!(injectedStuff = _jsExecutor.injectedStuff[@"__fbBatchedBridgeConfig"]));
+  XCTAssertNotNil(injectedStuff);
 
   __block NSNumber *testModuleID = nil;
   __block NSNumber *testMethodID = nil;

Examples/UIExplorer/UIExplorerUnitTests/RCTEventDispatcherTests.m

@@ -18,27 +18,44 @@
 #import <OCMock/OCMock.h>
 #import "RCTEventDispatcher.h"
 
-@interface RCTTestEvent : RCTBaseEvent
-
-@property (nonatomic, assign) BOOL canCoalesce;
-
+@interface RCTTestEvent : NSObject  <RCTEvent>
+@property (atomic, assign, readwrite) BOOL canCoalesce;
 @end
 
 @implementation RCTTestEvent
+{
+  NSDictionary<NSString *, id> *_body;
+}
+
+@synthesize viewTag = _viewTag;
+@synthesize eventName = _eventName;
 
 - (instancetype)initWithViewTag:(NSNumber *)viewTag eventName:(NSString *)eventName body:(NSDictionary<NSString *, id> *)body
 {
-  if (self = [super initWithViewTag:viewTag eventName:eventName body:body]) {
-    self.canCoalesce = YES;
+  if (self = [super init]) {
+    _viewTag = viewTag;
+    _eventName = eventName;
+    _body = body;
+    _canCoalesce = YES;
   }
   return self;
 }
 
+- (id<RCTEvent>)coalesceWithEvent:(id<RCTEvent>)newEvent
+{
+  return newEvent;
+}
+
 + (NSString *)moduleDotMethod
 {
   return @"RCTDeviceEventEmitter.emit";
 }
 
+- (NSArray *)arguments
+{
+  return @[_eventName, _body];
+}
+
 @end
 
 @interface RCTEventDispatcherTests : XCTestCase
@@ -76,7 +93,7 @@
 - (void)testLegacyEventsAreImmediatelyDispatched
 {
   [[_bridge expect] enqueueJSCall:_JSMethod
-                             args:@[_eventName, _body]];
+                             args:[_testEvent arguments]];
 
   [_eventDispatcher sendDeviceEventWithName:_eventName body:_body];
 
@@ -87,7 +104,7 @@
 {
   _testEvent.canCoalesce = NO;
   [[_bridge expect] enqueueJSCall:_JSMethod
-                             args:@[_eventName, _body]];
+                             args:[_testEvent arguments]];
 
   [_eventDispatcher sendEvent:_testEvent];
 
@@ -97,15 +114,32 @@
 - (void)testCoalescedEventShouldBeDispatchedOnFrameUpdate
 {
   [_eventDispatcher sendEvent:_testEvent];
-
+  [_bridge verify];
   [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
-                             args:@[_eventName, _body]];
+                             args:[_testEvent arguments]];
 
   [(id<RCTFrameUpdateObserver>)_eventDispatcher didUpdateFrame:nil];
 
   [_bridge verify];
 }
 
+- (void)testNonCoalescingEventForcesColescedEventsToBeImmediatelyDispatched
+{
+  RCTTestEvent *nonCoalescingEvent = [[RCTTestEvent alloc] initWithViewTag:nil
+                                                                 eventName:_eventName
+                                                                      body:@{}];
+  nonCoalescingEvent.canCoalesce = NO;
+  [_eventDispatcher sendEvent:_testEvent];
+
+  [[_bridge expect] enqueueJSCall:[[_testEvent class] moduleDotMethod]
+                             args:[_testEvent arguments]];
+  [[_bridge expect] enqueueJSCall:[[nonCoalescingEvent class] moduleDotMethod]
+                             args:[nonCoalescingEvent arguments]];
+
+  [_eventDispatcher sendEvent:nonCoalescingEvent];
+  [_bridge verify];
+}
+
 - (void)testBasicCoalescingReturnsLastEvent
 {
   RCTTestEvent *ignoredEvent = [[RCTTestEvent alloc] initWithViewTag:nil
@@ -116,7 +150,7 @@
   [_eventDispatcher sendEvent:_testEvent];
 
   [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
-                             args:@[_eventName, _body]];
+                             args:[_testEvent arguments]];
 
   [(id<RCTFrameUpdateObserver>)_eventDispatcher didUpdateFrame:nil];
 
@@ -134,10 +168,10 @@
   [_eventDispatcher sendEvent:_testEvent];
 
   [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
-                             args:@[firstEventName, _body]];
+                             args:[firstEvent arguments]];
 
   [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
-                             args:@[_eventName, _body]];
+                             args:[_testEvent arguments]];
 
   [(id<RCTFrameUpdateObserver>)_eventDispatcher didUpdateFrame:nil];
 

Examples/UIExplorer/UIExplorerUnitTests/RCTGzipTests.m

@@ -17,13 +17,12 @@
 #import "RCTNetworking.h"
 
 #define RUN_RUNLOOP_WHILE(CONDITION) \
-_Pragma("clang diagnostic push") \
-_Pragma("clang diagnostic ignored \"-Wshadow\"") \
-NSDate *timeout = [[NSDate date] dateByAddingTimeInterval:5]; \
-while ((CONDITION) && [timeout timeIntervalSinceNow] > 0) { \
-  [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:timeout]; \
-} \
-_Pragma("clang diagnostic pop")
+{ \
+  NSDate *timeout = [NSDate dateWithTimeIntervalSinceNow:5]; \
+  while ((CONDITION) && [timeout timeIntervalSinceNow] > 0) { \
+    [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; \
+  } \
+}
 
 extern BOOL RCTIsGzippedData(NSData *data);
 

Examples/UIExplorer/UIExplorerUnitTests/RCTImageLoaderHelpers.h

@@ -15,7 +15,7 @@
 #import "RCTImageLoader.h"
 
 typedef BOOL (^RCTImageURLLoaderCanLoadImageURLHandler)(NSURL *requestURL);
-typedef RCTImageLoaderCancellationBlock (^RCTImageURLLoaderLoadImageURLHandler)(NSURL *imageURL, CGSize size, CGFloat scale, UIViewContentMode resizeMode, RCTImageLoaderProgressBlock progressHandler, RCTImageLoaderCompletionBlock completionHandler);
+typedef RCTImageLoaderCancellationBlock (^RCTImageURLLoaderLoadImageURLHandler)(NSURL *imageURL, CGSize size, CGFloat scale, RCTResizeMode resizeMode, RCTImageLoaderProgressBlock progressHandler, RCTImageLoaderCompletionBlock completionHandler);
 
 @interface RCTConcreteImageURLLoader : NSObject <RCTImageURLLoader>
 
@@ -26,7 +26,7 @@ typedef RCTImageLoaderCancellationBlock (^RCTImageURLLoaderLoadImageURLHandler)(
 @end
 
 typedef BOOL (^RCTImageDataDecoderCanDecodeImageDataHandler)(NSData *imageData);
-typedef RCTImageLoaderCancellationBlock (^RCTImageDataDecoderDecodeImageDataHandler)(NSData *imageData, CGSize size, CGFloat scale, UIViewContentMode resizeMode, RCTImageLoaderCompletionBlock completionHandler);
+typedef RCTImageLoaderCancellationBlock (^RCTImageDataDecoderDecodeImageDataHandler)(NSData *imageData, CGSize size, CGFloat scale, RCTResizeMode resizeMode, RCTImageLoaderCompletionBlock completionHandler);
 
 @interface RCTConcreteImageDecoder : NSObject <RCTImageDataDecoder>
 

Examples/UIExplorer/UIExplorerUnitTests/RCTImageLoaderHelpers.m

@@ -47,7 +47,7 @@
   return _canLoadImageURLHandler(requestURL);
 }
 
-- (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL size:(CGSize)size scale:(CGFloat)scale resizeMode:(UIViewContentMode)resizeMode progressHandler:(RCTImageLoaderProgressBlock)progressHandler completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
+- (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL size:(CGSize)size scale:(CGFloat)scale resizeMode:(RCTResizeMode)resizeMode progressHandler:(RCTImageLoaderProgressBlock)progressHandler completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
 {
   return _loadImageURLHandler(imageURL, size, scale, resizeMode, progressHandler, completionHandler);
 }
@@ -92,7 +92,7 @@
   return _canDecodeImageDataHandler(imageData);
 }
 
-- (RCTImageLoaderCancellationBlock)decodeImageData:(NSData *)imageData size:(CGSize)size scale:(CGFloat)scale resizeMode:(UIViewContentMode)resizeMode completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
+- (RCTImageLoaderCancellationBlock)decodeImageData:(NSData *)imageData size:(CGSize)size scale:(CGFloat)scale resizeMode:(RCTResizeMode)resizeMode completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
 {
   return _decodeImageDataHandler(imageData, size, scale, resizeMode, completionHandler);
 }

Examples/UIExplorer/UIExplorerUnitTests/RCTImageLoaderTests.m

@@ -41,7 +41,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   id<RCTImageURLLoader> loader = [[RCTImageLoaderTestsURLLoader1 alloc] initWithPriority:1.0 canLoadImageURLHandler:^BOOL(__unused NSURL *requestURL) {
     return YES;
-  } loadImageURLHandler:^RCTImageLoaderCancellationBlock(__unused NSURL *imageURL, __unused CGSize size, __unused CGFloat scale, __unused UIViewContentMode resizeMode, RCTImageLoaderProgressBlock progressHandler, RCTImageLoaderCompletionBlock completionHandler) {
+  } loadImageURLHandler:^RCTImageLoaderCancellationBlock(__unused NSURL *imageURL, __unused CGSize size, __unused CGFloat scale, __unused RCTResizeMode resizeMode, RCTImageLoaderProgressBlock progressHandler, RCTImageLoaderCompletionBlock completionHandler) {
     progressHandler(1, 1);
     completionHandler(nil, image);
     return nil;
@@ -50,7 +50,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
   RCTImageLoader *imageLoader = [RCTImageLoader new];
   NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[loader, imageLoader]; } launchOptions:nil];
 
-  [imageLoader loadImageWithTag:@"http://facebook.github.io/react/img/logo_og.png" size:CGSizeMake(100, 100) scale:1.0 resizeMode:UIViewContentModeScaleAspectFit progressBlock:^(int64_t progress, int64_t total) {
+  [imageLoader loadImageWithTag:@"http://facebook.github.io/react/img/logo_og.png" size:CGSizeMake(100, 100) scale:1.0 resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
     XCTAssertEqual(progress, 1);
     XCTAssertEqual(total, 1);
   } completionBlock:^(NSError *loadError, id loadedImage) {
@@ -65,7 +65,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   id<RCTImageURLLoader> loader1 = [[RCTImageLoaderTestsURLLoader1 alloc] initWithPriority:1.0 canLoadImageURLHandler:^BOOL(__unused NSURL *requestURL) {
     return YES;
-  } loadImageURLHandler:^RCTImageLoaderCancellationBlock(__unused NSURL *imageURL, __unused CGSize size, __unused CGFloat scale, __unused UIViewContentMode resizeMode, RCTImageLoaderProgressBlock progressHandler, RCTImageLoaderCompletionBlock completionHandler) {
+  } loadImageURLHandler:^RCTImageLoaderCancellationBlock(__unused NSURL *imageURL, __unused CGSize size, __unused CGFloat scale, __unused RCTResizeMode resizeMode, RCTImageLoaderProgressBlock progressHandler, RCTImageLoaderCompletionBlock completionHandler) {
     progressHandler(1, 1);
     completionHandler(nil, image);
     return nil;
@@ -73,7 +73,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   id<RCTImageURLLoader> loader2 = [[RCTImageLoaderTestsURLLoader2 alloc] initWithPriority:0.5 canLoadImageURLHandler:^BOOL(__unused NSURL *requestURL) {
     return YES;
-  } loadImageURLHandler:^RCTImageLoaderCancellationBlock(__unused NSURL *imageURL, __unused CGSize size, __unused CGFloat scale, __unused UIViewContentMode resizeMode, __unused RCTImageLoaderProgressBlock progressHandler, __unused RCTImageLoaderCompletionBlock completionHandler) {
+  } loadImageURLHandler:^RCTImageLoaderCancellationBlock(__unused NSURL *imageURL, __unused CGSize size, __unused CGFloat scale, __unused RCTResizeMode resizeMode, __unused RCTImageLoaderProgressBlock progressHandler, __unused RCTImageLoaderCompletionBlock completionHandler) {
     XCTFail(@"Should not have used loader2");
     return nil;
   }];
@@ -81,7 +81,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
   RCTImageLoader *imageLoader = [RCTImageLoader new];
   NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[loader1, loader2, imageLoader]; } launchOptions:nil];
 
-  [imageLoader loadImageWithTag:@"http://facebook.github.io/react/img/logo_og.png" size:CGSizeMake(100, 100) scale:1.0 resizeMode:UIViewContentModeScaleAspectFit progressBlock:^(int64_t progress, int64_t total) {
+  [imageLoader loadImageWithTag:@"http://facebook.github.io/react/img/logo_og.png" size:CGSizeMake(100, 100) scale:1.0 resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
     XCTAssertEqual(progress, 1);
     XCTAssertEqual(total, 1);
   } completionBlock:^(NSError *loadError, id loadedImage) {
@@ -97,7 +97,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   id<RCTImageDataDecoder> decoder = [[RCTImageLoaderTestsDecoder1 alloc] initWithPriority:1.0 canDecodeImageDataHandler:^BOOL(__unused NSData *imageData) {
     return YES;
-  } decodeImageDataHandler:^RCTImageLoaderCancellationBlock(NSData *imageData, __unused CGSize size, __unused CGFloat scale, __unused UIViewContentMode resizeMode, RCTImageLoaderCompletionBlock completionHandler) {
+  } decodeImageDataHandler:^RCTImageLoaderCancellationBlock(NSData *imageData, __unused CGSize size, __unused CGFloat scale, __unused RCTResizeMode resizeMode, RCTImageLoaderCompletionBlock completionHandler) {
     XCTAssertEqualObjects(imageData, data);
     completionHandler(nil, image);
     return nil;
@@ -106,7 +106,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
   RCTImageLoader *imageLoader = [RCTImageLoader new];
   NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[decoder, imageLoader]; } launchOptions:nil];
 
-  RCTImageLoaderCancellationBlock cancelBlock = [imageLoader decodeImageData:data size:CGSizeMake(1, 1) scale:1.0 resizeMode:UIViewContentModeScaleToFill completionBlock:^(NSError *decodeError, id decodedImage) {
+  RCTImageLoaderCancellationBlock cancelBlock = [imageLoader decodeImageData:data size:CGSizeMake(1, 1) scale:1.0 resizeMode:RCTResizeModeStretch completionBlock:^(NSError *decodeError, id decodedImage) {
     XCTAssertEqualObjects(decodedImage, image);
     XCTAssertNil(decodeError);
   }];
@@ -120,7 +120,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   id<RCTImageDataDecoder> decoder1 = [[RCTImageLoaderTestsDecoder1 alloc] initWithPriority:1.0 canDecodeImageDataHandler:^BOOL(__unused NSData *imageData) {
     return YES;
-  } decodeImageDataHandler:^RCTImageLoaderCancellationBlock(NSData *imageData, __unused CGSize size, __unused CGFloat scale, __unused UIViewContentMode resizeMode, RCTImageLoaderCompletionBlock completionHandler) {
+  } decodeImageDataHandler:^RCTImageLoaderCancellationBlock(NSData *imageData, __unused CGSize size, __unused CGFloat scale, __unused RCTResizeMode resizeMode, RCTImageLoaderCompletionBlock completionHandler) {
     XCTAssertEqualObjects(imageData, data);
     completionHandler(nil, image);
     return nil;
@@ -128,7 +128,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
   id<RCTImageDataDecoder> decoder2 = [[RCTImageLoaderTestsDecoder2 alloc] initWithPriority:0.5 canDecodeImageDataHandler:^BOOL(__unused NSData *imageData) {
     return YES;
-  } decodeImageDataHandler:^RCTImageLoaderCancellationBlock(__unused NSData *imageData, __unused CGSize size, __unused CGFloat scale, __unused UIViewContentMode resizeMode, __unused RCTImageLoaderCompletionBlock completionHandler) {
+  } decodeImageDataHandler:^RCTImageLoaderCancellationBlock(__unused NSData *imageData, __unused CGSize size, __unused CGFloat scale, __unused RCTResizeMode resizeMode, __unused RCTImageLoaderCompletionBlock completionHandler) {
     XCTFail(@"Should not have used decoder2");
     return nil;
   }];
@@ -136,7 +136,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
   RCTImageLoader *imageLoader = [RCTImageLoader new];
   NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[decoder1, decoder2, imageLoader]; } launchOptions:nil];
 
-  RCTImageLoaderCancellationBlock cancelBlock = [imageLoader decodeImageData:data size:CGSizeMake(1, 1) scale:1.0 resizeMode:UIViewContentModeScaleToFill completionBlock:^(NSError *decodeError, id decodedImage) {
+  RCTImageLoaderCancellationBlock cancelBlock = [imageLoader decodeImageData:data size:CGSizeMake(1, 1) scale:1.0 resizeMode:RCTResizeModeStretch completionBlock:^(NSError *decodeError, id decodedImage) {
     XCTAssertEqualObjects(decodedImage, image);
     XCTAssertNil(decodeError);
   }];

Examples/UIExplorer/UIExplorerUnitTests/RCTImageUtilTests.m

@@ -46,19 +46,19 @@ RCTAssertEqualSizes(a.size, b.size); \
 
   {
     CGRect expected = {CGPointZero, {100, 20}};
-    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
+    CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeStretch);
     RCTAssertEqualRects(expected, result);
   }
 
   {
-    CGRect expected = {CGPointZero, {100, 10}};
-    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFit);
+    CGRect expected = {{0, 5}, {100, 10}};
+    CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeContain);
     RCTAssertEqualRects(expected, result);
   }
 
   {
     CGRect expected = {{-50, 0}, {200, 20}};
-    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFill);
+    CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeCover);
     RCTAssertEqualRects(expected, result);
   }
 }
@@ -70,19 +70,19 @@ RCTAssertEqualSizes(a.size, b.size); \
 
   {
     CGRect expected = {CGPointZero, {100, 20}};
-    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
+    CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeStretch);
     RCTAssertEqualRects(expected, result);
   }
 
   {
-    CGRect expected = {CGPointZero, {2, 20}};
-    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFit);
+    CGRect expected = {{49, 0}, {2, 20}};
+    CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeContain);
     RCTAssertEqualRects(expected, result);
   }
 
   {
     CGRect expected = {{0, -490}, {100, 1000}};
-    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFill);
+    CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeCover);
     RCTAssertEqualRects(expected, result);
   }
 }
@@ -94,19 +94,19 @@ RCTAssertEqualSizes(a.size, b.size); \
 
   {
     CGRect expected = {CGPointZero, {20, 50}};
-    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
+    CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeStretch);
     RCTAssertEqualRects(expected, result);
   }
 
   {
-    CGRect expected = {CGPointZero, {5, 50}};
-    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFit);
+    CGRect expected = {{7,0}, {5, 50}};
+    CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeContain);
     RCTAssertEqualRects(expected, result);
   }
 
   {
     CGRect expected = {{0, -75}, {20, 200}};
-    CGRect result = RCTTargetRect(content, target, 2, UIViewContentModeScaleAspectFill);
+    CGRect result = RCTTargetRect(content, target, 2, RCTResizeModeCover);
     RCTAssertEqualRects(expected, result);
   }
 }
@@ -118,7 +118,7 @@ RCTAssertEqualSizes(a.size, b.size); \
 
   {
     CGRect expected = {{0, -75}, {20, 200}};
-    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFill);
+    CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeCover);
     RCTAssertEqualRects(expected, result);
   }
 }
@@ -129,8 +129,56 @@ RCTAssertEqualSizes(a.size, b.size); \
   CGSize target = {3, 3};
 
   CGRect expected = {CGPointZero, {3, 3}};
-  CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
+  CGRect result = RCTTargetRect(content, target, 1, RCTResizeModeStretch);
   RCTAssertEqualRects(expected, result);
 }
 
+- (void)testPlaceholderImage
+{
+  CGSize size = {45, 22};
+  CGFloat expectedScale = 1.0;
+  UIImage *image = RCTGetPlaceholderImage(size, nil);
+  RCTAssertEqualSizes(size, image.size);
+  XCTAssertEqual(expectedScale, image.scale);
+}
+
+- (void)testPlaceholderNonintegralSize
+{
+  CGSize size = {3.0/2, 7.0/3};
+  CGFloat expectedScale = 6;
+  CGSize pixelSize = {
+    round(size.width * expectedScale),
+    round(size.height * expectedScale)
+  };
+  UIImage *image = RCTGetPlaceholderImage(size, nil);
+  RCTAssertEqualSizes(size, image.size);
+  XCTAssertEqual(pixelSize.width, CGImageGetWidth(image.CGImage));
+  XCTAssertEqual(pixelSize.height, CGImageGetHeight(image.CGImage));
+  XCTAssertEqual(expectedScale, image.scale);
+}
+
+- (void)testPlaceholderSquareImage
+{
+  CGSize size = {333, 333};
+  CGFloat expectedScale = 1.0/333;
+  CGSize pixelSize = {1, 1};
+  UIImage *image = RCTGetPlaceholderImage(size, nil);
+  RCTAssertEqualSizes(size, image.size);
+  XCTAssertEqual(pixelSize.width, CGImageGetWidth(image.CGImage));
+  XCTAssertEqual(pixelSize.height, CGImageGetHeight(image.CGImage));
+  XCTAssertEqual(expectedScale, image.scale);
+}
+
+- (void)testPlaceholderNonsquareImage
+{
+  CGSize size = {640, 480};
+  CGFloat expectedScale = 1.0/160;
+  CGSize pixelSize = {4, 3};
+  UIImage *image = RCTGetPlaceholderImage(size, nil);
+  RCTAssertEqualSizes(size, image.size);
+  XCTAssertEqual(pixelSize.width, CGImageGetWidth(image.CGImage));
+  XCTAssertEqual(pixelSize.height, CGImageGetHeight(image.CGImage));
+  XCTAssertEqual(expectedScale, image.scale);
+}
+
 @end

Examples/UIExplorer/UIExplorerUnitTests/RCTJSONTests.m

@@ -78,4 +78,35 @@
   XCTAssertEqualObjects(obj, RCTJSONParse(json, NULL));
 }
 
+- (void)testNotJSONSerializable
+{
+  NSDictionary<NSString *, id> *obj = @{@"foo": [NSDate date]};
+  NSString *json = @"{\"foo\":null}";
+  XCTAssertEqualObjects(json, RCTJSONStringify(obj, NULL));
+}
+
+- (void)testNaN
+{
+  NSDictionary<NSString *, id> *obj = @{@"foo": @(NAN)};
+  NSString *json = @"{\"foo\":0}";
+  XCTAssertEqualObjects(json, RCTJSONStringify(obj, NULL));
+}
+
+- (void)testNotUTF8Convertible
+{
+  //see https://gist.github.com/0xced/56035d2f57254cf518b5
+  NSString *string = [[NSString alloc] initWithBytes:"\xd8\x00" length:2 encoding:NSUTF16StringEncoding];
+  NSDictionary<NSString *, id> *obj = @{@"foo": string};
+  NSString *json = @"{\"foo\":null}";
+  XCTAssertEqualObjects(json, RCTJSONStringify(obj, NULL));
+}
+
+- (void)testErrorPointer
+{
+  NSDictionary<NSString *, id> *obj = @{@"foo": [NSDate date]};
+  NSError *error;
+  XCTAssertNil(RCTJSONStringify(obj, &error));
+  XCTAssertNotNil(error);
+}
+
 @end

Examples/UIExplorer/UIExplorerUnitTests/RCTURLUtilsTests.m

@@ -30,6 +30,13 @@
   XCTAssertEqualObjects(bar, @"foo");
 }
 
+- (void)testGetEncodedParam
+{
+  NSURL *URL = [NSURL URLWithString:@"http://example.com?foo=You%20%26%20Me"];
+  NSString *foo = RCTGetURLQueryParam(URL, @"foo");
+  XCTAssertEqualObjects(foo, @"You & Me");
+}
+
 - (void)testQueryParamNotFound
 {
   NSURL *URL = [NSURL URLWithString:@"http://example.com?foo=bar"];
@@ -58,6 +65,13 @@
   XCTAssertEqualObjects(result.absoluteString, @"http://example.com?foo=foo&bar=foo");
 }
 
+- (void)testReplaceEncodedParam
+{
+  NSURL *URL = [NSURL URLWithString:@"http://example.com?foo=You%20%26%20Me"];
+  NSURL *result = RCTURLByReplacingQueryParam(URL, @"foo", @"Me & You");
+  XCTAssertEqualObjects(result.absoluteString, @"http://example.com?foo=Me%20%26%20You");
+}
+
 - (void)testAppendParam
 {
   NSURL *URL = [NSURL URLWithString:@"http://example.com?bar=foo"];
@@ -65,6 +79,13 @@
   XCTAssertEqualObjects(result.absoluteString, @"http://example.com?bar=foo&foo=bar");
 }
 
+- (void)testRemoveParam
+{
+  NSURL *URL = [NSURL URLWithString:@"http://example.com?bar=foo&foo=bar"];
+  NSURL *result = RCTURLByReplacingQueryParam(URL, @"bar", nil);
+  XCTAssertEqualObjects(result.absoluteString, @"http://example.com?foo=bar");
+}
+
 - (void)testNilURLAppendQueryParam
 {
   NSURL *URL = nil;

Examples/UIExplorer/ViewPagerAndroidExample.android.js

@@ -25,6 +25,8 @@ var {
   ViewPagerAndroid,
 } = React;
 
+import type { ViewPagerScrollState } from 'ViewPagerAndroid';
+
 var PAGES = 5;
 var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe', '#f79273'];
 var IMAGE_URIS = [
@@ -114,6 +116,10 @@ var ViewPagerAndroidExample = React.createClass({
     this.setState({progress: e.nativeEvent});
   },
 
+  onPageScrollStateChanged: function(state : ViewPagerScrollState) {
+    this.setState({scrollState: state});
+  },
+
   move: function(delta) {
     var page = this.state.page + delta;
     this.go(page);
@@ -155,6 +161,7 @@ var ViewPagerAndroidExample = React.createClass({
           initialPage={0}
           onPageScroll={this.onPageScroll}
           onPageSelected={this.onPageSelected}
+          onPageScrollStateChanged={this.onPageScrollStateChanged}
           ref={viewPager => { this.viewPager = viewPager; }}>
           {pages}
         </ViewPagerAndroid>
@@ -170,6 +177,7 @@ var ViewPagerAndroidExample = React.createClass({
               enabled={true}
               onPress={() => this.setState({animationsAreEnabled: true})}
             /> }
+          <Text style={styles.scrollStateText}>ScrollState[ {this.state.scrollState} ]</Text>
         </View>
         <View style={styles.buttons}>
           <Button text="Start" enabled={page > 0} onPress={() => this.go(0)}/>
@@ -207,6 +215,9 @@ var styles = StyleSheet.create({
   buttonText: {
     color: 'white',
   },
+  scrollStateText: {
+    color: '#99d1b7',
+  },
   container: {
     flex: 1,
     backgroundColor: 'white',

Examples/UIExplorer/WebViewExample.js

@@ -49,7 +49,11 @@ var WebViewExample = React.createClass({
   inputText: '',
 
   handleTextInputChange: function(event) {
-    this.inputText = event.nativeEvent.text;
+    var url = event.nativeEvent.text;
+    if (!/^[a-zA-Z-_]+:/.test(url)) {
+      url = 'http://' + url;
+    }
+    this.inputText = url;
   },
 
   render: function() {
@@ -93,9 +97,10 @@ var WebViewExample = React.createClass({
           ref={WEBVIEW_REF}
           automaticallyAdjustContentInsets={false}
           style={styles.webView}
-          url={this.state.url}
-          javaScriptEnabledAndroid={true}
-          domStorageEnabledAndroid={true}
+          source={{uri: this.state.url}}
+          javaScriptEnabled={true}
+          domStorageEnabled={true}
+          decelerationRate="normal"
           onNavigationStateChange={this.onNavigationStateChange}
           onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
           startInLoadingState={true}
@@ -226,12 +231,89 @@ var styles = StyleSheet.create({
   },
 });
 
+const HTML = `
+<!DOCTYPE html>\n
+<html>
+  <head>
+    <title>Hello Static World</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        font: 62.5% arial, sans-serif;
+        background: #ccc;
+      }
+      h1 {
+        padding: 45px;
+        margin: 0;
+        text-align: center;
+        color: #33f;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hello Static World</h1>
+  </body>
+</html>
+`;
+
 exports.displayName = (undefined: ?string);
 exports.title = '<WebView>';
 exports.description = 'Base component to display web content';
 exports.examples = [
   {
-    title: 'WebView',
+    title: 'Simple Browser',
     render(): ReactElement { return <WebViewExample />; }
+  },
+  {
+    title: 'Bundled HTML',
+    render(): ReactElement {
+      return (
+        <WebView
+          style={{
+            backgroundColor: BGWASH,
+            height: 100,
+          }}
+          source={require('./helloworld.html')}
+          scalesPageToFit={true}
+        />
+      );
+    }
+  },
+  {
+    title: 'Static HTML',
+    render(): ReactElement {
+      return (
+        <WebView
+          style={{
+            backgroundColor: BGWASH,
+            height: 100,
+          }}
+          source={{html: HTML}}
+          scalesPageToFit={true}
+        />
+      );
+    }
+  },
+  {
+    title: 'POST Test',
+    render(): ReactElement {
+      return (
+        <WebView
+          style={{
+            backgroundColor: BGWASH,
+            height: 100,
+          }}
+          source={{
+            uri: 'http://www.posttestserver.com/post.php',
+            method: 'POST',
+            body: 'foo=bar&bar=foo'
+          }}
+          scalesPageToFit={false}
+        />
+      );
+    }
   }
 ];

Examples/UIExplorer/XHRExample.android.js

@@ -17,7 +17,6 @@
 
 var React = require('react-native');
 var {
-  PixelRatio,
   ProgressBarAndroid,
   StyleSheet,
   Text,
@@ -28,6 +27,7 @@ var {
 
 var XHRExampleHeaders = require('./XHRExampleHeaders');
 var XHRExampleCookies = require('./XHRExampleCookies');
+var XHRExampleFetch = require('./XHRExampleFetch');
 
 
 // TODO t7093728 This is a simplified XHRExample.ios.js.
@@ -281,6 +281,11 @@ exports.examples = [{
   render() {
     return <FormUploader/>;
   }
+}, {
+  title: 'Fetch Test',
+  render() {
+    return <XHRExampleFetch/>;
+  }
 }, {
   title: 'Headers',
   render() {
@@ -306,7 +311,7 @@ var styles = StyleSheet.create({
     flexDirection: 'row',
     paddingVertical: 8,
     alignItems: 'center',
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: 'grey',
   },
   textButton: {

Examples/UIExplorer/XHRExample.ios.js

@@ -21,7 +21,6 @@ var {
   CameraRoll,
   Image,
   LinkingIOS,
-  PixelRatio,
   ProgressViewIOS,
   StyleSheet,
   Text,
@@ -31,6 +30,7 @@ var {
 } = React;
 
 var XHRExampleHeaders = require('./XHRExampleHeaders');
+var XHRExampleFetch = require('./XHRExampleFetch');
 
 class Downloader extends React.Component {
 
@@ -304,54 +304,6 @@ class FormUploader extends React.Component {
   }
 }
 
-class FetchTest extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-     responseText: null,
-    };
-  }
-
-  submit(uri: String) {
-    fetch(uri).then((response) => {
-      return response.text();
-    }).then((body) => {
-      this.setState({responseText: body});
-    });
-  }
-
-  render() {
-
-    var response = this.state.responseText ? (
-      <View style={{marginTop: 10}}>
-        <Text style={styles.label}>Server response:</Text>
-        <TextInput
-          editable={false}
-          multiline={true}
-          defaultValue={this.state.responseText}
-          style={styles.textOutput}
-        />
-      </View>
-    ) : null;
-
-    return (
-      <View>
-        <Text style={styles.label}>Edit URL to submit:</Text>
-        <TextInput
-          returnKeyType="go"
-          defaultValue="http://www.posttestserver.com/post.php"
-          onSubmitEditing={(event)=> {
-            this.submit(event.nativeEvent.text);
-          }}
-          style={styles.textInput}
-        />
-        {response}
-      </View>
-    );
-  }
-}
-
 exports.framework = 'React';
 exports.title = 'XMLHttpRequest';
 exports.description = 'XMLHttpRequest';
@@ -366,9 +318,9 @@ exports.examples = [{
     return <FormUploader/>;
   }
 }, {
-  title: 'fetch test',
+  title: 'Fetch Test',
   render() {
-    return <FetchTest/>;
+    return <XHRExampleFetch/>;
   }
 }, {
   title: 'Headers',
@@ -390,7 +342,7 @@ var styles = StyleSheet.create({
     flexDirection: 'row',
     paddingVertical: 8,
     alignItems: 'center',
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: 'grey',
   },
   photoLabel: {
@@ -432,19 +384,4 @@ var styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '500',
   },
-  label: {
-    flex: 1,
-    color: '#aaa',
-    fontWeight: '500',
-    height: 20,
-  },
-  textOutput: {
-    flex: 1,
-    fontSize: 17,
-    borderRadius: 3,
-    borderColor: 'grey',
-    borderWidth: 1,
-    height: 200,
-    paddingLeft: 8,
-  },
 });

Examples/UIExplorer/XHRExampleFetch.js

@@ -0,0 +1,112 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  Platform,
+} = React;
+
+
+class XHRExampleFetch extends React.Component {
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+     responseText: null,
+    };
+    this.responseURL = null;
+  }
+
+  submit(uri: String) {
+    fetch(uri).then((response) => {
+      this.responseURL = response.url;
+      return response.text();
+    }).then((body) => {
+      this.setState({responseText: body});
+    });
+  }
+
+  render() {
+
+    var responseURL = this.responseURL ? (
+      <View style={{marginTop: 10}}>
+        <Text style={styles.label}>Server response URL:</Text>
+        <Text>{this.responseURL}</Text>
+      </View>
+    ) : null;
+
+    var response = this.state.responseText ? (
+      <View style={{marginTop: 10}}>
+        <Text style={styles.label}>Server response:</Text>
+        <TextInput
+          editable={false}
+          multiline={true}
+          defaultValue={this.state.responseText}
+          style={styles.textOutput}
+        />
+      </View>
+    ) : null;
+
+    return (
+      <View>
+        <Text style={styles.label}>Edit URL to submit:</Text>
+        <TextInput
+          returnKeyType="go"
+          defaultValue="http://www.posttestserver.com/post.php"
+          onSubmitEditing={(event)=> {
+            this.submit(event.nativeEvent.text);
+          }}
+          style={styles.textInput}
+        />
+        {responseURL}
+        {response}
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  textInput: {
+    flex: 1,
+    borderRadius: 3,
+    borderColor: 'grey',
+    borderWidth: 1,
+    height: Platform.OS === 'android' ? 44 : 30,
+    paddingLeft: 8,
+  },
+  label: {
+    flex: 1,
+    color: '#aaa',
+    fontWeight: '500',
+    height: 20,
+  },
+  textOutput: {
+    flex: 1,
+    fontSize: 17,
+    borderRadius: 3,
+    borderColor: 'grey',
+    borderWidth: 1,
+    height: 200,
+    paddingLeft: 8,
+  },
+});
+
+module.exports = XHRExampleFetch;

Examples/UIExplorer/createExamplePage.js

@@ -39,11 +39,13 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
     },
 
     getBlock: function(example: Example, i) {
-      if (example.platform) {
-        if (Platform.OS !== example.platform) {
-          return;
+      // Filter platform-specific examples
+      var {title, description, platform} = example;
+      if (platform) {
+        if (Platform.OS !== platform) {
+          return null;
         }
-        example.title += ' (' + example.platform + ' only)';
+        title += ' (' + platform + ' only)';
       }
       // Hack warning: This is a hack because the www UI explorer requires
       // renderComponent to be called.
@@ -74,8 +76,8 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
       return (
         <UIExplorerBlock
           key={i}
-          title={example.title}
-          description={example.description}>
+          title={title}
+          description={description}>
           {renderedComponent}
         </UIExplorerBlock>
       );

Examples/UIExplorer/helloworld.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello Bundled World</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=320, user-scalable=no">
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        font: 62.5% arial, sans-serif;
+        background: #ccc;
+      }
+      h1 {
+        padding: 45px;
+        margin: 0;
+        text-align: center;
+        color: #f33;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hello Bundled World</h1>
+  </body>
+</html>

Libraries/ART/ARTSurfaceView.m

@@ -27,4 +27,9 @@
   }
 }
 
+- (void)reactSetInheritedBackgroundColor:(UIColor *)inheritedBackgroundColor
+{
+  self.backgroundColor = inheritedBackgroundColor;
+}
+
 @end

Libraries/ActionSheetIOS/RCTActionSheetManager.m

@@ -66,6 +66,10 @@ RCT_EXPORT_METHOD(showActionSheetWithOptions:(NSDictionary *)options
   NSInteger cancelButtonIndex = options[@"cancelButtonIndex"] ? [RCTConvert NSInteger:options[@"cancelButtonIndex"]] : -1;
 
   UIViewController *controller = RCTKeyWindow().rootViewController;
+  while (controller.presentedViewController) {
+    controller = controller.presentedViewController;
+  }
+    
   if (controller == nil) {
     RCTLogError(@"Tried to display action sheet but there is no application window. options: %@", options);
     return;

Libraries/Animated/src/AnimatedImplementation.js

@@ -165,9 +165,9 @@ class TimingAnimation extends Animation {
   ) {
     super();
     this._toValue = config.toValue;
-    this._easing = config.easing || easeInOut;
+    this._easing = config.easing !== undefined ? config.easing : easeInOut;
     this._duration = config.duration !== undefined ? config.duration : 500;
-    this._delay = config.delay || 0;
+    this._delay = config.delay !== undefined ? config.delay : 0;
     this.__isInteraction = config.isInteraction !== undefined ? config.isInteraction : true;
   }
 
@@ -252,7 +252,7 @@ class DecayAnimation extends Animation {
     config: DecayAnimationConfigSingle,
   ) {
     super();
-    this._deceleration = config.deceleration || 0.998;
+    this._deceleration = config.deceleration !== undefined ? config.deceleration : 0.998;
     this._velocity = config.velocity;
     this.__isInteraction = config.isInteraction !== undefined ? config.isInteraction : true;
   }
@@ -577,7 +577,7 @@ class AnimatedValue extends AnimatedWithChildren {
 
   /**
    * Adds an asynchronous listener to the value so you can observe updates from
-   * animations or whathaveyou.  This is useful because there is no way to
+   * animations.  This is useful because there is no way to
    * synchronously read the value because it might be driven natively.
    */
   addListener(callback: ValueListenerCallback): string {

Libraries/Animated/src/Interpolation.js

@@ -9,9 +9,10 @@
  * @providesModule Interpolation
  * @flow
  */
+/* eslint no-bitwise: 0 */
 'use strict';
 
-var tinycolor = require('tinycolor');
+var normalizeColor = require('normalizeColor');
 
 // TODO(#7644673): fix this hack once github jest actually checks invariants
 var invariant = function(condition, message) {
@@ -164,16 +165,20 @@ function interpolate(
   return result;
 }
 
-function colorToRgba(
-  input: string
-): string {
-  var color = tinycolor(input);
-  if (color.isValid()) {
-    var {r, g, b, a} = color.toRgb();
-    return `rgba(${r}, ${g}, ${b}, ${a === undefined ? 1 : a})`;
-  } else {
+function colorToRgba(input: string): string {
+  var int32Color = normalizeColor(input);
+  if (int32Color === null) {
     return input;
   }
+
+  int32Color = int32Color || 0; // $FlowIssue
+
+  var a = ((int32Color & 0xff000000) >>> 24) / 255;
+  var r = (int32Color & 0x00ff0000) >>> 16;
+  var g = (int32Color & 0x0000ff00) >>> 8;
+  var b = int32Color & 0x000000ff;
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
 }
 
 var stringShapeRegex = /[0-9\.-]+/g;

Libraries/Animated/src/__tests__/Interpolation-test.js

@@ -11,7 +11,7 @@
 jest
   .dontMock('Interpolation')
   .dontMock('Easing')
-  .dontMock('tinycolor');
+  .dontMock('normalizeColor');
 
 var Interpolation = require('Interpolation');
 var Easing = require('Easing');
@@ -216,12 +216,12 @@ describe('Interpolation', () => {
   it('should work with output ranges as string', () => {
     var interpolation = Interpolation.create({
       inputRange: [0, 1],
-      outputRange: ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.5)'],
+      outputRange: ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.4)'],
     });
 
     expect(interpolation(0)).toBe('rgba(0, 100, 200, 0)');
-    expect(interpolation(0.5)).toBe('rgba(25, 125, 225, 0.25)');
-    expect(interpolation(1)).toBe('rgba(50, 150, 250, 0.5)');
+    expect(interpolation(0.5)).toBe('rgba(25, 125, 225, 0.2)');
+    expect(interpolation(1)).toBe('rgba(50, 150, 250, 0.4)');
   });
 
   it('should work with output ranges as short hex string', () => {
@@ -249,11 +249,11 @@ describe('Interpolation', () => {
   it('should work with output ranges with mixed hex and rgba strings', () => {
     var interpolation = Interpolation.create({
       inputRange: [0, 1],
-      outputRange: ['rgba(100, 120, 140, .5)', '#87FC70'],
+      outputRange: ['rgba(100, 120, 140, .4)', '#87FC70'],
     });
 
-    expect(interpolation(0)).toBe('rgba(100, 120, 140, 0.5)');
-    expect(interpolation(0.5)).toBe('rgba(117.5, 186, 126, 0.75)');
+    expect(interpolation(0)).toBe('rgba(100, 120, 140, 0.4)');
+    expect(interpolation(0.5)).toBe('rgba(117.5, 186, 126, 0.7)');
     expect(interpolation(1)).toBe('rgba(135, 252, 112, 1)');
   });
 

Libraries/AppState/AppState.js

@@ -0,0 +1,142 @@
+/**
+ * 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.
+ *
+ * @providesModule AppState
+ * @flow
+ */
+'use strict';
+
+var Map = require('Map');
+var NativeModules = require('NativeModules');
+var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
+var RCTAppState = NativeModules.AppState;
+
+var logError = require('logError');
+var invariant = require('invariant');
+
+var _eventHandlers = {
+  change: new Map(),
+  memoryWarning: new Map(),
+};
+
+/**
+ * `AppState` can tell you if the app is in the foreground or background,
+ * and notify you when the state changes.
+ *
+ * AppState is frequently used to determine the intent and proper behavior when
+ * handling push notifications.
+ *
+ * ### App States
+ *
+ *  - `active` - The app is running in the foreground
+ *  - `background` - The app is running in the background. The user is either
+ *     in another app or on the home screen
+ *  - `inactive` - This is a transition state that currently never happens for
+ *     typical React Native apps.
+ *
+ * For more information, see
+ * [Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html)
+ *
+ * ### Basic Usage
+ *
+ * To see the current state, you can check `AppState.currentState`, which
+ * will be kept up-to-date. However, `currentState` will be null at launch
+ * while `AppState` retrieves it over the bridge.
+ *
+ * ```
+ * getInitialState: function() {
+ *   return {
+ *     currentAppState: AppState.currentState,
+ *   };
+ * },
+ * componentDidMount: function() {
+ *   AppState.addEventListener('change', this._handleAppStateChange);
+ * },
+ * componentWillUnmount: function() {
+ *   AppState.removeEventListener('change', this._handleAppStateChange);
+ * },
+ * _handleAppStateChange: function(currentAppState) {
+ *   this.setState({ currentAppState, });
+ * },
+ * render: function() {
+ *   return (
+ *     <Text>Current state is: {this.state.currentAppState}</Text>
+ *   );
+ * },
+ * ```
+ *
+ * This example will only ever appear to say "Current state is: active" because
+ * the app is only visible to the user when in the `active` state, and the null
+ * state will happen only momentarily.
+ */
+
+var AppState = {
+
+  /**
+   * Add a handler to AppState changes by listening to the `change` event type
+   * and providing the handler
+   */
+  addEventListener: function(
+    type: string,
+    handler: Function
+  ) {
+    invariant(
+      ['change', 'memoryWarning'].indexOf(type) !== -1,
+      'Trying to subscribe to unknown event: "%s"', type
+    );
+    if (type === 'change') {
+      _eventHandlers[type].set(handler, RCTDeviceEventEmitter.addListener(
+        'appStateDidChange',
+        (appStateData) => {
+          handler(appStateData.app_state);
+        }
+      ));
+    } else if (type === 'memoryWarning') {
+      _eventHandlers[type].set(handler, RCTDeviceEventEmitter.addListener(
+        'memoryWarning',
+        handler
+      ));
+    }
+  },
+
+  /**
+   * Remove a handler by passing the `change` event type and the handler
+   */
+  removeEventListener: function(
+    type: string,
+    handler: Function
+  ) {
+    invariant(
+      ['change', 'memoryWarning'].indexOf(type) !== -1,
+      'Trying to remove listener for unknown event: "%s"', type
+    );
+    if (!_eventHandlers[type].has(handler)) {
+      return;
+    }
+    _eventHandlers[type].get(handler).remove();
+    _eventHandlers[type].delete(handler);
+  },
+
+  currentState: ('active' : ?string),
+};
+
+RCTDeviceEventEmitter.addListener(
+  'appStateDidChange',
+  (appStateData) => {
+    AppState.currentState = appStateData.app_state;
+  }
+);
+
+RCTAppState.getCurrentAppState(
+  (appStateData) => {
+    AppState.currentState = appStateData.app_state;
+  },
+  logError
+);
+
+module.exports = AppState;

Libraries/AppStateIOS/AppStateIOS.ios.js

@@ -11,7 +11,6 @@
  */
 'use strict';
 
-var Map = require('Map');
 var NativeModules = require('NativeModules');
 var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
 var RCTAppState = NativeModules.AppState;

Libraries/BatchedBridge/BatchedBridgedModules/NativeModules.js

@@ -56,8 +56,8 @@ Object.keys(RemoteModules).forEach((moduleName) => {
 });
 
 /**
- * Copies the ViewManager constants into UIManager. This is only
- * needed for iOS, which puts the constants in the ViewManager
+ * Copies the ViewManager constants and commands into UIManager. This is
+ * only needed for iOS, which puts the constants in the ViewManager
  * namespace instead of UIManager, unlike Android.
  *
  * We'll eventually move this logic to UIManager.js, once all
@@ -67,12 +67,16 @@ Object.keys(RemoteModules).forEach((moduleName) => {
 const UIManager = NativeModules.UIManager;
 UIManager && Object.keys(UIManager).forEach(viewName => {
   const viewConfig = UIManager[viewName];
-  const constants = {};
   if (viewConfig.Manager) {
+    let constants;
     /* $FlowFixMe - nice try. Flow doesn't like getters */
     Object.defineProperty(viewConfig, 'Constants', {
       enumerable: true,
       get: () => {
+        if (constants) {
+          return constants;
+        }
+        constants = {};
         const viewManager = NativeModules[normalizePrefix(viewConfig.Manager)];
         viewManager && Object.keys(viewManager).forEach(key => {
           const value = viewManager[key];
@@ -83,6 +87,25 @@ UIManager && Object.keys(UIManager).forEach(viewName => {
         return constants;
       },
     });
+    let commands;
+    /* $FlowFixMe - nice try. Flow doesn't like getters */
+    Object.defineProperty(viewConfig, 'Commands', {
+      enumerable: true,
+      get: () => {
+        if (commands) {
+          return commands;
+        }
+        commands = {};
+        const viewManager = NativeModules[normalizePrefix(viewConfig.Manager)];
+        viewManager && Object.keys(viewManager).forEach((key, index) => {
+          const value = viewManager[key];
+          if (typeof value === 'function') {
+            commands[key] = index;
+          }
+        });
+        return commands;
+      },
+    });
   }
 });
 

Libraries/CameraRoll/CameraRoll.js

@@ -35,7 +35,6 @@ var ASSET_TYPE_OPTIONS = [
   'Photos', // default
 ];
 
-
 // Flow treats Object and Array as disjoint types, currently.
 deepFreezeAndThrowOnMutationInDev((GROUP_TYPES_OPTIONS: any));
 deepFreezeAndThrowOnMutationInDev((ASSET_TYPE_OPTIONS: any));
@@ -119,10 +118,7 @@ class CameraRoll {
   /**
    * Saves the image to the camera roll / gallery.
    *
-   * The CameraRoll API is not yet implemented for Android.
-   *
-   * @param {string} tag On Android, this is a local URI, such
-   * as `"file:///sdcard/img.png"`.
+   * On Android, the tag is a local URI, such as `"file:///sdcard/img.png"`.
    *
    * On iOS, the tag can be one of the following:
    *
@@ -131,57 +127,54 @@ class CameraRoll {
    *   - a tag not matching any of the above, which means the image data will
    * be stored in memory (and consume memory as long as the process is alive)
    *
-   * @param successCallback Invoked with the value of `tag` on success.
-   * @param errorCallback Invoked with error message on error.
+   * Returns a Promise which when resolved will be passed the new URI.
    */
-  static saveImageWithTag(tag, successCallback, errorCallback) {
+  static saveImageWithTag(tag) {
     invariant(
       typeof tag === 'string',
       'CameraRoll.saveImageWithTag tag must be a valid string.'
     );
-    RCTCameraRollManager.saveImageWithTag(
-      tag,
-      (imageTag) => {
-        successCallback && successCallback(imageTag);
-      },
-      (errorMessage) => {
-        errorCallback && errorCallback(errorMessage);
-      });
+    if (arguments.length > 1) {
+      console.warn("CameraRoll.saveImageWithTag(tag, success, error) is deprecated.  Use the returned Promise instead");
+      let successCallback = arguments[1];
+      let errorCallback = arguments[2] || ( () => {} );
+      RCTCameraRollManager.saveImageWithTag(tag).then(successCallback, errorCallback);
+      return;
+    }
+    return RCTCameraRollManager.saveImageWithTag(tag);
   }
 
   /**
-   *  Invokes `callback` with photo identifier objects from the local camera
-   *  roll of the device matching shape defined by `getPhotosReturnChecker`.
+   * Returns a Promise with photo identifier objects from the local camera
+   * roll of the device matching shape defined by `getPhotosReturnChecker`.
    *
-   *  @param {object} params See `getPhotosParamChecker`.
-   *  @param {function} callback Invoked with arg of shape defined by
-   *  `getPhotosReturnChecker` on success.
-   *  @param {function} errorCallback Invoked with error message on error.
+   * @param {object} params See `getPhotosParamChecker`.
+   *
+   * Returns a Promise which when resolved will be of shape `getPhotosReturnChecker`.
    */
-  static getPhotos(params, callback, errorCallback) {
-    var metaCallback = callback;
+  static getPhotos(params) {
     if (__DEV__) {
       getPhotosParamChecker({params}, 'params', 'CameraRoll.getPhotos');
-      invariant(
-        typeof callback === 'function',
-        'CameraRoll.getPhotos callback must be a valid function.'
-      );
-      invariant(
-        typeof errorCallback === 'function',
-        'CameraRoll.getPhotos errorCallback must be a valid function.'
-      );
     }
-    if (__DEV__) {
-      metaCallback = (response) => {
-        getPhotosReturnChecker(
-          {response},
-          'response',
-          'CameraRoll.getPhotos callback'
-        );
-        callback(response);
-      };
+    if (arguments.length > 1) {
+      console.warn("CameraRoll.getPhotos(tag, success, error) is deprecated.  Use the returned Promise instead");
+      let successCallback = arguments[1];
+      if (__DEV__) {
+        let callback = arguments[1];
+        successCallback = (response) => {
+          getPhotosReturnChecker(
+            {response},
+            'response',
+            'CameraRoll.getPhotos callback'
+          );
+          callback(response);
+        };
+      }
+      let errorCallback = arguments[2] || ( () => {} );
+      RCTCameraRollManager.getPhotos(params).then(successCallback, errorCallback);
     }
-    RCTCameraRollManager.getPhotos(params, metaCallback, errorCallback);
+    // TODO: Add the __DEV__ check back in to verify the Promise result
+    return RCTCameraRollManager.getPhotos(params);
   }
 }
 

Libraries/CameraRoll/RCTAssetsLibraryImageLoader.m

@@ -1,168 +0,0 @@
-/**
- * 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.
- */
-
-#import "RCTAssetsLibraryImageLoader.h"
-
-#import <AssetsLibrary/AssetsLibrary.h>
-#import <ImageIO/ImageIO.h>
-#import <libkern/OSAtomic.h>
-#import <UIKit/UIKit.h>
-
-#import "RCTBridge.h"
-#import "RCTConvert.h"
-#import "RCTImageLoader.h"
-#import "RCTImageUtils.h"
-#import "RCTUtils.h"
-
-static dispatch_queue_t RCTAssetsLibraryImageLoaderQueue(void);
-
-@implementation RCTAssetsLibraryImageLoader
-{
-  ALAssetsLibrary *_assetsLibrary;
-}
-
-RCT_EXPORT_MODULE()
-
-@synthesize bridge = _bridge;
-
-- (ALAssetsLibrary *)assetsLibrary
-{
-  return _assetsLibrary ?: (_assetsLibrary = [ALAssetsLibrary new]);
-}
-
-#pragma mark - RCTImageLoader
-
-- (BOOL)canLoadImageURL:(NSURL *)requestURL
-{
-  return [requestURL.scheme caseInsensitiveCompare:@"assets-library"] == NSOrderedSame;
-}
-
-- (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
-                                              size:(CGSize)size
-                                             scale:(CGFloat)scale
-                                        resizeMode:(UIViewContentMode)resizeMode
-                                   progressHandler:(RCTImageLoaderProgressBlock)progressHandler
-                                 completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
-{
-  __block volatile uint32_t cancelled = 0;
-
-  [[self assetsLibrary] assetForURL:imageURL resultBlock:^(ALAsset *asset) {
-    if (cancelled) {
-      return;
-    }
-
-    if (asset) {
-      // ALAssetLibrary API is async and will be multi-threaded. Loading a few full
-      // resolution images at once will spike the memory up to store the image data,
-      // and might trigger memory warnings and/or OOM crashes.
-      // To improve this, process the loaded asset in a serial queue.
-      dispatch_async(RCTAssetsLibraryImageLoaderQueue(), ^{
-        if (cancelled) {
-          return;
-        }
-
-        // Also make sure the image is released immediately after it's used so it
-        // doesn't spike the memory up during the process.
-        @autoreleasepool {
-          BOOL useMaximumSize = CGSizeEqualToSize(size, CGSizeZero);
-          ALAssetRepresentation *representation = [asset defaultRepresentation];
-
-#if RCT_DEV
-
-          CGSize sizeBeingLoaded = size;
-          if (useMaximumSize) {
-            CGSize pointSize = representation.dimensions;
-            sizeBeingLoaded = CGSizeMake(pointSize.width * representation.scale, pointSize.height * representation.scale);
-          }
-
-          CGSize screenSize;
-          if ([[[UIDevice currentDevice] systemVersion] compare:@"8.0" options:NSNumericSearch] == NSOrderedDescending) {
-            screenSize = [UIScreen mainScreen].nativeBounds.size;
-          } else {
-            CGSize mainScreenSize = [UIScreen mainScreen].bounds.size;
-            CGFloat mainScreenScale = [[UIScreen mainScreen] scale];
-            screenSize = CGSizeMake(mainScreenSize.width * mainScreenScale, mainScreenSize.height * mainScreenScale);
-          }
-          CGFloat maximumPixelDimension = fmax(screenSize.width, screenSize.height);
-
-          if (sizeBeingLoaded.width > maximumPixelDimension || sizeBeingLoaded.height > maximumPixelDimension) {
-            RCTLogInfo(@"[PERF ASSETS] Loading %@ at size %@, which is larger than screen size %@",
-                       representation.filename, NSStringFromCGSize(sizeBeingLoaded), NSStringFromCGSize(screenSize));
-          }
-
-#endif
-
-          UIImage *image = nil;
-          NSError *error = nil;
-          if (useMaximumSize) {
-
-            image = [UIImage imageWithCGImage:representation.fullResolutionImage
-                                        scale:scale
-                                  orientation:(UIImageOrientation)representation.orientation];
-          } else {
-
-            NSUInteger length = (NSUInteger)representation.size;
-            uint8_t *buffer = (uint8_t *)malloc((size_t)length);
-            if ([representation getBytes:buffer
-                                fromOffset:0
-                                    length:length
-                                      error:&error]) {
-
-              NSData *data = [[NSData alloc] initWithBytesNoCopy:buffer
-                                                          length:length
-                                                    freeWhenDone:YES];
-
-              image = RCTDecodeImageWithData(data, size, scale, resizeMode);
-            } else {
-              free(buffer);
-            }
-          }
-
-          completionHandler(error, image);
-        }
-      });
-    } else {
-      NSString *errorText = [NSString stringWithFormat:@"Failed to load asset at URL %@ with no error message.", imageURL];
-      completionHandler(RCTErrorWithMessage(errorText), nil);
-    }
-  } failureBlock:^(NSError *loadError) {
-    if (cancelled) {
-      return;
-    }
-
-    NSString *errorText = [NSString stringWithFormat:@"Failed to load asset at URL %@.\niOS Error: %@", imageURL, loadError];
-    completionHandler(RCTErrorWithMessage(errorText), nil);
-  }];
-
-  return ^{
-    OSAtomicOr32Barrier(1, &cancelled);
-  };
-}
-
-@end
-
-@implementation RCTBridge (RCTAssetsLibraryImageLoader)
-
-- (ALAssetsLibrary *)assetsLibrary
-{
-  return [[self moduleForClass:[RCTAssetsLibraryImageLoader class]] assetsLibrary];
-}
-
-@end
-
-static dispatch_queue_t RCTAssetsLibraryImageLoaderQueue(void)
-{
-  static dispatch_queue_t queue;
-  static dispatch_once_t onceToken;
-  dispatch_once(&onceToken, ^{
-    queue = dispatch_queue_create("com.facebook.RCTAssetsLibraryImageLoader", DISPATCH_QUEUE_SERIAL);
-  });
-
-  return queue;
-}

Libraries/CameraRoll/RCTAssetsLibraryRequestHandler.h

@@ -7,9 +7,12 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-#import "RCTImageLoader.h"
+#import "RCTBridge.h"
+#import "RCTURLRequestHandler.h"
 
-@interface RCTAssetsLibraryImageLoader : NSObject <RCTImageURLLoader>
+@class ALAssetsLibrary;
+
+@interface RCTAssetsLibraryRequestHandler : NSObject <RCTURLRequestHandler>
 
 @end
 

Libraries/CameraRoll/RCTAssetsLibraryRequestHandler.m

@@ -0,0 +1,114 @@
+/**
+ * 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.
+ */
+
+#import "RCTAssetsLibraryRequestHandler.h"
+
+#import <AssetsLibrary/AssetsLibrary.h>
+#import <libkern/OSAtomic.h>
+
+#import "RCTBridge.h"
+#import "RCTUtils.h"
+
+@implementation RCTAssetsLibraryRequestHandler
+{
+  ALAssetsLibrary *_assetsLibrary;
+}
+
+RCT_EXPORT_MODULE()
+
+@synthesize bridge = _bridge;
+
+- (ALAssetsLibrary *)assetsLibrary
+{
+  return _assetsLibrary ?: (_assetsLibrary = [ALAssetsLibrary new]);
+}
+
+#pragma mark - RCTURLRequestHandler
+
+- (BOOL)canHandleRequest:(NSURLRequest *)request
+{
+  return [request.URL.scheme caseInsensitiveCompare:@"assets-library"] == NSOrderedSame;
+}
+
+- (id)sendRequest:(NSURLRequest *)request
+     withDelegate:(id<RCTURLRequestDelegate>)delegate
+{
+  __block volatile uint32_t cancelled = 0;
+  void (^cancellationBlock)(void) = ^{
+    OSAtomicOr32Barrier(1, &cancelled);
+  };
+
+  [[self assetsLibrary] assetForURL:request.URL resultBlock:^(ALAsset *asset) {
+    if (cancelled) {
+      return;
+    }
+
+    if (asset) {
+
+      ALAssetRepresentation *representation = [asset defaultRepresentation];
+      NSInteger length = (NSInteger)representation.size;
+
+      NSURLResponse *response =
+      [[NSURLResponse alloc] initWithURL:request.URL
+                                MIMEType:representation.UTI
+                   expectedContentLength:length
+                        textEncodingName:nil];
+
+      [delegate URLRequest:cancellationBlock didReceiveResponse:response];
+
+      NSError *error = nil;
+      uint8_t *buffer = (uint8_t *)malloc((size_t)length);
+      if ([representation getBytes:buffer
+                        fromOffset:0
+                            length:length
+                             error:&error]) {
+
+        NSData *data = [[NSData alloc] initWithBytesNoCopy:buffer
+                                                    length:length
+                                              freeWhenDone:YES];
+
+        [delegate URLRequest:cancellationBlock didReceiveData:data];
+        [delegate URLRequest:cancellationBlock didCompleteWithError:nil];
+
+      } else {
+        free(buffer);
+        [delegate URLRequest:cancellationBlock didCompleteWithError:error];
+      }
+
+    } else {
+      NSString *errorMessage = [NSString stringWithFormat:@"Failed to load asset"
+                                " at URL %@ with no error message.", request.URL];
+      NSError *error = RCTErrorWithMessage(errorMessage);
+      [delegate URLRequest:cancellationBlock didCompleteWithError:error];
+    }
+  } failureBlock:^(NSError *loadError) {
+    if (cancelled) {
+      return;
+    }
+    [delegate URLRequest:cancellationBlock didCompleteWithError:loadError];
+  }];
+
+  return cancellationBlock;
+}
+
+- (void)cancelRequest:(id)requestToken
+{
+  ((void (^)(void))requestToken)();
+}
+
+@end
+
+@implementation RCTBridge (RCTAssetsLibraryImageLoader)
+
+- (ALAssetsLibrary *)assetsLibrary
+{
+  return [[self moduleForClass:[RCTAssetsLibraryRequestHandler class]] assetsLibrary];
+}
+
+@end

Libraries/CameraRoll/RCTCameraRoll.xcodeproj/project.pbxproj

@@ -9,7 +9,7 @@
 /* Begin PBXBuildFile section */
 		137620351B31C53500677FF0 /* RCTImagePickerManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 137620341B31C53500677FF0 /* RCTImagePickerManager.m */; };
 		143879351AAD238D00F088A5 /* RCTCameraRollManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 143879341AAD238D00F088A5 /* RCTCameraRollManager.m */; };
-		8312EAEE1B85EB7C001867A2 /* RCTAssetsLibraryImageLoader.m in Sources */ = {isa = PBXBuildFile; fileRef = 8312EAED1B85EB7C001867A2 /* RCTAssetsLibraryImageLoader.m */; };
+		8312EAEE1B85EB7C001867A2 /* RCTAssetsLibraryRequestHandler.m in Sources */ = {isa = PBXBuildFile; fileRef = 8312EAED1B85EB7C001867A2 /* RCTAssetsLibraryRequestHandler.m */; };
 		8312EAF11B85F071001867A2 /* RCTPhotoLibraryImageLoader.m in Sources */ = {isa = PBXBuildFile; fileRef = 8312EAF01B85F071001867A2 /* RCTPhotoLibraryImageLoader.m */; };
 /* End PBXBuildFile section */
 
@@ -31,8 +31,8 @@
 		143879331AAD238D00F088A5 /* RCTCameraRollManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTCameraRollManager.h; sourceTree = "<group>"; };
 		143879341AAD238D00F088A5 /* RCTCameraRollManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTCameraRollManager.m; sourceTree = "<group>"; };
 		58B5115D1A9E6B3D00147676 /* libRCTCameraRoll.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRCTCameraRoll.a; sourceTree = BUILT_PRODUCTS_DIR; };
-		8312EAEC1B85EB7C001867A2 /* RCTAssetsLibraryImageLoader.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTAssetsLibraryImageLoader.h; sourceTree = "<group>"; };
-		8312EAED1B85EB7C001867A2 /* RCTAssetsLibraryImageLoader.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTAssetsLibraryImageLoader.m; sourceTree = "<group>"; };
+		8312EAEC1B85EB7C001867A2 /* RCTAssetsLibraryRequestHandler.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTAssetsLibraryRequestHandler.h; sourceTree = "<group>"; };
+		8312EAED1B85EB7C001867A2 /* RCTAssetsLibraryRequestHandler.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTAssetsLibraryRequestHandler.m; sourceTree = "<group>"; };
 		8312EAEF1B85F071001867A2 /* RCTPhotoLibraryImageLoader.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTPhotoLibraryImageLoader.h; sourceTree = "<group>"; };
 		8312EAF01B85F071001867A2 /* RCTPhotoLibraryImageLoader.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTPhotoLibraryImageLoader.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -51,8 +51,8 @@
 		58B511541A9E6B3D00147676 = {
 			isa = PBXGroup;
 			children = (
-				8312EAEC1B85EB7C001867A2 /* RCTAssetsLibraryImageLoader.h */,
-				8312EAED1B85EB7C001867A2 /* RCTAssetsLibraryImageLoader.m */,
+				8312EAEC1B85EB7C001867A2 /* RCTAssetsLibraryRequestHandler.h */,
+				8312EAED1B85EB7C001867A2 /* RCTAssetsLibraryRequestHandler.m */,
 				143879331AAD238D00F088A5 /* RCTCameraRollManager.h */,
 				143879341AAD238D00F088A5 /* RCTCameraRollManager.m */,
 				137620331B31C53500677FF0 /* RCTImagePickerManager.h */,
@@ -129,7 +129,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				8312EAEE1B85EB7C001867A2 /* RCTAssetsLibraryImageLoader.m in Sources */,
+				8312EAEE1B85EB7C001867A2 /* RCTAssetsLibraryRequestHandler.m in Sources */,
 				8312EAF11B85F071001867A2 /* RCTPhotoLibraryImageLoader.m in Sources */,
 				137620351B31C53500677FF0 /* RCTImagePickerManager.m in Sources */,
 				143879351AAD238D00F088A5 /* RCTCameraRollManager.m in Sources */,

Libraries/CameraRoll/RCTCameraRollManager.m

@@ -13,7 +13,7 @@
 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
 
-#import "RCTAssetsLibraryImageLoader.h"
+#import "RCTAssetsLibraryRequestHandler.h"
 #import "RCTBridge.h"
 #import "RCTConvert.h"
 #import "RCTImageLoader.h"
@@ -79,13 +79,16 @@ RCT_EXPORT_MODULE()
 
 @synthesize bridge = _bridge;
 
+NSString *const RCTErrorUnableToLoad = @"E_UNABLE_TO_LOAD";
+NSString *const RCTErrorUnableToSave = @"E_UNABLE_TO_SAVE";
+
 RCT_EXPORT_METHOD(saveImageWithTag:(NSString *)imageTag
-                  successCallback:(RCTResponseSenderBlock)successCallback
-                  errorCallback:(RCTResponseErrorBlock)errorCallback)
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
 {
   [_bridge.imageLoader loadImageWithTag:imageTag callback:^(NSError *loadError, UIImage *loadedImage) {
     if (loadError) {
-      errorCallback(loadError);
+      reject(RCTErrorUnableToLoad, nil, loadError);
       return;
     }
     // It's unclear if writeImageToSavedPhotosAlbum is thread-safe
@@ -93,21 +96,21 @@ RCT_EXPORT_METHOD(saveImageWithTag:(NSString *)imageTag
       [_bridge.assetsLibrary writeImageToSavedPhotosAlbum:loadedImage.CGImage metadata:nil completionBlock:^(NSURL *assetURL, NSError *saveError) {
         if (saveError) {
           RCTLogWarn(@"Error saving cropped image: %@", saveError);
-          errorCallback(saveError);
+          reject(RCTErrorUnableToSave, nil, saveError);
         } else {
-          successCallback(@[assetURL.absoluteString]);
+          resolve(@[assetURL.absoluteString]);
         }
       }];
     });
   }];
 }
 
-static void RCTCallCallback(RCTResponseSenderBlock callback,
-                            NSArray<NSDictionary<NSString *, id> *> *assets,
-                            BOOL hasNextPage)
+static void RCTResolvePromise(RCTPromiseResolveBlock resolve,
+                              NSArray<NSDictionary<NSString *, id> *> *assets,
+                              BOOL hasNextPage)
 {
   if (!assets.count) {
-    callback(@[@{
+    resolve(@[@{
       @"edges": assets,
       @"page_info": @{
         @"has_next_page": @NO,
@@ -115,7 +118,7 @@ static void RCTCallCallback(RCTResponseSenderBlock callback,
     }]);
     return;
   }
-  callback(@[@{
+  resolve(@[@{
     @"edges": assets,
     @"page_info": @{
       @"start_cursor": assets[0][@"node"][@"image"][@"uri"],
@@ -126,8 +129,8 @@ static void RCTCallCallback(RCTResponseSenderBlock callback,
 }
 
 RCT_EXPORT_METHOD(getPhotos:(NSDictionary *)params
-                  successCallback:(RCTResponseSenderBlock)successCallback
-                  errorCallback:(RCTResponseErrorBlock)errorCallback)
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
 {
   NSUInteger first = [RCTConvert NSInteger:params[@"first"]];
   NSString *afterCursor = [RCTConvert NSString:params[@"after"]];
@@ -137,7 +140,7 @@ RCT_EXPORT_METHOD(getPhotos:(NSDictionary *)params
 
   BOOL __block foundAfter = NO;
   BOOL __block hasNextPage = NO;
-  BOOL __block calledCallback = NO;
+  BOOL __block resolvedPromise = NO;
   NSMutableArray<NSDictionary<NSString *, id> *> *assets = [NSMutableArray new];
 
   [_bridge.assetsLibrary enumerateGroupsWithTypes:groupTypes usingBlock:^(ALAssetsGroup *group, BOOL *stopGroups) {
@@ -157,9 +160,9 @@ RCT_EXPORT_METHOD(getPhotos:(NSDictionary *)params
             *stopAssets = YES;
             *stopGroups = YES;
             hasNextPage = YES;
-            RCTAssert(calledCallback == NO, @"Called the callback before we finished processing the results.");
-            RCTCallCallback(successCallback, assets, hasNextPage);
-            calledCallback = YES;
+            RCTAssert(resolvedPromise == NO, @"Resolved the promise before we finished processing the results.");
+            RCTResolvePromise(resolve, assets, hasNextPage);
+            resolvedPromise = YES;
             return;
           }
           CGSize dimensions = [result defaultRepresentation].dimensions;
@@ -188,18 +191,18 @@ RCT_EXPORT_METHOD(getPhotos:(NSDictionary *)params
         }
       }];
     } else {
-      // Sometimes the enumeration continues even if we set stop above, so we guard against calling the callback
+      // Sometimes the enumeration continues even if we set stop above, so we guard against resolving the promise
       // multiple times here.
-      if (!calledCallback) {
-        RCTCallCallback(successCallback, assets, hasNextPage);
-        calledCallback = YES;
+      if (!resolvedPromise) {
+        RCTResolvePromise(resolve, assets, hasNextPage);
+        resolvedPromise = YES;
       }
     }
   } failureBlock:^(NSError *error) {
     if (error.code != ALAssetsLibraryAccessUserDeniedError) {
       RCTLogError(@"Failure while iterating through asset groups %@", error);
     }
-    errorCallback(error);
+    reject(RCTErrorUnableToLoad, nil, error);
   }];
 }
 

Libraries/CameraRoll/RCTPhotoLibraryImageLoader.m

@@ -30,7 +30,7 @@ RCT_EXPORT_MODULE()
 - (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
                                               size:(CGSize)size
                                              scale:(CGFloat)scale
-                                        resizeMode:(UIViewContentMode)resizeMode
+                                        resizeMode:(RCTResizeMode)resizeMode
                                    progressHandler:(RCTImageLoaderProgressBlock)progressHandler
                                  completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
 {
@@ -71,7 +71,7 @@ RCT_EXPORT_MODULE()
   }
 
   PHImageContentMode contentMode = PHImageContentModeAspectFill;
-  if (resizeMode == UIViewContentModeScaleAspectFit) {
+  if (resizeMode == RCTResizeModeContain) {
     contentMode = PHImageContentModeAspectFit;
   }
 

Libraries/Components/Clipboard/Clipboard.js

@@ -10,4 +10,39 @@
  */
 'use strict';
 
-module.exports = require('NativeModules').Clipboard;
+var Clipboard = require('NativeModules').Clipboard;
+
+/**
+ * `Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android
+ */
+module.exports = {
+  /**
+   * Get content of string type, this method returns a `Promise`, so you can use following code to get clipboard content
+   * ```javascript
+   * async _getContent() {
+   *   var content = await Clipboard.getString();
+   * }
+   * ```
+   */
+  getString() {
+    if (arguments.length > 0) {
+      let callback = arguments[0];
+      console.warn('Clipboard.getString(callback) is deprecated. Use the returned Promise instead');
+      Clipboard.getString().then(callback);
+      return;
+    }
+    return Clipboard.getString();
+  },
+  /**
+   * Set content of string type. You can use following code to set clipboard content
+   * ```javascript
+   * _setContent() {
+   *   Clipboard.setString('hello world');
+   * }
+   * ```
+   * @param the content to be stored in the clipboard.
+   */
+  setString(content) {
+    Clipboard.setString(content);
+  }
+};

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -16,7 +16,7 @@
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var PropTypes = require('ReactPropTypes');
 var React = require('React');
-var RCTDatePickerIOSConsts = require('NativeModules').UIManager.RCTDatePicker.Constants;
+var RCTDatePickerIOSConsts = require('UIManager').RCTDatePicker.Constants;
 var StyleSheet = require('StyleSheet');
 var View = require('View');
 

Libraries/Components/DatePickerAndroid/DatePickerAndroid.android.js

@@ -0,0 +1,84 @@
+/**
+ * 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.
+ *
+ * @providesModule DatePickerAndroid
+ * @flow
+ */
+'use strict';
+
+const DatePickerModule = require('NativeModules').DatePickerAndroid;
+
+/**
+ * Convert a Date to a timestamp.
+ */
+function _toMillis(options: Object, key: string) {
+  const dateVal = options[key];
+  // Is it a Date object?
+  if (typeof dateVal === 'object' && typeof dateVal.getMonth === 'function') {
+    options[key] = dateVal.getTime();
+  }
+}
+
+/**
+ * Opens the standard Android date picker dialog.
+ *
+ * ### Example
+ *
+ * ```
+ * try {
+ *   const {action, year, month, day} = await DatePickerAndroid.open({
+ *     // Use `new Date()` for current date.
+ *     // May 25 2020. Month 0 is January.
+ *     date: new Date(2020, 4, 25)
+ *   });
+ *   if (action !== DatePickerAndroid.dismissedAction) {
+ *     // Selected year, month (0-11), day
+ *   }
+ * } catch ({code, message}) {
+ *   console.warn('Cannot open date picker', message);
+ * }
+ * ```
+ */
+class DatePickerAndroid {
+  /**
+   * Opens the standard Android date picker dialog.
+   *
+   * The available keys for the `options` object are:
+   *   * `date` (`Date` object or timestamp in milliseconds) - date to show by default
+   *   * `minDate` (`Date` or timestamp in milliseconds) - minimum date that can be selected
+   *   * `maxDate` (`Date` object or timestamp in milliseconds) - minimum date that can be selected
+   * 
+   * Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11),
+   * `day` if the user picked a date. If the user dismissed the dialog, the Promise will
+   * still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys
+   * being undefined. **Always** check whether the `action` before reading the values.
+   *
+   * Note the native date picker dialog has some UI glitches on Android 4 and lower
+   * when using the `minDate` and `maxDate` options.
+   */
+  static async open(options: Object): Promise<Object> {
+    let optionsMs = options;
+    if (optionsMs) {
+      _toMillis(options, 'date');
+      _toMillis(options, 'minDate');
+      _toMillis(options, 'maxDate');
+    }
+    return DatePickerModule.open(options);
+  }
+
+  /**
+   * A date has been selected.
+   */
+  static get dateSetAction() { return 'dateSetAction'; }
+  /**
+   * The dialog has been dismissed.
+   */
+  static get dismissedAction() { return 'dismissedAction'; }
+}
+
+module.exports = DatePickerAndroid;