Release React Native for Android

This is an early release and there are several things that are known
not to work if you're porting your iOS app to Android.

See the Known Issues guide on the website.

We will work with the community to reach platform parity with iOS.

Examples/UIExplorer/AccessibilityAndroidExample.android.js

@@ -0,0 +1,213 @@
+/**
+ * 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 {
+  StyleSheet,
+  Text,
+  View,
+  ToastAndroid,
+  TouchableWithoutFeedback,
+} = React;
+
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];
+
+var AccessibilityAndroidExample = React.createClass({
+
+  statics: {
+    title: 'Accessibility',
+    description: 'Examples of using Accessibility API.',
+  },
+
+  getInitialState: function() {
+    return {
+      count: 0,
+      backgroundImportantForAcc: 0,
+      forgroundImportantForAcc: 0,
+    };
+  },
+
+  _addOne: function() {
+    this.setState({
+      count: ++this.state.count,
+    });
+  },
+
+  _changeBackgroundImportantForAcc: function() {
+    this.setState({
+      backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4,
+    });
+  },
+
+  _changeForgroundImportantForAcc: function() {
+    this.setState({
+      forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4,
+    });
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title={'Accessibility'}>
+
+        <UIExplorerBlock title="Nonaccessible view with TextViews">
+          <View>
+            <Text style={{color: 'green',}}>
+              This is
+            </Text>
+            <Text style={{color: 'blue'}}>
+              nontouchable normal view.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Accessible view with TextViews wihout label">
+          <View accessible={true}>
+            <Text style={{color: 'green',}}>
+              This is
+            </Text>
+            <Text style={{color: 'blue'}}>
+              nontouchable accessible view without label.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Accessible view with TextViews with label">
+          <View accessible={true}
+            accessibilityLabel="I have label, so I read it instead of embedded text.">
+            <Text style={{color: 'green',}}>
+              This is
+            </Text>
+            <Text style={{color: 'blue'}}>
+              nontouchable accessible view with label.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Touchable with component type = button">
+          <TouchableWithoutFeedback
+            onPress={() => ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)}
+            accessibilityComponentType="button">
+            <View style={styles.embedded}>
+              <Text>Click me</Text>
+              <Text>Or not</Text>
+            </View>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="LiveRegion">
+          <TouchableWithoutFeedback onPress={this._addOne}>
+            <View style={styles.embedded}>
+              <Text>Click me</Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <Text accessibilityLiveRegion="polite">
+            Clicked {this.state.count} times
+          </Text>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Overlapping views and importantForAccessibility property">
+          <View style={styles.container}>
+            <View
+              style={{
+                position: 'absolute',
+                left: 10,
+                top: 10,
+                right: 10,
+                height: 100,
+                backgroundColor: 'green'}}
+              accessible={true}
+              accessibilityLabel="First layout"
+              importantForAccessibility={
+                importantForAccessibilityValues[this.state.backgroundImportantForAcc]}>
+              <View accessible={true}>
+                <Text style={{fontSize: 25}}>
+                  Hello
+                </Text>
+              </View>
+            </View>
+            <View
+              style={{
+                position: 'absolute',
+                left: 10,
+                top: 25,
+                right: 10,
+                height: 110,
+                backgroundColor: 'yellow', opacity: 0.5}}
+              accessible={true}
+              accessibilityLabel="Second layout"
+              importantForAccessibility={
+                importantForAccessibilityValues[this.state.forgroundImportantForAcc]}>
+              <View accessible={true}>
+                <Text style={{fontSize: 20}}>
+                  world
+                </Text>
+              </View>
+            </View>
+          </View>
+          <TouchableWithoutFeedback onPress={this._changeBackgroundImportantForAcc}>
+            <View style={styles.embedded}>
+              <Text>
+                Change importantForAccessibility for background layout.
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <View accessible={true}>
+            <Text>
+              Background layout importantForAccessibility
+            </Text>
+            <Text>
+              {importantForAccessibilityValues[this.state.backgroundImportantForAcc]}
+            </Text>
+          </View>
+          <TouchableWithoutFeedback onPress={this._changeForgroundImportantForAcc}>
+            <View style={styles.embedded}>
+              <Text>
+                Change importantForAccessibility for forground layout.
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <View accessible={true}>
+            <Text>
+              Forground layout importantForAccessibility
+            </Text>
+            <Text>
+              {importantForAccessibilityValues[this.state.forgroundImportantForAcc]}
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+      </UIExplorerPage>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+   embedded: {
+    backgroundColor: 'yellow',
+    padding:10,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    padding: 10,
+    height:150,
+  },
+});
+
+module.exports = AccessibilityAndroidExample;

Examples/UIExplorer/ProgressBarAndroidExample.android.js

@@ -0,0 +1,62 @@
+/**
+ * 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 ProgressBar = require('ProgressBarAndroid');
+var React = require('React');
+var UIExplorerBlock = require('UIExplorerBlock');
+var UIExplorerPage = require('UIExplorerPage');
+
+var ProgressBarAndroidExample = React.createClass({
+
+  statics: {
+    title: '<ProgressBarAndroid>',
+    description: 'Visual indicator of progress of some operation. ' +
+        'Shows either a cyclic animation or a horizontal bar.',
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title="ProgressBar Examples">
+        <UIExplorerBlock title="Default ProgressBar">
+          <ProgressBar />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Small ProgressBar">
+          <ProgressBar styleAttr="Small" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Large ProgressBar">
+          <ProgressBar styleAttr="Large" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Inverse ProgressBar">
+          <ProgressBar styleAttr="Inverse" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Small Inverse ProgressBar">
+          <ProgressBar styleAttr="SmallInverse" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Large Inverse ProgressBar">
+          <ProgressBar styleAttr="LargeInverse" />
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+});
+
+module.exports = ProgressBarAndroidExample;

Examples/UIExplorer/ScrollViewSimpleExample.js

@@ -30,6 +30,7 @@ var ScrollViewSimpleExample = React.createClass({
     title: '<ScrollView>',
     description: 'Component that enables scrolling through child components.'
   },
+
   makeItems: function(nItems: number, styles): Array<any> {
     var items = [];
     for (var i = 0; i < nItems; i++) {

Examples/UIExplorer/SwitchAndroidExample.android.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.
+ */
+'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/TextExample.android.js

@@ -0,0 +1,349 @@
+/**
+ * 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,
+  View,
+} = React;
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var Entity = React.createClass({
+  render: function() {
+    return (
+      <Text style={{fontWeight: 'bold', color: '#527fe4'}}>
+        {this.props.children}
+      </Text>
+    );
+  }
+});
+
+var AttributeToggler = React.createClass({
+  getInitialState: function() {
+    return {fontWeight: 'bold', fontSize: 15};
+  },
+  toggleWeight: function() {
+    this.setState({
+      fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
+    });
+  },
+  increaseSize: function() {
+    this.setState({
+      fontSize: this.state.fontSize + 1
+    });
+  },
+  render: function() {
+    var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
+    return (
+      <View>
+        <Text style={curStyle}>
+          Tap the controls below to change attributes.
+        </Text>
+        <Text>
+          <Text>See how it will even work on <Text style={curStyle}>this nested text</Text></Text>
+        </Text>
+        <Text>
+          <Text onPress={this.toggleWeight}>Toggle Weight</Text>
+          {' (with highlight onPress)'}
+        </Text>
+        <Text onPress={this.increaseSize} suppressHighlighting={true}>
+          Increase Size (suppressHighlighting true)
+        </Text>
+      </View>
+    );
+  }
+});
+
+var TextExample = React.createClass({
+  statics: {
+    title: '<Text>',
+    description: 'Base component for rendering styled text.',
+  },
+  render: function() {
+    return (
+      <UIExplorerPage title="<Text>">
+        <UIExplorerBlock title="Wrap">
+          <Text>
+            The text should wrap if it goes on multiple lines.
+            See, this is going to the next line.
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Padding">
+          <Text style={{padding: 10}}>
+            This text is indented by 10px padding on all sides.
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Family">
+          <Text style={{fontFamily: 'sans-serif'}}>
+            Sans-Serif
+          </Text>
+          <Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
+            Sans-Serif Bold
+          </Text>
+          <Text style={{fontFamily: 'serif'}}>
+            Serif
+          </Text>
+          <Text style={{fontFamily: 'serif', fontWeight: 'bold'}}>
+            Serif Bold
+          </Text>
+          <Text style={{fontFamily: 'monospace'}}>
+            Monospace
+          </Text>
+          <Text style={{fontFamily: 'monospace', fontWeight: 'bold'}}>
+            Monospace Bold (After 5.0)
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Android Material Design fonts">
+          <View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
+            <View style={{flex: 1}}>
+              <Text style={{fontFamily: 'sans-serif'}}>
+                Roboto Regular
+              </Text>
+              <Text style={{fontFamily: 'sans-serif', fontStyle: 'italic'}}>
+                Roboto Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
+                Roboto Bold
+              </Text>
+              <Text style={{fontFamily: 'sans-serif', fontStyle: 'italic', fontWeight: 'bold'}}>
+                Roboto Bold Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-light'}}>
+                Roboto Light
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-light', fontStyle: 'italic'}}>
+                Roboto Light Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-thin'}}>
+                Roboto Thin (After 4.2)
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-thin', fontStyle: 'italic'}}>
+                Roboto Thin Italic (After 4.2)
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-condensed'}}>
+                Roboto Condensed
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-condensed', fontStyle: 'italic'}}>
+                Roboto Condensed Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-condensed', fontWeight: 'bold'}}>
+                Roboto Condensed Bold
+              </Text>
+              <Text style={{
+                  fontFamily: 'sans-serif-condensed',
+                  fontStyle: 'italic',
+                  fontWeight: 'bold'}}>
+                Roboto Condensed Bold Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-medium'}}>
+                Roboto Medium (After 5.0)
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-medium', fontStyle: 'italic'}}>
+                Roboto Medium Italic (After 5.0)
+              </Text>
+            </View>
+          </View>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Size">
+          <Text style={{fontSize: 23}}>
+            Size 23
+          </Text>
+          <Text style={{fontSize: 8}}>
+            Size 8
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Color">
+          <Text style={{color: 'red'}}>
+            Red color
+          </Text>
+          <Text style={{color: 'blue'}}>
+            Blue color
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Weight">
+          <Text style={{fontWeight: 'bold'}}>
+            Move fast and be bold
+          </Text>
+          <Text style={{fontWeight: 'normal'}}>
+            Move fast and be bold
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Style">
+          <Text style={{fontStyle: 'italic'}}>
+            Move fast and be bold
+          </Text>
+          <Text style={{fontStyle: 'normal'}}>
+            Move fast and be bold
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Style and Weight">
+          <Text style={{fontStyle: 'italic', fontWeight: 'bold'}}>
+            Move fast and be bold
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Nested">
+          <Text onPress={() => console.log('1st')}>
+            (Normal text,
+            <Text style={{fontWeight: 'bold'}} onPress={() => console.log('2nd')}>
+              (and bold
+              <Text style={{fontStyle: 'italic', fontSize: 11, color: '#527fe4'}} onPress={() => console.log('3rd')}>
+                (and tiny bold italic blue
+                <Text style={{fontWeight: 'normal', fontStyle: 'normal'}} onPress={() => console.log('4th')}>
+                  (and tiny normal blue)
+                </Text>
+                )
+              </Text>
+              )
+            </Text>
+            )
+          </Text>
+          <Text style={{fontFamily: 'serif'}} onPress={() => console.log('1st')}>
+            (Serif
+            <Text style={{fontStyle: 'italic', fontWeight: 'bold'}} onPress={() => console.log('2nd')}>
+              (Serif Bold Italic
+              <Text
+                style={{fontFamily: 'monospace', fontStyle: 'normal', fontWeight: 'normal'}}
+                onPress={() => console.log('3rd')}>
+                (Monospace Normal
+                <Text
+                  style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}
+                  onPress={() => console.log('4th')}>
+                  (Sans-Serif Bold
+                  <Text style={{fontWeight: 'normal'}} onPress={() => console.log('5th')}>
+                    (and Sans-Serif Normal)
+                  </Text>
+                  )
+                </Text>
+                )
+              </Text>
+              )
+            </Text>
+            )
+          </Text>
+          <Text style={{fontSize: 12}}>
+            <Entity>Entity Name</Entity>
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Text Align">
+          <Text>
+            auto (default) - english LTR
+          </Text>
+          <Text>
+            أحب اللغة العربية auto (default) - arabic RTL
+          </Text>
+          <Text style={{textAlign: 'left'}}>
+            left left left left left left left left left left left left left left left
+          </Text>
+          <Text style={{textAlign: 'center'}}>
+            center center center center center center center center center center center
+          </Text>
+          <Text style={{textAlign: 'right'}}>
+            right right right right right right right right right right right right right
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Unicode">
+          <View style={{flex: 1}}>
+            <View style={{flexDirection: 'row'}}>
+              <Text style={{backgroundColor: 'red'}}>
+                星际争霸是世界上最好的游戏。
+              </Text>
+            </View>
+            <View style={{flex: 1}}>
+              <Text style={{backgroundColor: 'red'}}>
+                星际争霸是世界上最好的游戏。
+              </Text>
+            </View>
+            <View style={{flex: 1, alignItems: 'center'}}>
+              <Text style={{backgroundColor: 'red'}}>
+                星际争霸是世界上最好的游戏。
+              </Text>
+            </View>
+            <View style={{flex: 1}}>
+              <Text style={{backgroundColor: 'red'}}>
+                星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
+              </Text>
+            </View>
+          </View>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Spaces">
+          <Text>
+            A {'generated'} {' '} {'string'} and    some &nbsp;&nbsp;&nbsp; spaces
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Line Height">
+          <Text style={{lineHeight: 35}}>
+            Holisticly formulate inexpensive ideas before best-of-breed benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite magnetic potentialities rather than client-focused interfaces.
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Empty Text">
+          <Text />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toggling Attributes">
+          <AttributeToggler />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="backgroundColor attribute">
+          <Text style={{backgroundColor: '#ffaaaa'}}>
+            Red background,
+            <Text style={{backgroundColor: '#aaaaff'}}>
+              {' '}blue background,
+              <Text>
+                {' '}inherited blue background,
+                <Text style={{backgroundColor: '#aaffaa'}}>
+                  {' '}nested green background.
+                </Text>
+              </Text>
+            </Text>
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="containerBackgroundColor attribute">
+          <View style={{flexDirection: 'row', height: 85}}>
+            <View style={{backgroundColor: '#ffaaaa', width: 150}} />
+            <View style={{backgroundColor: '#aaaaff', width: 150}} />
+          </View>
+          <Text style={[styles.backgroundColorText, {top: -80}]}>
+            Default containerBackgroundColor (inherited) + backgroundColor wash
+          </Text>
+          <Text style={[styles.backgroundColorText, {top: -70, backgroundColor: 'transparent'}]}>
+            {"containerBackgroundColor: 'transparent' + backgroundColor wash"}
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="numberOfLines attribute">
+          <Text numberOfLines={1}>
+            Maximum of one line no matter now much I write here. If I keep writing it{"'"}ll just truncate after one line
+          </Text>
+          <Text numberOfLines={2} style={{marginTop: 20}}>
+            Maximum of two lines no matter now much I write here. If I keep writing it{"'"}ll just truncate after two lines
+          </Text>
+          <Text style={{marginTop: 20}}>
+            No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
+          </Text>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  backgroundColorText: {
+    left: 5,
+    backgroundColor: 'rgba(100, 100, 100, 0.3)'
+  },
+});
+
+module.exports = TextExample;

Examples/UIExplorer/TextInputExample.android.js

@@ -0,0 +1,316 @@
+/**
+ * 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 {
+  Text,
+  TextInput,
+  View,
+  StyleSheet,
+} = React;
+
+var TextEventsExample = React.createClass({
+  getInitialState: function() {
+    return {
+      curText: '<No Event>',
+      prevText: '<No Event>',
+      prev2Text: '<No Event>',
+    };
+  },
+
+  updateText: function(text) {
+    this.setState((state) => {
+      return {
+        curText: text,
+        prevText: state.curText,
+        prev2Text: state.prevText,
+      };
+    });
+  },
+
+  render: function() {
+    return (
+      <View>
+        <TextInput
+          autoCapitalize="none"
+          placeholder="Enter text to see events"
+          autoCorrect={false}
+          onFocus={() => this.updateText('onFocus')}
+          onBlur={() => this.updateText('onBlur')}
+          onChange={(event) => this.updateText(
+            'onChange text: ' + event.nativeEvent.text
+          )}
+          onEndEditing={(event) => this.updateText(
+            'onEndEditing text: ' + event.nativeEvent.text
+          )}
+          onSubmitEditing={(event) => this.updateText(
+            'onSubmitEditing text: ' + event.nativeEvent.text
+          )}
+          style={styles.singleLine}
+        />
+        <Text style={styles.eventLabel}>
+          {this.state.curText}{'\n'}
+          (prev: {this.state.prevText}){'\n'}
+          (prev2: {this.state.prev2Text})
+        </Text>
+      </View>
+    );
+  }
+});
+
+class RewriteExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+  }
+  render() {
+    return (
+      <TextInput
+        onChangeText={(text) => {
+          text = text.replace(/ /g, '_');
+          this.setState({text});
+        }}
+        style={styles.singleLine}
+        value={this.state.text}
+      />
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  multiline: {
+    height: 60,
+    fontSize: 16,
+    padding: 4,
+    marginBottom: 10,
+  },
+  eventLabel: {
+    margin: 3,
+    fontSize: 12,
+  },
+  singleLine: {
+    fontSize: 16,
+    padding: 4,
+  },
+  singleLineWithHeightTextInput: {
+    height: 30,
+  },
+});
+
+exports.title = '<TextInput>';
+exports.description = 'Single and multi-line text inputs.';
+exports.examples = [
+  {
+    title: 'Auto-focus',
+    render: function() {
+      return <TextInput autoFocus={true} style={styles.singleLine} />;
+    }
+  },
+  {
+    title: "Live Re-Write (<sp>  ->  '_')",
+    render: function() {
+      return <RewriteExample />;
+    }
+  },
+  {
+    title: 'Auto-capitalize',
+    render: function() {
+      var autoCapitalizeTypes = [
+        'none',
+        'sentences',
+        'words',
+        'characters',
+      ];
+      var examples = autoCapitalizeTypes.map((type) => {
+        return (
+          <TextInput
+            autoCapitalize={type}
+            placeholder={'autoCapitalize: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
+  {
+    title: 'Auto-correct',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            autoCorrect={true}
+            placeholder="This has autoCorrect"
+            style={styles.singleLine}
+          />
+          <TextInput
+            autoCorrect={false}
+            placeholder="This does not have autoCorrect"
+            style={styles.singleLine}
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Keyboard types',
+    render: function() {
+      var keyboardTypes = [
+        'default',
+        'email-address',
+        'numeric',
+      ];
+      var examples = keyboardTypes.map((type) => {
+        return (
+          <TextInput
+            keyboardType={type}
+            placeholder={'keyboardType: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
+  {
+    title: 'Event handling',
+    render: function(): ReactElement { return <TextEventsExample />; },
+  },
+  {
+    title: 'Colors and text inputs',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={[styles.singleLine]}
+            defaultValue="Default color text"
+          />
+          <TextInput
+            style={[styles.singleLine, {color: 'green'}]}
+            defaultValue="Green Text"
+          />
+          <TextInput
+            placeholder="Default placeholder text color"
+            style={styles.singleLine}
+          />
+          <TextInput
+            placeholder="Red placeholder text color"
+            placeholderTextColor="red"
+            style={styles.singleLine}
+          />
+          <TextInput
+            placeholder="Default underline color"
+            style={styles.singleLine}
+          />
+          <TextInput
+            placeholder="Blue underline color"
+            style={styles.singleLine}
+            underlineColorAndroid="blue"
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Text input, themes and heights',
+    render: function() {
+      return (
+        <TextInput
+          placeholder="If you set height, beware of padding set from themes"
+          style={[styles.singleLineWithHeightTextInput]}
+        />
+      );
+    }
+  },
+  {
+    title: 'Passwords',
+    render: function() {
+      return (
+        <TextInput
+          defaultValue="iloveturtles"
+          password={true}
+          style={styles.singleLine}
+        />
+      );
+    }
+  },
+  {
+    title: 'Editable',
+    render: function() {
+      return (
+        <TextInput
+           defaultValue="Can't touch this! (>'-')> ^(' - ')^ <('-'<) (>'-')> ^(' - ')^"
+           editable={false}
+           style={styles.singleLine}
+         />
+      );
+    }
+  },
+  {
+    title: 'Multiline',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            autoCorrect={true}
+            placeholder="multiline, aligned top-left"
+            placeholderTextColor="red"
+            multiline={true}
+            textAlign="start"
+            textAlignVertical="top"
+            style={styles.multiline}
+          />
+          <TextInput
+            autoCorrect={true}
+            placeholder="multiline, aligned center"
+            placeholderTextColor="green"
+            multiline={true}
+            textAlign="center"
+            textAlignVertical="center"
+            style={[styles.multiline]}
+          />
+          <TextInput
+            autoCorrect={true}
+            multiline={true}
+            textAlign="end"
+            textAlignVertical="bottom"
+            style={[styles.multiline, {color: 'blue'}]}>
+            <Text style={styles.multiline}>multiline with children, aligned bottom-right</Text>
+          </TextInput>
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Fixed number of lines',
+    platform: 'android',
+    render: function() {
+      return (
+        <View>
+          <TextInput numberOfLines={2}
+            multiline={true}
+            placeholder="Two line input"
+          />
+          <TextInput numberOfLines={5}
+            multiline={true}
+            placeholder="Five line input"
+          />
+        </View>
+      );
+    }
+  },
+];

Examples/UIExplorer/ToastAndroidExample.android.js

@@ -0,0 +1,68 @@
+/**
+ * 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,
+  ToastAndroid,
+  TouchableWithoutFeedback
+} = React;
+
+var UIExplorerBlock = require('UIExplorerBlock');
+var UIExplorerPage = require('UIExplorerPage');
+
+var ToastExample = React.createClass({
+
+  statics: {
+    title: 'Toast Example',
+    description: 'Toast Example',
+  },
+
+  getInitialState: function() {
+    return {};
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title="ToastAndroid">
+        <UIExplorerBlock title="Simple toast">
+          <TouchableWithoutFeedback
+            onPress={() =>
+              ToastAndroid.show('This is a toast with short duration', ToastAndroid.SHORT)}>
+            <Text style={styles.text}>Click me.</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toast with long duration">
+          <TouchableWithoutFeedback
+            onPress={() =>
+              ToastAndroid.show('This is a toast with long duration', ToastAndroid.LONG)}>
+            <Text style={styles.text}>Click me too.</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  text: {
+    color: 'black',
+  },
+});
+
+module.exports = ToastExample;

Examples/UIExplorer/ToolbarAndroidExample.android.js

@@ -0,0 +1,119 @@
+/**
+ * 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,
+  View,
+} = React;
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var SwitchAndroid = require('SwitchAndroid');
+var ToolbarAndroid = require('ToolbarAndroid');
+
+var ToolbarAndroidExample = React.createClass({
+  statics: {
+    title: '<ToolbarAndroid>',
+    description: 'Examples of using the Android toolbar.'
+  },
+  getInitialState: function() {
+    return {
+      actionText: 'Example app with toolbar component',
+      toolbarSwitch: false,
+      colorProps: {
+        titleColor: '#3b5998',
+        subtitleColor: '#6a7180',
+      },
+    };
+  },
+  render: function() {
+    return (
+      <UIExplorerPage title="<ToolbarAndroid>">
+        <UIExplorerBlock title="Toolbar with title/subtitle and actions">
+          <ToolbarAndroid
+            actions={toolbarActions}
+            navIcon={require('image!ic_menu_black_24dp')}
+            onActionSelected={this._onActionSelected}
+            onIconClicked={() => this.setState({actionText: 'Icon clicked'})}
+            style={styles.toolbar}
+            subtitle={this.state.actionText}
+            title="Toolbar" />
+          <Text>{this.state.actionText}</Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toolbar with logo & custom title view (a View with Switch+Text)">
+          <ToolbarAndroid
+            logo={require('image!launcher_icon')}
+            style={styles.toolbar}>
+            <View style={{height: 56, flexDirection: 'row', alignItems: 'center'}}>
+              <SwitchAndroid
+                value={this.state.toolbarSwitch}
+                onValueChange={(value) => this.setState({'toolbarSwitch': value})} />
+              <Text>{'\'Tis but a switch'}</Text>
+            </View>
+          </ToolbarAndroid>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toolbar with no icon">
+          <ToolbarAndroid
+            actions={toolbarActions}
+            style={styles.toolbar}
+            subtitle="There be no icon here" />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toolbar with navIcon & logo, no title">
+          <ToolbarAndroid
+            actions={toolbarActions}
+            logo={require('image!launcher_icon')}
+            navIcon={require('image!ic_menu_black_24dp')}
+            style={styles.toolbar} />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toolbar with custom title colors">
+          <ToolbarAndroid
+            navIcon={require('image!ic_menu_black_24dp')}
+            onIconClicked={() => this.setState({colorProps: {}})}
+            title="Wow, such toolbar"
+            style={styles.toolbar}
+            subtitle="Much native"
+            {...this.state.colorProps} />
+          <Text>
+            Touch the icon to reset the custom colors to the default (theme-provided) ones.
+          </Text>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+  _onActionSelected: function(position) {
+    this.setState({
+      actionText: 'Selected ' + toolbarActions[position].title,
+    });
+  },
+});
+
+var toolbarActions = [
+  {title: 'Create', icon: require('image!ic_create_black_48dp'), show: 'always'},
+  {title: 'Filter'},
+  {title: 'Settings', icon: require('image!ic_settings_black_48dp'), show: 'always'},
+];
+
+var styles = StyleSheet.create({
+  toolbar: {
+    backgroundColor: '#e9eaed',
+    height: 56,
+  },
+});
+
+module.exports = ToolbarAndroidExample;

Examples/UIExplorer/UIExplorerApp.android.js

@@ -18,34 +18,42 @@
 
 var React = require('react-native');
 var {
+  AppRegistry,
+  BackAndroid,
   Dimensions,
+  DrawerLayoutAndroid,
   StyleSheet,
+  ToolbarAndroid,
   View,
 } = React;
-var UIExplorerList = require('./UIExplorerList');
-
-// TODO: these should be exposed by the 'react-native' module.
-var DrawerLayoutAndroid = require('DrawerLayoutAndroid');
-var ToolbarAndroid = require('ToolbarAndroid');
+var UIExplorerList = require('./UIExplorerList.android');
 
 var DRAWER_WIDTH_LEFT = 56;
 
 var UIExplorerApp = React.createClass({
-
   getInitialState: function() {
     return {
-      example: {
-        title: 'UIExplorer',
-        component: this._renderHome(),
-      },
+      example: this._getUIExplorerHome(),
     };
   },
 
+  _getUIExplorerHome: function() {
+    return {
+      title: 'UIExplorer',
+      component: this._renderHome(),
+    };
+  },
+
+  componentWillMount: function() {
+    BackAndroid.addEventListener('hardwareBackPress', this._handleBackButtonPress);
+  },
+
   render: function() {
     return (
       <DrawerLayoutAndroid
         drawerPosition={DrawerLayoutAndroid.positions.Left}
         drawerWidth={Dimensions.get('window').width - DRAWER_WIDTH_LEFT}
+        keyboardDismissMode="on-drag"
         ref={(drawer) => { this.drawer = drawer; }}
         renderNavigationView={this._renderNavigationView}>
         {this._renderNavigation()}
@@ -64,14 +72,11 @@ var UIExplorerApp = React.createClass({
 
   onSelectExample: function(example) {
     this.drawer.closeDrawer();
-    if (example.title === 'UIExplorer') {
-      example.component = this._renderHome();
+    if (example.title === this._getUIExplorerHome().title) {
+      example = this._getUIExplorerHome();
     }
     this.setState({
-      example: {
-        title: example.title,
-        component: example.component,
-      },
+      example: example,
     });
   },
 
@@ -105,16 +110,16 @@ var UIExplorerApp = React.createClass({
     );
   },
 
+  _handleBackButtonPress: function() {
+    if (this.state.example.title !== this._getUIExplorerHome().title) {
+      this.onSelectExample(this._getUIExplorerHome());
+      return true;
+    }
+    return false;
+  },
 });
 
 var styles = StyleSheet.create({
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
   container: {
     flex: 1,
   },
@@ -124,4 +129,6 @@ var styles = StyleSheet.create({
   },
 });
 
+AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
+
 module.exports = UIExplorerApp;

Examples/UIExplorer/UIExplorerList.android.js

@@ -0,0 +1,99 @@
+/**
+ * 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,
+  View,
+} = React;
+var UIExplorerListBase = require('./UIExplorerListBase');
+
+var COMPONENTS = [
+  require('./ImageExample'),
+  require('./ProgressBarAndroidExample'),
+  require('./ScrollViewSimpleExample'),
+  require('./SwitchAndroidExample'),
+  require('./TextExample.android'),
+  require('./TextInputExample.android'),
+  require('./ToolbarAndroidExample'),
+  require('./TouchableExample'),
+  require('./ViewExample'),
+];
+
+var APIS = [
+  require('./AccessibilityAndroidExample.android'),
+  require('./BorderExample'),
+  require('./LayoutEventsExample'),
+  require('./LayoutExample'),
+  require('./PanResponderExample'),
+  require('./PointerEventsExample'),
+  require('./TimerExample'),
+  require('./ToastAndroidExample.android'),
+  require('./XHRExample'),
+];
+
+type Props = {
+  onSelectExample: Function,
+  isInDrawer: bool,
+};
+
+class UIExplorerList extends React.Component {
+  props: Props;
+
+  render() {
+    return (
+      <UIExplorerListBase
+        components={COMPONENTS}
+        apis={APIS}
+        searchText=""
+        renderAdditionalView={this.renderAdditionalView.bind(this)}
+        onPressRow={this.onPressRow.bind(this)}
+      />
+    );
+  }
+
+  renderAdditionalView(renderRow, renderTextInput): React.Component {
+    if (this.props.isInDrawer) {
+      var homePage = renderRow({
+        title: 'UIExplorer',
+        description: 'List of examples',
+      }, -1);
+      return (
+        <View>
+          {homePage}
+        </View>
+      );
+    }
+    return renderTextInput(styles.searchTextInput);
+  }
+
+  onPressRow(example: any) {
+    var Component = UIExplorerListBase.makeRenderable(example);
+    this.props.onSelectExample({
+      title: Component.title,
+      component: Component,
+    });
+  }
+}
+
+var styles = StyleSheet.create({
+  searchTextInput: {
+    padding: 2,
+  },
+});
+
+module.exports = UIExplorerList;

Examples/UIExplorer/XHRExample.android.js

@@ -0,0 +1,326 @@
+/**
+ * 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 {
+  PixelRatio,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableHighlight,
+  View,
+} = React;
+
+// TODO t7093728 This is a simlified XHRExample.ios.js.
+// Once we have Camera roll, Toast, Intent (for opening URLs)
+// we should make this consistent with iOS.
+
+class Downloader extends React.Component {
+
+  xhr: XMLHttpRequest;
+  cancelled: boolean;
+
+  constructor(props) {
+    super(props);
+    this.cancelled = false;
+    this.state = {
+      status: '',
+      contentSize: 1,
+      downloaded: 0,
+    };
+  }
+
+  download() {
+    this.xhr && this.xhr.abort();
+
+    var xhr = this.xhr || new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === xhr.HEADERS_RECEIVED) {
+        var contentSize = parseInt(xhr.getResponseHeader('Content-Length'), 10);
+        this.setState({
+          contentSize: contentSize,
+          downloaded: 0,
+        });
+      } else if (xhr.readyState === xhr.LOADING) {
+        this.setState({
+          downloaded: xhr.responseText.length,
+        });
+        console.log(xhr.responseText.length);
+      } else if (xhr.readyState === xhr.DONE) {
+        if (this.cancelled) {
+          this.cancelled = false;
+          return;
+        }
+        if (xhr.status === 200) {
+          this.setState({
+            status: 'Download complete!',
+          });
+        } else if (xhr.status !== 0) {
+          this.setState({
+            status: 'Error: Server returned HTTP status of ' + xhr.status + ' ' + xhr.responseText,
+          });
+        } else {
+          this.setState({
+            status: 'Error: ' + xhr.responseText,
+          });
+        }
+      }
+    };
+    xhr.open('GET', 'http://www.gutenberg.org/cache/epub/100/pg100.txt');
+    xhr.send();
+    this.xhr = xhr;
+
+    this.setState({status: 'Downloading...'});
+  }
+
+  componentWillUnmount() {
+    this.cancelled = true;
+    this.xhr && this.xhr.abort();
+  }
+
+  render() {
+    var button = this.state.status === 'Downloading...' ? (
+      <View style={styles.wrapper}>
+        <View style={styles.button}>
+          <Text>...</Text>
+        </View>
+      </View>
+    ) : (
+      <TouchableHighlight
+        style={styles.wrapper}
+        onPress={this.download.bind(this)}>
+        <View style={styles.button}>
+         <Text>Download 5MB Text File</Text>
+        </View>
+      </TouchableHighlight>
+    );
+
+    return (
+      <View>
+        {button}
+        <Text>{this.state.status}</Text>
+      </View>
+    );
+  }
+}
+
+class FormUploader extends React.Component {
+
+  _isMounted: boolean;
+  _addTextParam: () => void;
+  _upload: () => void;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isUploading: false,
+      uploadProgress: null,
+      textParams: [],
+    };
+    this._isMounted = true;
+    this._addTextParam = this._addTextParam.bind(this);
+    this._upload = this._upload.bind(this);
+  }
+
+  _addTextParam() {
+    var textParams = this.state.textParams;
+    textParams.push({name: '', value: ''});
+    this.setState({textParams});
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  _onTextParamNameChange(index, text) {
+    var textParams = this.state.textParams;
+    textParams[index].name = text;
+    this.setState({textParams});
+  }
+
+  _onTextParamValueChange(index, text) {
+    var textParams = this.state.textParams;
+    textParams[index].value = text;
+    this.setState({textParams});
+  }
+
+  _upload() {
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', 'http://posttestserver.com/post.php');
+    xhr.onload = () => {
+      this.setState({isUploading: false});
+      if (xhr.status !== 200) {
+        console.log(
+          'Upload failed',
+          'Expected HTTP 200 OK response, got ' + xhr.status
+        );
+        return;
+      }
+      if (!xhr.responseText) {
+        console.log(
+          'Upload failed',
+          'No response payload.'
+        );
+        return;
+      }
+      var index = xhr.responseText.indexOf('http://www.posttestserver.com/');
+      if (index === -1) {
+        console.log(
+          'Upload failed',
+          'Invalid response payload.'
+        );
+        return;
+      }
+      var url = xhr.responseText.slice(index).split('\n')[0];
+      console.log('Upload successful: ' + url);
+    };
+    var formdata = new FormData();
+    this.state.textParams.forEach(
+      (param) => formdata.append(param.name, param.value)
+    );
+    if (xhr.upload) {
+      xhr.upload.onprogress = (event) => {
+        console.log('upload onprogress', event);
+        if (event.lengthComputable) {
+          this.setState({uploadProgress: event.loaded / event.total});
+        }
+      };
+    }
+    xhr.send(formdata);
+    this.setState({isUploading: true});
+  }
+
+  render() {
+    var textItems = this.state.textParams.map((item, index) => (
+      <View style={styles.paramRow}>
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          onChangeText={this._onTextParamNameChange.bind(this, index)}
+          placeholder="name..."
+          style={styles.textInput}
+        />
+        <Text style={styles.equalSign}>=</Text>
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          onChangeText={this._onTextParamValueChange.bind(this, index)}
+          placeholder="value..."
+          style={styles.textInput}
+        />
+      </View>
+    ));
+    var uploadButtonLabel = this.state.isUploading ? 'Uploading...' : 'Upload';
+    var uploadProgress = this.state.uploadProgress;
+    if (uploadProgress !== null) {
+      uploadButtonLabel += ' ' + Math.round(uploadProgress * 100) + '%';
+    }
+    var uploadButton = (
+      <View style={styles.uploadButtonBox}>
+        <Text style={styles.uploadButtonLabel}>{uploadButtonLabel}</Text>
+      </View>
+    );
+    if (!this.state.isUploading) {
+      uploadButton = (
+        <TouchableHighlight onPress={this._upload}>
+          {uploadButton}
+        </TouchableHighlight>
+      );
+    }
+    return (
+      <View>
+        {textItems}
+        <View>
+          <Text
+            style={[styles.textButton, styles.addTextParamButton]}
+            onPress={this._addTextParam}>
+            Add a text param
+          </Text>
+        </View>
+        <View style={styles.uploadButton}>
+          {uploadButton}
+        </View>
+      </View>
+    );
+  }
+}
+
+
+exports.framework = 'React';
+exports.title = 'XMLHttpRequest';
+exports.description = 'XMLHttpRequest';
+exports.examples = [{
+  title: 'File Download',
+  render() {
+    return <Downloader/>;
+  }
+}, {
+  title: 'multipart/form-data Upload',
+  render() {
+    return <FormUploader/>;
+  }
+}];
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 8,
+  },
+  paramRow: {
+    flexDirection: 'row',
+    paddingVertical: 8,
+    alignItems: 'center',
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: 'grey',
+  },
+  textButton: {
+    color: 'blue',
+  },
+  addTextParamButton: {
+    marginTop: 8,
+  },
+  textInput: {
+    flex: 1,
+    borderRadius: 3,
+    borderColor: 'grey',
+    borderWidth: 1,
+    height: 30,
+    paddingLeft: 8,
+  },
+  equalSign: {
+    paddingHorizontal: 4,
+  },
+  uploadButton: {
+    marginTop: 16,
+  },
+  uploadButtonBox: {
+    flex: 1,
+    paddingVertical: 12,
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    borderRadius: 4,
+  },
+  uploadButtonLabel: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

Examples/UIExplorer/android/app/build.gradle

@@ -0,0 +1,35 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        applicationId "com.facebook.react.uiapp"
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+        ndk {
+            abiFilters "armeabi-v7a", "x86"
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    compile fileTree(dir: 'libs', include: ['*.jar'])
+    compile 'com.android.support:appcompat-v7:23.0.0'
+    
+    // Depend on pre-built React Native
+    compile 'com.facebook.react:react-native:0.11.+'
+    
+    // Depend on React Native source.
+    // This is useful for testing your changes when working on React Native.
+    // compile project(':ReactAndroid')
+}

Examples/UIExplorer/android/app/proguard-rules.pro

@@ -0,0 +1,17 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}

Examples/UIExplorer/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.facebook.react.uiapp" >
+
+  <uses-permission android:name="android.permission.INTERNET" />
+
+  <application
+      android:allowBackup="true"
+      android:icon="@drawable/launcher_icon"
+      android:label="@string/app_name"
+      android:theme="@style/Theme.ReactNative.AppCompat.Light" >
+    <activity
+        android:name=".UIExplorerActivity"
+        android:label="@string/app_name" >
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN" />
+        <category android:name="android.intent.category.LAUNCHER" />
+      </intent-filter>
+    </activity>
+    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+  </application>
+
+</manifest>

Examples/UIExplorer/android/app/src/main/java/UIExplorerActivity.java

@@ -0,0 +1,89 @@
+/**
+ * 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.
+ */
+
+package com.facebook.react.uiapp;
+
+import android.app.Activity;
+import android.os.Bundle;
+import android.view.KeyEvent;
+
+import com.facebook.react.LifecycleState;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactRootView;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
+import com.facebook.react.shell.MainReactPackage;
+
+public class UIExplorerActivity extends Activity implements DefaultHardwareBackBtnHandler {
+
+  private ReactInstanceManager mReactInstanceManager;
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_main);
+
+    mReactInstanceManager = ReactInstanceManager.builder()
+        .setApplication(getApplication())
+        .setBundleAssetName("UIExplorerApp.android.bundle")
+        .setJSMainModuleName("Examples/UIExplorer/UIExplorerApp.android")
+        .addPackage(new MainReactPackage())
+        .setUseDeveloperSupport(true)
+        .setInitialLifecycleState(LifecycleState.RESUMED)
+        .build();
+
+    ((ReactRootView) findViewById(R.id.react_root_view))
+        .startReactApplication(mReactInstanceManager, "UIExplorerApp", null);
+  }
+
+  @Override
+  public boolean onKeyUp(int keyCode, KeyEvent event) {
+    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
+      mReactInstanceManager.showDevOptionsDialog();
+      return true;
+    }
+    return super.onKeyUp(keyCode, event);
+  }
+
+  @Override
+  protected void onPause() {
+    super.onPause();
+
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onPause();
+    }
+  }
+
+  @Override
+  protected void onResume() {
+    super.onResume();
+
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onResume(this);
+    }
+  }
+
+  @Override
+  public void onBackPressed() {
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onBackPressed();
+    } else {
+      super.onBackPressed();
+    }
+  }
+
+  @Override
+  public void invokeDefaultOnBackPressed() {
+    super.onBackPressed();
+  }
+}

Examples/UIExplorer/android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".UIExplorerApp">
+
+    <com.facebook.react.ReactRootView
+      android:layout_width="match_parent"
+      android:layout_height="match_parent"
+      android:id="@+id/react_root_view"/>
+
+</RelativeLayout>

Examples/UIExplorer/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">UIExplorer App</string>
+</resources>

Examples/UIExplorer/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,8 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+    </style>
+
+</resources>