[react-packager][streamline oss] Move open sourced JS source to react-native-github

Examples/UIExplorer/ActivityIndicatorExample.js

@@ -0,0 +1,151 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule ActivityIndicatorExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  ActivityIndicatorIOS,
+  StyleSheet,
+  TimerMixin,
+  View,
+} = React;
+
+var ToggleAnimatingActivityIndicator = React.createClass({
+  mixins: [TimerMixin],
+
+  getInitialState: function() {
+    return {
+      animating: true,
+    };
+  },
+
+  setToggleTimeout: function() {
+    this.setTimeout(
+      () => {
+        this.setState({animating: !this.state.animating});
+        this.setToggleTimeout();
+      },
+      1200
+    );
+  },
+
+  componentDidMount: function() {
+    this.setToggleTimeout();
+  },
+
+  render: function() {
+    return (
+      <ActivityIndicatorIOS
+        animating={this.state.animating}
+        style={[styles.centering, {height: 80}]}
+        size={ActivityIndicatorIOS.size.large}
+      />
+    );
+  }
+});
+
+exports.framework = 'React';
+exports.title = '<ActivityIndicatorIOS>';
+exports.description = 'Animated loading indicators.';
+
+exports.examples = [
+  {
+    title: 'Default (small, white)',
+    render: function() {
+      return (
+        <ActivityIndicatorIOS
+          style={[styles.centering, styles.gray, {height: 40}]}
+          color="white"
+          />
+      );
+    }
+  },
+  {
+    title: 'Gray',
+    render: function() {
+      return (
+        <View>
+          <ActivityIndicatorIOS
+            style={[styles.centering, {height: 40}]}
+          />
+          <ActivityIndicatorIOS
+            style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]}
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Custom colors',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <ActivityIndicatorIOS color="#0000ff" />
+          <ActivityIndicatorIOS color="#aa00aa" />
+          <ActivityIndicatorIOS color="#aa3300" />
+          <ActivityIndicatorIOS color="#00aa00" />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Large',
+    render: function() {
+      return (
+        <ActivityIndicatorIOS
+          style={[styles.centering, styles.gray, {height: 80}]}
+          color="white"
+          size={ActivityIndicatorIOS.size.large}
+        />
+      );
+    }
+  },
+  {
+    title: 'Large, custom colors',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <ActivityIndicatorIOS
+            size={ActivityIndicatorIOS.size.large}
+            color="#0000ff"
+          />
+          <ActivityIndicatorIOS
+            size={ActivityIndicatorIOS.size.large}
+            color="#aa00aa"
+          />
+          <ActivityIndicatorIOS
+            size={ActivityIndicatorIOS.size.large}
+            color="#aa3300"
+          />
+          <ActivityIndicatorIOS
+            size={ActivityIndicatorIOS.size.large}
+            color="#00aa00"
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Start/stop',
+    render: function() {
+      return <ToggleAnimatingActivityIndicator />;
+    }
+  },
+];
+
+var styles = StyleSheet.create({
+  centering: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  gray: {
+    backgroundColor: '#cccccc',
+  },
+  horizontal: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+});

Examples/UIExplorer/AppDelegate.h

@@ -0,0 +1,10 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+
+@interface AppDelegate : UIResponder <UIApplicationDelegate>
+
+@property (nonatomic, strong) UIWindow *window;
+
+@end
+

Examples/UIExplorer/AppDelegate.m

@@ -0,0 +1,44 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import "AppDelegate.h"
+
+#import "RCTRootView.h"
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  NSURL *jsCodeLocation;
+  RCTRootView *rootView = [[RCTRootView alloc] init];
+
+  // Loading JavaScript code - uncomment the one you want.
+
+  // OPTION 1
+  // Load from development server. Start the server from the repository root:
+  //
+  // $ npm start
+  //
+  // To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
+  // iOS device are on the same Wi-Fi network.
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/UIExplorer/UIExplorerApp.includeRequire.runModule.bundle"];
+
+  // OPTION 2
+  // Load from pre-bundled file on disk. To re-generate the static bundle, run
+  //
+  // $ curl http://localhost:8081/Examples/UIExplorer/UIExplorerApp.includeRequire.runModule.bundle -o main.jsbundle
+  //
+  // and uncomment the next following line
+  // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+
+  rootView.scriptURL = jsCodeLocation;
+  rootView.moduleName = @"UIExplorerApp";
+
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [[UIViewController alloc] init];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+  return YES;
+}
+
+@end

Examples/UIExplorer/Base.lproj/LaunchScreen.xib

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6254" systemVersion="13F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
+        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view contentMode="scaleToFill" id="iN0-l3-epB">
+            <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="  Copyright (c) 2015 Facebook. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
+                    <rect key="frame" x="20" y="439" width="441" height="21"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="UIExplorer" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
+                    <rect key="frame" x="20" y="140" width="441" height="43"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+            </subviews>
+            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+            <constraints>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
+                <constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
+                <constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
+                <constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
+                <constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
+            </constraints>
+            <nil key="simulatedStatusBarMetrics"/>
+            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
+            <point key="canvasLocation" x="548" y="455"/>
+        </view>
+    </objects>
+</document>

Examples/UIExplorer/ExpandingTextExample.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule ExpandingTextExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  ExpandingText
+} = React;
+
+var LOREM = 'Lorem ipsum dolor sit amet, mea adipisci inimicus ex, paulo essent bonorum et ius, rebum deserunt mediocritatem ius ei.';
+
+exports.title = '<ExpandingText>';
+exports.description = 'Base component for rendering text that is truncated and can be expanded upon tap.';
+exports.examples = [
+{
+  title: 'Expanding text (truncLength=20)',
+  description: 'Setting the truncLength prop will cause the text to truncate to that character length',
+  render: function() {
+    return <ExpandingText truncLength={20} text={LOREM} />;
+  }
+}, {
+  title: 'Expanding text (truncLength=80)',
+  description: 'The higher the truncLength the more characters that will be shown by default',
+  render: function() {
+    return <ExpandingText truncLength={80} text={LOREM + LOREM} />;
+  }
+}, {
+  title: 'Expanding text with custom style',
+  description: 'You can style the text within the ExpandingText component',
+  render: function() {
+    return (
+      <ExpandingText
+        textStyle={{fontFamily: 'Verdana'}}
+        truncLength={80}
+        text={LOREM + LOREM}
+      />
+    );
+  }
+}, {
+  title: 'See More button with custom style' ,
+  description: 'You can also style just the See More button',
+  render: function() {
+    return (
+      <ExpandingText
+        seeMoreStyle={{color: 'red'}}
+        truncLength={80}
+        text={LOREM}
+      />
+    );
+  }
+}];

Examples/UIExplorer/ImageCapInsetsExample.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule ImageCapInsetsExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Image,
+  StyleSheet,
+  Text,
+  View,
+  ix,
+} = React;
+
+var ImageCapInsetsExample = React.createClass({
+  render: function() {
+    return (
+      <View>
+        <View style={styles.background}>
+          <Text>
+            capInsets: none
+          </Text>
+          <Image
+            source={ix('story-background')}
+            style={styles.storyBackground}
+            capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
+          />
+        </View>
+        <View style={[styles.background, {paddingTop: 10}]}>
+          <Text>
+            capInsets: 15
+          </Text>
+          <Image
+            source={ix('story-background')}
+            style={styles.storyBackground}
+            capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
+          />
+        </View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  background: {
+    backgroundColor: '#F6F6F6',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  horizontal: {
+    flexDirection: 'row',
+  },
+  storyBackground: {
+    width: 250,
+    height: 150,
+    borderWidth: 1,
+    resizeMode: Image.resizeMode.stretch,
+  },
+  text: {
+    fontSize: 13.5,
+  }
+});
+
+module.exports = ImageCapInsetsExample;

Examples/UIExplorer/ImageExample.js

@@ -0,0 +1,305 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule ImageExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Image,
+  StyleSheet,
+  Text,
+  View,
+  ix,
+} = React;
+
+var ImageCapInsetsExample = require('./ImageCapInsetsExample');
+
+exports.framework = 'React';
+exports.title = '<Image>';
+exports.description = 'Base component for displaying different types of images.';
+
+exports.examples = [
+  {
+    title: 'Plain Network Image',
+    description: 'If the `source` prop `uri` property is prefixed with ' +
+    '"http", then it will be downloaded from the network.',
+    render: function() {
+      return (
+        <Image
+          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
+          style={styles.base}
+        />
+      );
+    },
+  },
+  {
+    title: 'Plain Static Image',
+    description: 'Static assets must be referenced with the `ix` wrapper and ' +
+      'located in the app bundle.',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image source={ix('uie_thumb_normal')} style={styles.icon} />
+          <Image source={ix('uie_thumb_selected')} style={styles.icon} />
+          <Image source={ix('uie_comment_normal')} style={styles.icon} />
+          <Image source={ix('uie_comment_highlighted')} style={styles.icon} />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Border Color',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            source={smallImage}
+            style={[
+              styles.base,
+              styles.background,
+              {borderWidth: 3, borderColor: '#f099f0'}
+            ]}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Border Width',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            source={smallImage}
+            style={[
+              styles.base,
+              styles.background,
+              {borderWidth: 5, borderColor: '#f099f0'}
+            ]}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Border Radius',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            style={[styles.base, styles.background, {borderRadius: 5}]}
+            source={smallImage}
+          />
+          <Image
+            style={[
+              styles.base,
+              styles.background,
+              styles.leftMargin,
+              {borderRadius: 19}
+            ]}
+            source={smallImage}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Background Color',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image source={smallImage} style={styles.base} />
+          <Image
+            style={[
+              styles.base,
+              styles.leftMargin,
+              {backgroundColor: 'rgba(0, 0, 100, 0.25)'}
+            ]}
+            source={smallImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {backgroundColor: 'red'}]}
+            source={smallImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {backgroundColor: 'black'}]}
+            source={smallImage}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Opacity',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            style={[styles.base, {opacity: 1}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.8}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.6}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.4}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0.2}]}
+            source={fullImage}
+          />
+          <Image
+            style={[styles.base, styles.leftMargin, {opacity: 0}]}
+            source={fullImage}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Nesting',
+    render: function() {
+      return (
+        <Image
+          style={{width: 60, height: 60, backgroundColor: 'transparent'}}
+          source={fullImage}>
+          <Text style={styles.nestedText}>
+            React
+          </Text>
+        </Image>
+      );
+    },
+  },
+  {
+    title: 'Tint Color',
+    description: 'The `tintColor` style prop changes all the non-alpha ' +
+      'pixels to the tint color.',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <Image
+            source={ix('uie_thumb_normal')}
+            style={[styles.icon, {tintColor: 'blue' }]}
+          />
+          <Image
+            source={ix('uie_thumb_normal')}
+            style={[styles.icon, styles.leftMargin, {tintColor: 'green' }]}
+          />
+          <Image
+            source={ix('uie_thumb_normal')}
+            style={[styles.icon, styles.leftMargin, {tintColor: 'red' }]}
+          />
+          <Image
+            source={ix('uie_thumb_normal')}
+            style={[styles.icon, styles.leftMargin, {tintColor: 'black' }]}
+          />
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Resize Mode',
+    description: 'The `resizeMode` style prop controls how the image is ' +
+      'rendered within the frame.',
+    render: function() {
+      return (
+        <View style={styles.horizontal}>
+          <View>
+            <Text style={[styles.resizeModeText]}>
+              Contain
+            </Text>
+            <Image
+              style={[
+                styles.resizeMode,
+                {resizeMode: Image.resizeMode.contain}
+              ]}
+              source={fullImage}
+            />
+          </View>
+          <View style={styles.leftMargin}>
+            <Text style={[styles.resizeModeText]}>
+              Cover
+            </Text>
+            <Image
+              style={[
+                styles.resizeMode,
+                {resizeMode: Image.resizeMode.cover}
+              ]}
+              source={fullImage}
+            />
+          </View>
+          <View style={styles.leftMargin}>
+            <Text style={[styles.resizeModeText]}>
+              Stretch
+            </Text>
+            <Image
+              style={[
+                styles.resizeMode,
+                {resizeMode: Image.resizeMode.stretch}
+              ]}
+              source={fullImage}
+            />
+          </View>
+        </View>
+      );
+    },
+  },
+  {
+    title: 'Cap Insets',
+    description:
+      'When the image is resized, the corners of the size specified ' +
+      'by capInsets will stay a fixed size, but the center content and ' +
+      'borders of the image will be stretched. This is useful for creating ' +
+      'resizable rounded buttons, shadows, and other resizable assets.',
+    render: function() {
+      return <ImageCapInsetsExample />;
+    },
+  },
+];
+
+var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
+var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small.png'};
+
+var styles = StyleSheet.create({
+  base: {
+    width: 38,
+    height: 38,
+  },
+  leftMargin: {
+    marginLeft: 10,
+  },
+  background: {
+    backgroundColor: '#222222'
+  },
+  nestedText: {
+    marginLeft: 12,
+    marginTop: 20,
+    backgroundColor: 'transparent',
+    color: 'white'
+  },
+  resizeMode: {
+    width: 90,
+    height: 60,
+    borderWidth: 0.5,
+    borderColor: 'black'
+  },
+  resizeModeText: {
+    fontSize: 11,
+    marginBottom: 3,
+  },
+  icon: {
+    width: 15,
+    height: 15,
+  },
+  horizontal: {
+    flexDirection: 'row',
+  }
+});

Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,44 @@
+{
+  "images" : [
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "uie_icon@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "29x29",
+      "idiom" : "iphone",
+      "filename" : "uie_icon@2x-1.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "iphone",
+      "filename" : "uie_icon@2x-2.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "40x40",
+      "idiom" : "iphone",
+      "filename" : "uie_icon@2x-3.png",
+      "scale" : "3x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "uie_icon@2x-5.png",
+      "scale" : "2x"
+    },
+    {
+      "size" : "60x60",
+      "idiom" : "iphone",
+      "filename" : "uie_icon@2x-4.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

Examples/UIExplorer/Images.xcassets/story-background.imageset/Contents.json

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

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

@@ -0,0 +1,21 @@
+{
+  "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/Images.xcassets/uie_comment_normal.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "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/Images.xcassets/uie_thumb_normal.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "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/Images.xcassets/uie_thumb_selected.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "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/Info.plist

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>com.facebook.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+</dict>
+</plist>

Examples/UIExplorer/LayoutExample.js

@@ -0,0 +1,145 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule LayoutExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var Circle = React.createClass({
+  render: function() {
+    var size = this.props.size || 20;
+    return (
+      <View
+        style={{
+          borderRadius: size / 2,
+          backgroundColor: '#527fe4',
+          width: size,
+          height: size,
+          margin: 1,
+        }}
+      />
+    );
+  }
+});
+
+var CircleBlock = React.createClass({
+  render: function() {
+    var circleStyle = {
+      flexDirection: 'row',
+      backgroundColor: '#f6f7f8',
+      borderWidth: 0.5,
+      borderColor: '#d6d7da',
+      marginBottom: 2,
+    };
+    return (
+      <View style={[circleStyle, this.props.style]}>
+        {this.props.children}
+      </View>
+    );
+  }
+});
+
+var LayoutExample = React.createClass({
+  statics: {
+    title: 'Layout - Flexbox',
+    description: 'Examples of using the flexbox API to layout views.'
+  },
+  render: function() {
+    return (
+      <UIExplorerPage title={this.props.navigator ? null : 'Layout'}>
+        <UIExplorerBlock title="Flex Direction">
+          <Text>row</Text>
+          <CircleBlock style={{flexDirection: 'row'}}>
+            <Circle /><Circle /><Circle /><Circle /><Circle />
+          </CircleBlock>
+          <Text>column</Text>
+          <CircleBlock style={{flexDirection: 'column'}}>
+            <Circle /><Circle /><Circle /><Circle /><Circle />
+          </CircleBlock>
+          <View style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
+            <Text>{'top: 15, left: 160'}</Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Justify Content - Main Direction">
+          <Text>flex-start</Text>
+          <CircleBlock style={{justifyContent: 'flex-start'}}>
+            <Circle /><Circle /><Circle /><Circle /><Circle />
+          </CircleBlock>
+          <Text>center</Text>
+          <CircleBlock style={{justifyContent: 'center'}}>
+            <Circle /><Circle /><Circle /><Circle /><Circle />
+          </CircleBlock>
+          <Text>flex-end</Text>
+          <CircleBlock style={{justifyContent: 'flex-end'}}>
+            <Circle /><Circle /><Circle /><Circle /><Circle />
+          </CircleBlock>
+          <Text>space-between</Text>
+          <CircleBlock style={{justifyContent: 'space-between'}}>
+            <Circle /><Circle /><Circle /><Circle /><Circle />
+          </CircleBlock>
+          <Text>space-around</Text>
+          <CircleBlock style={{justifyContent: 'space-around'}}>
+            <Circle /><Circle /><Circle /><Circle /><Circle />
+          </CircleBlock>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Align Items - Other Direction">
+          <Text>flex-start</Text>
+          <CircleBlock style={{alignItems: 'flex-start', height: 30}}>
+            <Circle size={15} /><Circle size={10} /><Circle size={20} />
+            <Circle size={17} /><Circle size={12} /><Circle size={15} />
+            <Circle size={10} /><Circle size={20} /><Circle size={17} />
+            <Circle size={12} /><Circle size={15} /><Circle size={10} />
+            <Circle size={20} /><Circle size={17} /><Circle size={12} />
+            <Circle size={15} /><Circle size={8} />
+          </CircleBlock>
+          <Text>center</Text>
+          <CircleBlock style={{alignItems: 'center', height: 30}}>
+            <Circle size={15} /><Circle size={10} /><Circle size={20} />
+            <Circle size={17} /><Circle size={12} /><Circle size={15} />
+            <Circle size={10} /><Circle size={20} /><Circle size={17} />
+            <Circle size={12} /><Circle size={15} /><Circle size={10} />
+            <Circle size={20} /><Circle size={17} /><Circle size={12} />
+            <Circle size={15} /><Circle size={8} />
+          </CircleBlock>
+          <Text>flex-end</Text>
+          <CircleBlock style={{alignItems: 'flex-end', height: 30}}>
+            <Circle size={15} /><Circle size={10} /><Circle size={20} />
+            <Circle size={17} /><Circle size={12} /><Circle size={15} />
+            <Circle size={10} /><Circle size={20} /><Circle size={17} />
+            <Circle size={12} /><Circle size={15} /><Circle size={10} />
+            <Circle size={20} /><Circle size={17} /><Circle size={12} />
+            <Circle size={15} /><Circle size={8} />
+          </CircleBlock>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Flex Wrap">
+          <CircleBlock style={{flexWrap: 'wrap'}}>
+            {'oooooooooooooooo'.split('').map((char, i) => <Circle key={i} />)}
+          </CircleBlock>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  overlay: {
+    backgroundColor: '#aaccff',
+    borderRadius: 10,
+    borderWidth: 0.5,
+    opacity: 0.5,
+    padding: 5,
+  },
+});
+
+module.exports = LayoutExample;

Examples/UIExplorer/ListViewPagingExample.js

@@ -0,0 +1,250 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule ListViewPagingExample
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Image,
+  LayoutAnimation,
+  ListView,
+  ListViewDataSource,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = React;
+
+var PAGE_SIZE = 4;
+var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
+var NUM_SECTIONS = 100;
+var NUM_ROWS_PER_SECTION = 10;
+
+var Thumb = React.createClass({
+  getInitialState: function() {
+    return {thumbIndex: this._getThumbIdx(), dir: 'row'};
+  },
+  _getThumbIdx: function() {
+    return Math.floor(Math.random() * THUMB_URLS.length);
+  },
+  _onPressThumb: function() {
+    var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length];
+    LayoutAnimation.configureNext(config);
+    this.setState({
+      thumbIndex: this._getThumbIdx(),
+      dir: this.state.dir === 'row' ? 'column' : 'row',
+    });
+  },
+  render: function() {
+    return (
+      <TouchableOpacity onPress={this._onPressThumb}>
+        <View style={[styles.buttonContents, {flexDirection: this.state.dir}]}>
+          <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
+          <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
+          <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
+          {this.state.dir === 'column' ?
+            <Text>
+              Oooo, look at this new text!  So awesome it may just be crazy.
+              Let me keep typing here so it wraps at least one line.
+            </Text> :
+            <Text />
+          }
+        </View>
+      </TouchableOpacity>
+    );
+  }
+});
+
+var ListViewPagingExample = React.createClass({
+  statics: {
+    title: '<ListView> - Paging',
+    description: 'Floating headers & layout animations.'
+  },
+
+  getInitialState: function() {
+    var getSectionData = (dataBlob, sectionID) => {
+      return dataBlob[sectionID];
+    };
+    var getRowData = (dataBlob, sectionID, rowID) => {
+      return dataBlob[rowID];
+    };
+
+    var dataSource = new ListViewDataSource({
+      getRowData: getRowData,
+      getSectionHeaderData: getSectionData,
+      rowHasChanged: (row1, row2) => row1 !== row2,
+      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
+    });
+
+    var dataBlob = {};
+    var sectionIDs = [];
+    var rowIDs = [];
+    for (var ii = 0; ii < NUM_SECTIONS; ii++) {
+      var sectionName = 'Section ' + ii;
+      sectionIDs.push(sectionName);
+      dataBlob[sectionName] = sectionName;
+      rowIDs[ii] = [];
+
+      for (var jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
+        var rowName = 'S' + ii + ', R' + jj;
+        rowIDs[ii].push(rowName);
+        dataBlob[rowName] = rowName;
+      }
+    }
+    return {
+      dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
+      headerPressCount: 0,
+    };
+  },
+
+  renderRow: function(rowData, sectionID, rowID) {
+    return (<Thumb text={rowData}/>);
+  },
+
+  renderSectionHeader: function(sectionData, sectionID) {
+    return (
+      <View style={styles.section}>
+        <Text style={styles.text}>
+          {sectionData}
+        </Text>
+      </View>
+    );
+  },
+
+  renderHeader: function() {
+    var headerLikeText = this.state.headerPressCount % 2 ?
+      <View><Text style={styles.text}>1 Like</Text></View> :
+      null;
+    return (
+      <TouchableOpacity onPress={this._onPressHeader}>
+        <View style={styles.header}>
+          {headerLikeText}
+          <View>
+            <Text style={styles.text}>
+              Table Header (click me)
+            </Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  },
+
+  renderFooter: function() {
+    return (
+      <View style={styles.header}>
+        <Text onPress={() => console.log('Footer!')} style={styles.text}>
+          Table Footer
+        </Text>
+      </View>
+    );
+  },
+
+  render: function() {
+    return (
+      <ListView
+        style={styles.listview}
+        dataSource={this.state.dataSource}
+        onChangeVisibleRows={(visibleRows, changedRows) => console.log({visibleRows, changedRows})}
+        renderHeader={this.renderHeader}
+        renderFooter={this.renderFooter}
+        renderSectionHeader={this.renderSectionHeader}
+        renderRow={this.renderRow}
+        initialListSize={10}
+        pageSize={PAGE_SIZE}
+        scrollRenderAheadDistance={2000}
+      />
+    );
+  },
+
+  _onPressHeader: function() {
+    var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length];
+    LayoutAnimation.configureNext(config);
+    this.setState({headerPressCount: this.state.headerPressCount + 1});
+  },
+
+});
+
+var styles = StyleSheet.create({
+  listview: {
+    backgroundColor: '#B0C4DE',
+  },
+  header: {
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#3B5998',
+    flexDirection: 'row',
+  },
+  text: {
+    color: 'white',
+    paddingHorizontal: 8,
+  },
+  rowText: {
+    color: '#888888',
+  },
+  thumbText: {
+    fontSize: 20,
+    color: '#888888',
+  },
+  buttonContents: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 5,
+    marginVertical: 3,
+    padding: 5,
+    backgroundColor: '#EAEAEA',
+    borderRadius: 3,
+    paddingVertical: 10,
+  },
+  img: {
+    width: 64,
+    height: 64,
+    marginHorizontal: 10,
+  },
+  section: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    padding: 6,
+    backgroundColor: '#5890ff',
+  },
+});
+
+var animations = {
+  layout: {
+    spring: {
+      duration: 0.75,
+      create: {
+        duration: 0.3,
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.opacity,
+      },
+      update: {
+        type: LayoutAnimation.Types.spring,
+        springDamping: 0.4,
+      },
+    },
+    easeInEaseOut: {
+      duration: 0.3,
+      create: {
+        type: LayoutAnimation.Types.easeInEaseOut,
+        property: LayoutAnimation.Properties.scaleXY,
+      },
+      update: {
+        delay: 0.1,
+        type: LayoutAnimation.Types.easeInEaseOut,
+      },
+    },
+  },
+};
+
+var layoutAnimationConfigs = [
+  animations.layout.spring,
+  animations.layout.easeInEaseOut,
+];
+
+module.exports = ListViewPagingExample;

Examples/UIExplorer/ListViewSimpleExample.js

@@ -0,0 +1,121 @@
+/**
+* Copyright 2004-present Facebook. All Rights Reserved.
+*
+* @provides ListViewSimpleExample
+*/
+'use strict';
+
+var React = require('react-native');
+var {
+  Image,
+  ListView,
+  ListViewDataSource,
+  TouchableHighlight,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var UIExplorerPage = require('./UIExplorerPage');
+
+var ListViewSimpleExample = React.createClass({
+  statics: {
+    title: '<ListView> - Simple',
+    description: 'Performant, scrollable list of data.'
+  },
+
+  getInitialState: function() {
+    var ds = new ListViewDataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+    return {
+      dataSource: ds.cloneWithRows(this._genRows({})),
+    };
+  },
+
+  componentWillMount: function() {
+    this._pressData = {};
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage
+        title={this.props.navigator ? null : '<ListView> - Simple'}
+        noSpacer={true}
+        noScroll={true}>
+        <ListView
+          dataSource={this.state.dataSource}
+          renderRow={this._renderRow}
+        />
+      </UIExplorerPage>
+    );
+  },
+
+  _renderRow: function(rowData, sectionID, rowID) {
+    var rowHash = Math.abs(hashCode(rowData));
+    var imgSource = {
+      uri: THUMB_URLS[rowHash % THUMB_URLS.length],
+    };
+    return (
+      <TouchableHighlight onPress={() => this._pressRow(rowID)}>
+        <View>
+          <View style={styles.row}>
+            <Image style={styles.thumb} source={imgSource} />
+            <Text style={styles.text}>
+              {rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
+            </Text>
+          </View>
+          <View style={styles.separator} />
+        </View>
+      </TouchableHighlight>
+    );
+  },
+
+  _genRows: function(pressData) {
+    var dataBlob = [];
+    for (var ii = 0; ii < 100; ii++) {
+      var pressedText = pressData[ii] ? ' (pressed)' : '';
+      dataBlob.push('Row ' + ii + pressedText);
+    }
+    return dataBlob;
+  },
+
+  _pressRow: function(rowID) {
+    this._pressData[rowID] = !this._pressData[rowID];
+    this.setState({dataSource: this.state.dataSource.cloneWithRows(
+      this._genRows(this._pressData)
+    )});
+  },
+});
+
+var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
+var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
+
+/* eslint no-bitwise: 0 */
+var hashCode = function(str) {
+  var hash = 15;
+  for (var ii = str.length - 1; ii >= 0; ii--) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(ii);
+  }
+  return hash;
+};
+
+var styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 10,
+    backgroundColor: '#F6F6F6',
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#CCCCCC',
+  },
+  thumb: {
+    width: 64,
+    height: 64,
+  },
+  text: {
+    flex: 1,
+  },
+});
+
+module.exports = ListViewSimpleExample;

Examples/UIExplorer/NavigatorIOSExample.js

@@ -0,0 +1,216 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule NavigatorIOSExample
+ */
+'use strict';
+
+var React = require('react-native/addons');
+var ViewExample = require('./ViewExample');
+var {
+  PixelRatio,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+
+var EmptyPage = React.createClass({
+
+  render: function() {
+    return (
+      <View style={styles.emptyPage}>
+        <Text style={styles.emptyPageText}>
+          {this.props.text}
+        </Text>
+      </View>
+    );
+  },
+
+});
+
+var NavigatorIOSExample = React.createClass({
+
+  statics: {
+    title: '<NavigatorIOS>',
+    description: 'iOS navigation capabilities',
+  },
+
+  render: function() {
+    var recurseTitle = 'Recurse Navigation';
+    if (!this.props.topExampleRoute) {
+      recurseTitle += ' - more examples here';
+    }
+    return (
+      <ScrollView style={styles.list}>
+        <View style={styles.line}/>
+        <View style={styles.group}>
+          <View style={styles.row}>
+            <Text style={styles.rowNote}>
+              See &lt;UIExplorerApp&gt; for top-level usage.
+            </Text>
+          </View>
+        </View>
+        <View style={styles.line}/>
+        <View style={styles.groupSpace}/>
+        <View style={styles.line}/>
+        <View style={styles.group}>
+          {this._renderRow(recurseTitle, () => {
+            this.props.navigator.push({
+              title: NavigatorIOSExample.title,
+              component: NavigatorIOSExample,
+              backButtonTitle: 'Custom Back',
+              passProps: {topExampleRoute: this.props.topExampleRoute || this.props.route},
+            });
+          })}
+          {this._renderRow('Push View Example', () => {
+            this.props.navigator.push({
+              title: 'Very Long Custom View Example Title',
+              component: ViewExample,
+            });
+          })}
+          {this._renderRow('Custom Right Button', () => {
+            this.props.navigator.push({
+              title: NavigatorIOSExample.title,
+              component: EmptyPage,
+              rightButtonTitle: 'Cancel',
+              onRightButtonPress: () => this.props.navigator.pop(),
+              passProps: {
+                text: 'This page has a right button in the nav bar',
+              }
+            });
+          })}
+          {this._renderRow('Pop', () => {
+            this.props.navigator.pop();
+          })}
+          {this._renderRow('Pop to top', () => {
+            this.props.navigator.popToTop();
+          })}
+          {this._renderRow('Replace here', () => {
+            var prevRoute = this.props.route;
+            this.props.navigator.replace({
+              title: 'New Navigation',
+              component: EmptyPage,
+              rightButtonTitle: 'Undo',
+              onRightButtonPress: () => this.props.navigator.replace(prevRoute),
+              passProps: {
+                text: 'The component is replaced, but there is currently no ' +
+                  'way to change the right button or title of the current route',
+              }
+            });
+          })}
+          {this._renderReplacePrevious()}
+          {this._renderReplacePreviousAndPop()}
+          {this._renderPopToTopNavExample()}
+        </View>
+        <View style={styles.line}/>
+      </ScrollView>
+    );
+  },
+
+  _renderPopToTopNavExample: function() {
+    if (!this.props.topExampleRoute) {
+      return null;
+    }
+    return this._renderRow('Pop to top NavigatorIOSExample', () => {
+      this.props.navigator.popToRoute(this.props.topExampleRoute);
+    });
+  },
+
+  _renderReplacePrevious: function() {
+    if (!this.props.topExampleRoute) {
+      // this is to avoid replacing the UIExplorerList at the top of the stack
+      return null;
+    }
+    return this._renderRow('Replace previous', () => {
+      this.props.navigator.replacePrevious({
+        title: 'Replaced',
+        component: EmptyPage,
+        passProps: {
+          text: 'This is a replaced "previous" page',
+        },
+        wrapperStyle: styles.customWrapperStyle,
+      });
+    });
+  },
+
+  _renderReplacePreviousAndPop: function() {
+    if (!this.props.topExampleRoute) {
+      // this is to avoid replacing the UIExplorerList at the top of the stack
+      return null;
+    }
+    return this._renderRow('Replace previous and pop', () => {
+      this.props.navigator.replacePreviousAndPop({
+        title: 'Replaced and Popped',
+        component: EmptyPage,
+        passProps: {
+          text: 'This is a replaced "previous" page',
+        },
+        wrapperStyle: styles.customWrapperStyle,
+      });
+    });
+  },
+
+  _renderRow: function(title, onPress) {
+    return (
+      <View>
+        <TouchableHighlight onPress={onPress}>
+          <View style={styles.row}>
+            <Text style={styles.rowText}>
+              {title}
+            </Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.separator} />
+      </View>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  customWrapperStyle: {
+    backgroundColor: '#bbdddd',
+  },
+  emptyPage: {
+    flex: 1,
+    paddingTop: 64,
+  },
+  emptyPageText: {
+    margin: 10,
+  },
+  list: {
+    backgroundColor: '#eeeeee',
+    marginTop: 10,
+  },
+  group: {
+    backgroundColor: 'white',
+  },
+  groupSpace: {
+    height: 15,
+  },
+  line: {
+    backgroundColor: '#bbbbbb',
+    height: 1 / PixelRatio.get(),
+  },
+  row: {
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    paddingHorizontal: 15,
+    paddingVertical: 15,
+  },
+  separator: {
+    height: 1 / PixelRatio.get(),
+    backgroundColor: '#bbbbbb',
+    marginLeft: 15,
+  },
+  rowNote: {
+    fontSize: 17,
+  },
+  rowText: {
+    fontSize: 17,
+    fontWeight: 'bold',
+  },
+});
+
+module.exports = NavigatorIOSExample;

Examples/UIExplorer/PointerEventsExample.js

@@ -0,0 +1,239 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule PointerEventsExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var ExampleBox = React.createClass({
+  getInitialState: function() {
+    return {
+      log: [],
+    };
+  },
+  handleLog: function(msg) {
+    this.state.log = this.state.log.concat([msg]);
+  },
+  flushReactChanges: function() {
+    this.forceUpdate();
+  },
+  /**
+   * Capture phase of bubbling to append separator before any of the bubbling
+   * happens.
+   */
+  handleTouchCapture: function() {
+    this.state.log = this.state.log.concat(['---']);
+  },
+  render: function() {
+    return (
+      <View>
+        <View
+          onTouchEndCapture={this.handleTouchCapture}
+          onTouchStart={this.flushReactChanges}>
+          <this.props.Component onLog={this.handleLog} />
+        </View>
+        <View
+          style={styles.logBox}>
+          <DemoText style={styles.logText}>
+            {this.state.log.join('\n')}
+          </DemoText>
+        </View>
+      </View>
+    );
+  }
+});
+
+
+var NoneExample = React.createClass({
+  render: function() {
+    return (
+      <View
+        onTouchStart={() => this.props.onLog('A unspecified touched')}
+        style={styles.box}>
+        <DemoText style={styles.text}>
+          A: unspecified
+        </DemoText>
+        <View
+          pointerEvents={View.pointerEvents.none}
+          onTouchStart={() => this.props.onLog('B none touched')}
+          style={[styles.box, styles.boxPassedThrough]}>
+          <DemoText style={[styles.text, styles.textPassedThrough]}>
+            B: none
+          </DemoText>
+          <View
+            onTouchStart={() => this.props.onLog('C unspecified touched')}
+            style={[styles.box, styles.boxPassedThrough]}>
+            <DemoText style={[styles.text, styles.textPassedThrough]}>
+              C: unspecified
+            </DemoText>
+          </View>
+        </View>
+      </View>
+    );
+  }
+});
+
+/**
+ * Special demo text that makes itself untouchable so that it doesn't destroy
+ * the experiment and confuse the output.
+ */
+var DemoText = React.createClass({
+  render: function() {
+    return (
+      <View pointerEvents={View.pointerEvents.none}>
+        <Text
+          style={this.props.style}>
+          {this.props.children}
+        </Text>
+      </View>
+    );
+  }
+});
+
+var BoxNoneExample = React.createClass({
+  render: function() {
+    return (
+      <View
+        onTouchStart={() => this.props.onLog('A unspecified touched')}
+        style={styles.box}>
+        <DemoText style={styles.text}>
+          A: unspecified
+        </DemoText>
+        <View
+          pointerEvents={View.pointerEvents.boxNone}
+          onTouchStart={() => this.props.onLog('B boxNone touched')}
+          style={[styles.box, styles.boxPassedThrough]}>
+          <DemoText style={[styles.text, styles.textPassedThrough]}>
+            B: boxNone
+          </DemoText>
+          <View
+            onTouchStart={() => this.props.onLog('C unspecified touched')}
+            style={styles.box}>
+            <DemoText style={styles.text}>
+              C: unspecified
+            </DemoText>
+          </View>
+          <View
+            pointerEvents={View.pointerEvents.unspecified}
+            onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
+            style={[styles.box]}>
+            <DemoText style={[styles.text]}>
+              C: explicitly unspecified
+            </DemoText>
+          </View>
+        </View>
+      </View>
+    );
+  }
+});
+
+var BoxOnlyExample = React.createClass({
+  render: function() {
+    return (
+      <View
+        onTouchStart={() => this.props.onLog('A unspecified touched')}
+        style={styles.box}>
+        <DemoText style={styles.text}>
+          A: unspecified
+        </DemoText>
+        <View
+          pointerEvents={View.pointerEvents.boxOnly}
+          onTouchStart={() => this.props.onLog('B boxOnly touched')}
+          style={styles.box}>
+          <DemoText style={styles.text}>
+            B: boxOnly
+          </DemoText>
+          <View
+            onTouchStart={() => this.props.onLog('C unspecified touched')}
+            style={[styles.box, styles.boxPassedThrough]}>
+            <DemoText style={[styles.text, styles.textPassedThrough]}>
+              C: unspecified
+            </DemoText>
+          </View>
+          <View
+            pointerEvents={View.pointerEvents.unspecified}
+            onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
+            style={[styles.box, styles.boxPassedThrough]}>
+            <DemoText style={[styles.text, styles.textPassedThrough]}>
+              C: explicitly unspecified
+            </DemoText>
+          </View>
+        </View>
+      </View>
+    );
+  }
+});
+
+var exampleClasses = [
+  {
+    Component: NoneExample,
+    title: '`none`',
+    description: '`none` causes touch events on the container and its child components to pass through to the parent container.',
+  },
+  {
+    Component: BoxNoneExample,
+    title: '`boxNone`',
+    description: '`boxNone` causes touch events on the container to pass through and will only detect touch events on its child components.',
+  },
+  {
+    Component: BoxOnlyExample,
+    title: '`boxOnly`',
+    description: '`boxOnly` causes touch events on the container\'s child components to pass through and will only detect touch events on the container itself.',
+  }
+];
+
+var infoToExample = (info) => {
+  return {
+    title: info.title,
+    description: info.description,
+    render: function() {
+      return <ExampleBox key={info.title} Component={info.Component} />;
+    },
+  };
+};
+
+var styles = StyleSheet.create({
+  text: {
+    fontSize: 10,
+    color: '#5577cc',
+  },
+  textPassedThrough: {
+    color: '#88aadd',
+  },
+  box: {
+    backgroundColor: '#aaccff',
+    borderWidth: 1,
+    borderColor: '#7799cc',
+    padding: 10,
+    margin: 5,
+  },
+  boxPassedThrough: {
+    borderColor: '#99bbee',
+  },
+  logText: {
+    fontSize: 9,
+  },
+  logBox: {
+    padding: 20,
+    margin: 10,
+    borderWidth: 0.5,
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+  bottomSpacer: {
+    marginBottom: 100,
+  },
+});
+
+exports.framework = 'React';
+exports.title = 'Pointer Events';
+exports.description = '`pointerEvents` is a prop of View that gives control ' +
+  'of how touches should be handled.';
+exports.examples = exampleClasses.map(infoToExample);

Examples/UIExplorer/ScrollViewExample.js

@@ -0,0 +1,102 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule ScrollViewExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  ScrollView,
+  StyleSheet,
+  View,
+  Image
+} = React;
+
+exports.title = '<ScrollView>';
+exports.description = 'Component that enables scrolling through child components';
+exports.examples = [
+{
+  title: '<ScrollView>',
+  description: 'To make content scrollable, wrap it within a <ScrollView> component',
+  render: function() {
+    return (
+      <ScrollView
+        onScroll={() => { console.log('onScroll!'); }}
+        throttleScrollCallbackMS={200}
+        contentInset={{top: -50}}
+        style={styles.scrollView}>
+        {THUMBS.map(createThumbRow)}
+      </ScrollView>
+    );
+  }
+}, {
+  title: '<ScrollView> (horizontal = true)',
+  description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
+  render: function() {
+    return (
+      <ScrollView
+        horizontal={true}
+        contentInset={{top: -50}}
+        style={[styles.scrollView, styles.horizontalScrollView]}>
+        {THUMBS.map(createThumbRow)}
+      </ScrollView>
+    );
+  }
+}];
+
+var Thumb = React.createClass({
+  shouldComponentUpdate: function(nextProps, nextState) {
+    return false;
+  },
+  render: function() {
+    return (
+      <View style={styles.button}>
+        <Image style={styles.img} source={{uri:this.props.uri}} />
+      </View>
+    );
+  }
+});
+
+var THUMBS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
+THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS
+var createThumbRow = (uri, i) => <Thumb key={i} uri={uri} />;
+
+var styles = StyleSheet.create({
+  scrollView: {
+    backgroundColor: '#6A85B1',
+    height: 300,
+  },
+  horizontalScrollView: {
+    height: 120,
+  },
+  containerPage: {
+    height: 50,
+    width: 50,
+    backgroundColor: '#527FE4',
+    padding: 5,
+  },
+  text: {
+    fontSize: 20,
+    color: '#888888',
+    left: 80,
+    top: 20,
+    height: 40,
+  },
+  button: {
+    margin: 7,
+    padding: 5,
+    alignItems: 'center',
+    backgroundColor: '#eaeaea',
+    borderRadius: 3,
+  },
+  buttonContents: {
+    flexDirection: 'row',
+    width: 64,
+    height: 64,
+  },
+  img: {
+    width: 64,
+    height: 64,
+  }
+});

Examples/UIExplorer/StatusBarIOSExample.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule StatusBarIOSExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  View,
+  Text,
+  TouchableHighlight,
+  StatusBarIOS,
+} = React;
+
+exports.framework = 'React';
+exports.title = 'StatusBarIOS';
+exports.description = 'Module for controlling iOS status bar';
+exports.examples = [{
+  title: 'Status Bar Style',
+  render() {
+    return (
+      <View>
+        {Object.keys(StatusBarIOS.Style).map((key) =>
+          <TouchableHighlight style={styles.wrapper}
+            onPress={() => StatusBarIOS.setStyle(StatusBarIOS.Style[key])}>
+            <View style={styles.button}>
+              <Text>setStyle(StatusBarIOS.Style.{key})</Text>
+            </View>
+          </TouchableHighlight>
+        )}
+      </View>
+    );
+  },
+}, {
+  title: 'Status Bar Style Animated',
+  render() {
+    return (
+      <View>
+        {Object.keys(StatusBarIOS.Style).map((key) =>
+          <TouchableHighlight style={styles.wrapper}
+            onPress={() => StatusBarIOS.setStyle(StatusBarIOS.Style[key], true)}>
+            <View style={styles.button}>
+              <Text>setStyle(StatusBarIOS.Style.{key}, true)</Text>
+            </View>
+          </TouchableHighlight>
+        )}
+      </View>
+    );
+  },
+}, {
+  title: 'Status Bar Hidden',
+  render() {
+    return (
+      <View>
+        {Object.keys(StatusBarIOS.Animation).map((key) =>
+          <View>
+            <TouchableHighlight style={styles.wrapper}
+              onPress={() => StatusBarIOS.setHidden(true, StatusBarIOS.Animation[key])}>
+              <View style={styles.button}>
+                <Text>setHidden(true, StatusBarIOS.Animation.{key})</Text>
+              </View>
+            </TouchableHighlight>
+            <TouchableHighlight style={styles.wrapper}
+              onPress={() => StatusBarIOS.setHidden(false, StatusBarIOS.Animation[key])}>
+              <View style={styles.button}>
+                <Text>setHidden(false, StatusBarIOS.Animation.{key})</Text>
+              </View>
+            </TouchableHighlight>
+          </View>
+        )}
+      </View>
+    );
+  },
+}];
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+});

Examples/UIExplorer/TextExample.ios.js

@@ -0,0 +1,279 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TextExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var Entity = React.createClass({
+  render: function() {
+    return (
+      <Text style={styles.entity}>
+        {this.props.children}
+      </Text>
+    );
+  }
+});
+
+var AttributeToggler = React.createClass({
+  getInitialState: function() {
+    return {fontWeight: 'bold', fontSize: 15};
+  },
+  increaseSize: function() {
+    this.setState({
+      fontSize: this.state.fontSize + 1
+    });
+  },
+  render: function() {
+    var curStyle = {fontSize: this.state.fontSize};
+    return (
+      <Text>
+        <Text style={curStyle}>
+          Tap the controls below to change attributes.
+        </Text>
+        <Text>
+          See how it will even work on{' '}
+          <Text style={curStyle}>
+            this nested text
+          </Text>
+          <Text onPress={this.increaseSize}>
+            {'>> Increase Size <<'}
+          </Text>
+        </Text>
+      </Text>
+    );
+  }
+});
+
+exports.title = '<Text>';
+exports.description = 'Base component for rendering styled text.';
+exports.examples = [
+{
+  title: 'Wrap',
+  render: function() {
+    return (
+      <Text>
+        The text should wrap if it goes on multiple lines. See, this is going to
+        the next line.
+      </Text>
+    );
+  },
+}, {
+  title: 'Font Family',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontFamily: 'Cochin'}}>
+          Cochin
+        </Text>
+        <Text style={{fontFamily: 'Cochin', fontWeight: 'bold'}}>
+          Cochin bold
+        </Text>
+        <Text style={{fontFamily: 'Helvetica'}}>
+          Helvetica
+        </Text>
+        <Text style={{fontFamily: 'Helvetica', fontWeight: 'bold'}}>
+          Helvetica bold
+        </Text>
+        <Text style={{fontFamily: 'Verdana'}}>
+          Verdana
+        </Text>
+        <Text style={{fontFamily: 'Verdana', fontWeight: 'bold'}}>
+          Verdana bold
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Font Size',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontSize: 23}}>
+          Size 23
+        </Text>
+        <Text style={{fontSize: 8}}>
+          Size 8
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Color',
+  render: function() {
+    return (
+      <View>
+        <Text style={{color: 'red'}}>
+          Red color
+        </Text>
+        <Text style={{color: 'blue'}}>
+          Blue color
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Font Weight',
+  render: function() {
+    return (
+      <Text style={{fontWeight: 'bold'}}>
+        Move fast and be bold
+      </Text>
+    );
+  },
+}, {
+  title: 'Nested',
+  description: 'Nested text components will inherit the styles of their ' +
+    'parents (only backgroundColor is inherited from non-Text parents).  ' +
+    '<Text> only supports other <Text> and raw text (strings) as children.',
+  render: function() {
+    return (
+      <View>
+        <Text>
+          (Normal text,
+          <Text style={{fontWeight: 'bold'}}>
+            (and bold
+            <Text style={{fontSize: 11, color: '#527fe4'}}>
+              (and tiny inherited bold blue)
+            </Text>
+            )
+          </Text>
+          )
+        </Text>
+        <Text style={{fontSize: 12}}>
+          <Entity>Entity Name</Entity>
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Text Align',
+  render: function() {
+    return (
+      <View>
+        <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>
+      </View>
+    );
+  },
+}, {
+  title: 'Spaces',
+  render: function() {
+    return (
+      <Text>
+        A {'generated'} {' '} {'string'} and    some &nbsp;&nbsp;&nbsp; spaces
+      </Text>
+    );
+  },
+}, {
+  title: 'Line Height',
+  render: function() {
+    return (
+      <Text>
+        <Text style={{lineHeight: 35}}>
+          A lot of space between the lines of this long passage that should
+          wrap once.
+        </Text>
+      </Text>
+    );
+  },
+}, {
+  title: 'Empty Text',
+  description: 'It\'s ok to have Text with zero or null children.',
+  render: function() {
+    return (
+      <Text />
+    );
+  },
+}, {
+  title: 'Toggling Attributes',
+  render: function() {
+    return <AttributeToggler />;
+  },
+}, {
+  title: 'backgroundColor attribute',
+  description: 'backgroundColor is inherited from all types of views.',
+  render: function() {
+    return (
+      <View style={{backgroundColor: 'yellow'}}>
+        <Text>
+          Yellow background inherited from View parent,
+          <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>
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'containerBackgroundColor attribute',
+  render: function() {
+    return (
+      <View>
+        <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, containerBackgroundColor: 'transparent'}]}>
+          {"containerBackgroundColor: 'transparent' + backgroundColor wash"}
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'numberOfLines attribute',
+  render: function() {
+    return (
+      <View>
+        <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>
+      </View>
+    );
+  },
+}];
+
+var styles = StyleSheet.create({
+  backgroundColorText: {
+    left: 5,
+    backgroundColor: 'rgba(100, 100, 100, 0.3)'
+  },
+  entity: {
+    fontWeight: 'bold',
+    color: '#527fe4',
+  },
+});

Examples/UIExplorer/TextInputExample.js

@@ -0,0 +1,188 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TextInputExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Text,
+  TextInput,
+  View,
+  StyleSheet,
+} = React;
+
+var WithLabel = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.labelContainer}>
+        <View style={styles.label}>
+          <Text>{this.props.label}</Text>
+        </View>
+        {this.props.children}
+      </View>
+    );
+  }
+});
+
+var TextEventsExample = React.createClass({
+  getInitialState: function() {
+    return {
+      curText: '<No Event>',
+      prevText: '<No Event>',
+    };
+  },
+
+  updateText: function(text) {
+    this.setState({
+      curText: text,
+      prevText: this.state.curText,
+    });
+  },
+
+  render: function() {
+    return (
+      <View>
+        <TextInput
+          autoCapitalize={TextInput.autoCapitalizeMode.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.default}
+        />
+        <Text style={styles.eventLabel}>
+          {this.state.curText}{'\n'}
+          (prev: {this.state.prevText})
+        </Text>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  page: {
+    paddingBottom: 300,
+  },
+  default: {
+    height: 26,
+    borderWidth: 0.5,
+    borderColor: '#0f0f0f',
+    padding: 4,
+    flex: 1,
+    fontSize: 13,
+  },
+  multiline: {
+    borderWidth: 0.5,
+    borderColor: '#0f0f0f',
+    flex: 1,
+    fontSize: 13,
+    height: 50,
+  },
+  eventLabel: {
+    margin: 3,
+    fontSize: 12,
+  },
+  labelContainer: {
+    flexDirection: 'row',
+    marginVertical: 2,
+    flex: 1,
+  },
+  label: {
+    width: 80,
+    justifyContent: 'flex-end',
+    flexDirection: 'row',
+    marginRight: 10,
+    paddingTop: 2,
+  },
+});
+
+exports.title = '<TextInput>';
+exports.description = 'Single-line text inputs.';
+exports.examples = [
+  {
+    title: 'Auto-focus',
+    render: function() {
+      return <TextInput autoFocus={true} style={styles.default} />;
+    }
+  },
+  {
+    title: 'Auto-capitalize',
+    render: function() {
+      return (
+        <View>
+          <WithLabel label="none">
+            <TextInput
+              autoCapitalize={TextInput.autoCapitalizeMode.none}
+              style={styles.default}
+            />
+          </WithLabel>
+          <WithLabel label="sentences">
+            <TextInput
+              autoCapitalize={TextInput.autoCapitalizeMode.sentences}
+              style={styles.default}
+            />
+          </WithLabel>
+          <WithLabel label="words">
+            <TextInput
+              autoCapitalize={TextInput.autoCapitalizeMode.words}
+              style={styles.default}
+            />
+          </WithLabel>
+          <WithLabel label="characters">
+            <TextInput
+              autoCapitalize={TextInput.autoCapitalizeMode.characters}
+              style={styles.default}
+            />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Auto-correct',
+    render: function() {
+      return (
+        <View>
+          <WithLabel label="true">
+            <TextInput autoCorrect={true} style={styles.default} />
+          </WithLabel>
+          <WithLabel label="false">
+            <TextInput autoCorrect={false} style={styles.default} />
+          </WithLabel>
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Event handling',
+    render: () => <TextEventsExample />,
+  },
+  {
+    title: 'Colored input text',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={[styles.default, {color: 'blue'}]}
+            value="Blue"
+          />
+          <TextInput
+            style={[styles.default, {color: 'green'}]}
+            value="Green"
+          />
+        </View>
+      );
+    }
+  },
+];

Examples/UIExplorer/TouchableExample.js

@@ -0,0 +1,134 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule TouchableExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  PixelRatio,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+
+exports.title = '<Touchable*> and onPress';
+exports.examples = [
+{
+  title: '<TouchableHighlight>',
+  description: 'TouchableHighlight works by adding an extra view with a ' +
+    'black background under the single child view.  This works best when the ' +
+    'child view is fully opaque, although it can be made to work as a simple ' +
+    'background color change as well with the activeOpacity and ' +
+    'underlayColor props.',
+  render: function() {
+    return (
+      <View>
+        <View style={styles.row}>
+          <TouchableHighlight
+            style={styles.wrapper}
+            onPress={() => console.log('stock THW image - highlight')}>
+            <Image
+              source={heartImage}
+              style={styles.image}
+            />
+          </TouchableHighlight>
+          <TouchableHighlight
+            style={styles.wrapper}
+            activeOpacity={1}
+            animationVelocity={0}
+            underlayColor="rgb(210, 230, 255)"
+            onPress={() => console.log('custom THW text - hightlight')}>
+            <View style={styles.wrapperCustom}>
+              <Text style={styles.text}>
+                Tap Here For Custom Highlight!
+              </Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+      </View>
+    );
+  },
+}, {
+  title: '<Text onPress={fn}> with highlight',
+  render: function() {
+    return <TextOnPressBox />;
+  },
+}];
+
+var TextOnPressBox = React.createClass({
+  getInitialState: function() {
+    return {
+      timesPressed: 0,
+    };
+  },
+  textOnPress: function() {
+    this.setState({
+      timesPressed: this.state.timesPressed + 1,
+    });
+  },
+  render: function() {
+    var textLog = '';
+    if (this.state.timesPressed > 1) {
+      textLog = this.state.timesPressed + 'x text onPress';
+    } else if (this.state.timesPressed > 0) {
+      textLog = 'text onPress';
+    }
+
+    return (
+      <View>
+        <Text
+          style={styles.textBlock}
+          onPress={this.textOnPress}>
+          Text has built-in onPress handling
+        </Text>
+        <View style={styles.logBox}>
+          <Text>
+            {textLog}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+});
+
+var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
+
+var styles = StyleSheet.create({
+  row: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  icon: {
+    width: 24,
+    height: 24,
+  },
+  image: {
+    width: 50,
+    height: 50,
+  },
+  text: {
+    fontSize: 16,
+  },
+  wrapper: {
+    borderRadius: 8,
+  },
+  wrapperCustom: {
+    borderRadius: 8,
+    padding: 6,
+  },
+  logBox: {
+    padding: 20,
+    margin: 10,
+    borderWidth: 1 / PixelRatio.get(),
+    borderColor: '#f0f0f0',
+    backgroundColor: '#f9f9f9',
+  },
+  textBlock: {
+    fontWeight: 'bold',
+    color: 'blue',
+  },
+});

Examples/UIExplorer/UIExplorerApp.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule UIExplorerApp
+ */
+'use strict';
+
+var React = require('react-native/addons');
+var UIExplorerList = require('./UIExplorerList');
+
+var {
+  AppRegistry,
+  NavigatorIOS,
+  StyleSheet,
+} = React;
+
+
+var UIExplorerApp = React.createClass({
+  render: function() {
+    return (
+      <NavigatorIOS
+        style={styles.container}
+        initialRoute={{
+          title: 'UIExplorer',
+          component: UIExplorerList,
+        }}
+        itemWrapperStyle={styles.itemWrapper}
+        tintColor='#008888'/>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  itemWrapper: {
+    backgroundColor: '#eaeaea',
+  },
+});
+
+AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
+
+module.exports = UIExplorerApp;

Examples/UIExplorer/UIExplorerBlock.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule UIExplorerBlock
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var UIExplorerBlock = React.createClass({
+  propTypes: {
+    title: React.PropTypes.string,
+    description: React.PropTypes.string,
+  },
+
+  getInitialState: function() {
+    return {description: null};
+  },
+
+  render: function() {
+    var description;
+    if (this.props.description) {
+      description =
+        <Text style={styles.descriptionText}>
+          {this.props.description}
+        </Text>;
+    }
+
+    return (
+      <View style={styles.container}>
+        <View style={styles.titleContainer}>
+          <Text style={styles.titleText}>
+            {this.props.title}
+          </Text>
+          {description}
+        </View>
+        <View style={styles.children}>
+          {this.props.children}
+        </View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    borderRadius: 3,
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    backgroundColor: '#ffffff',
+    margin: 10,
+    marginVertical: 5,
+    overflow: 'hidden',
+  },
+  titleContainer: {
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    backgroundColor: '#f6f7f8',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  titleText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  descriptionText: {
+    fontSize: 14,
+  },
+  disclosure: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 10,
+  },
+  disclosureIcon: {
+    width: 12,
+    height: 8,
+  },
+  children: {
+    padding: 10,
+  }
+});
+
+module.exports = UIExplorerBlock;

Examples/UIExplorer/UIExplorerList.js

@@ -0,0 +1,113 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('react-native/addons');
+var {
+  PixelRatio,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+  invariant,
+} = React;
+
+var createExamplePage = require('./createExamplePage');
+
+var EXAMPLES = [
+  require('./ViewExample'),
+  require('./LayoutExample'),
+  require('./TextExample.ios'),
+  require('./TextInputExample'),
+  require('./ExpandingTextExample'),
+  require('./ImageExample'),
+  require('./ListViewSimpleExample'),
+  require('./ListViewPagingExample'),
+  require('./NavigatorIOSExample'),
+  require('./StatusBarIOSExample'),
+  require('./PointerEventsExample'),
+  require('./TouchableExample'),
+  require('./ActivityIndicatorExample'),
+  require('./ScrollViewExample'),
+];
+
+var UIExplorerList = React.createClass({
+  render: function() {
+    return (
+      <ScrollView style={styles.list}>
+        <View style={styles.group}>
+          <View style={styles.line} />
+          {EXAMPLES.map(this._renderRow)}
+          <View style={styles.line} />
+        </View>
+      </ScrollView>
+    );
+  },
+
+  _renderRow: function(example, i) {
+    invariant(example.title, 'Example must provide a title.');
+    return (
+      <View key={i}>
+        <TouchableHighlight onPress={() => this._onPressRow(example)}>
+          <View style={styles.row}>
+            <Text style={styles.rowTitleText}>
+              {example.title}
+            </Text>
+            <Text style={styles.rowDetailText}>
+              {example.description}
+            </Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.separator} />
+      </View>
+    );
+  },
+
+  _onPressRow: function(example) {
+    var Component = example.examples ?
+      createExamplePage(null, example) :
+      example;
+    this.props.navigator.push({
+      title: Component.title,
+      component: Component,
+    });
+  },
+});
+
+var styles = StyleSheet.create({
+  list: {
+    backgroundColor: '#eeeeee',
+  },
+  group: {
+    backgroundColor: 'white',
+    marginVertical: 25,
+  },
+  line: {
+    backgroundColor: '#bbbbbb',
+    height: 1 / PixelRatio.get(),
+  },
+  row: {
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    paddingHorizontal: 15,
+    paddingVertical: 8,
+  },
+  separator: {
+    height: 1 / PixelRatio.get(),
+    backgroundColor: '#bbbbbb',
+    marginLeft: 15,
+  },
+  rowTitleText: {
+    fontSize: 17,
+    fontWeight: 'bold',
+  },
+  rowDetailText: {
+    fontSize: 15,
+    color: '#888888',
+    lineHeight: 20,
+  },
+});
+
+module.exports = UIExplorerList;

Examples/UIExplorer/UIExplorerPage.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule UIExplorerPage
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  ScrollView,
+  StyleSheet,
+  View,
+} = React;
+
+var UIExplorerTitle = require('./UIExplorerTitle');
+
+var UIExplorerPage = React.createClass({
+
+  propTypes: {
+    keyboardShouldPersistTaps: React.PropTypes.bool,
+    noScroll: React.PropTypes.bool,
+    noSpacer: React.PropTypes.bool,
+  },
+
+  render: function() {
+    var ContentWrapper;
+    var wrapperProps = {};
+    if (this.props.noScroll) {
+      ContentWrapper = View;
+    } else {
+      ContentWrapper = ScrollView;
+      wrapperProps.keyboardShouldPeristTaps = true;
+      wrapperProps.keyboardDismissMode =
+        ScrollView.keyboardDismissMode.Interactive;
+    }
+    var title = this.props.title ?
+      <UIExplorerTitle title={this.props.title} /> :
+      null;
+    var spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
+    return (
+      <View style={styles.container}>
+        {title}
+        <ContentWrapper
+          style={styles.wrapper}
+          {...wrapperProps}>
+            {this.props.children}
+            {spacer}
+        </ContentWrapper>
+      </View>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#e9eaed',
+    paddingTop: 15,
+    flex: 1,
+  },
+  spacer: {
+    height: 270,
+  },
+  wrapper: {
+    flex: 1,
+  },
+});
+
+module.exports = UIExplorerPage;

Examples/UIExplorer/UIExplorerTitle.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule UIExplorerTitle
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var UIExplorerTitle = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>
+          {this.props.title}
+        </Text>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    borderRadius: 4,
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    margin: 10,
+    height: 45,
+    padding: 10,
+    backgroundColor: 'white',
+  },
+  text: {
+    fontSize: 19,
+    fontWeight: 'bold',
+  },
+});
+
+module.exports = UIExplorerTitle;

Examples/UIExplorer/ViewExample.js

@@ -0,0 +1,123 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule ViewExample
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var ViewExample = React.createClass({
+  statics: {
+    title: '<View>',
+    description: 'Basic building block of all UI.'
+  },
+  getInitialState: function() {
+    return {
+      textBorderExampleHeight: 20,
+    };
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title={this.props.navigator ? null : '<View>'}>
+        <UIExplorerBlock title="Background Color">
+          <View style={{backgroundColor: '#527FE4', padding: 5}}>
+            <Text style={{fontSize: 11}}>
+              Blue background
+            </Text>
+          </View>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Border">
+          <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
+            <Text style={{fontSize: 11}}>5px blue border</Text>
+          </View>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Padding/Margin">
+          <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
+            <View style={[styles.box, {padding: 5}]}>
+              <Text style={{fontSize: 11}}>5px padding</Text>
+            </View>
+            <View style={[styles.box, {margin: 5}]}>
+              <Text style={{fontSize: 11}}>5px margin</Text>
+            </View>
+            <View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
+              <Text style={{fontSize: 11}}>
+                5px margin and padding,
+              </Text>
+              <Text style={{fontSize: 11}}>
+                widthAutonomous=true
+              </Text>
+            </View>
+          </View>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Border Radius">
+          <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
+            <Text style={{fontSize: 11}}>
+              Too much use of `borderRadius` (especially large radii) on
+              anything which is scrolling may result in dropped frames.
+              Use sparingly.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Circle with Border Radius">
+          <View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Overflow">
+          <View style={{flexDirection: 'row'}}>
+            <View
+              style={{
+                width: 95,
+                height: 10,
+                marginRight: 10,
+                marginBottom: 5,
+                overflow: 'hidden',
+                borderWidth: 0.5,
+              }}>
+              <View style={{width: 200, height: 20}}>
+                <Text>Overflow hidden</Text>
+              </View>
+            </View>
+            <View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
+              <View style={{width: 200, height: 20}}>
+                <Text>Overflow visible</Text>
+              </View>
+            </View>
+          </View>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Opacity">
+          <View style={{opacity: 0}}><Text>Opacity 0</Text></View>
+          <View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
+          <View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
+          <View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
+          <View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
+          <View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
+          <View style={{opacity: 1}}><Text>Opacity 1</Text></View>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+
+  updateHeight: function() {
+    var height = this.state.textBorderExampleHeight === 50 ? 20 : 50;
+    this.setState({textBorderExampleHeight: height});
+  },
+});
+
+var styles = StyleSheet.create({
+  box: {
+    backgroundColor: '#527FE4',
+    borderColor: '#000033',
+    borderWidth: 1,
+  }
+});
+
+module.exports = ViewExample;

Examples/UIExplorer/createExamplePage.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule createExamplePage
+ */
+'use strict';
+
+var React = require('react-native');
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var invariant = require('invariant');
+
+var createExamplePage = function(title, exampleModule) {
+  invariant(!!exampleModule.examples, 'The module must have examples');
+
+  var ExamplePage = React.createClass({
+    statics: {
+      title: exampleModule.title,
+      description: exampleModule.description,
+    },
+
+    getBlock: function(example, i) {
+      // Hack warning: This is a hack because the www UI explorer requires
+      // renderComponent to be called.
+      var originalRenderComponent = React.renderComponent;
+      var originalRender = React.render;
+      var renderedComponent;
+      React.render = React.renderComponent = function(element, container) {
+        renderedComponent = element;
+      };
+      var result = example.render(null);
+      if (result) {
+        renderedComponent = result;
+      }
+      React.renderComponent = originalRenderComponent;
+      React.render = originalRender;
+      return (
+        <UIExplorerBlock
+          key={i}
+          title={example.title}
+          description={example.description}>
+          {renderedComponent}
+        </UIExplorerBlock>
+      );
+    },
+
+    render: function() {
+      return (
+        <UIExplorerPage title={title}>
+          {exampleModule.examples.map(this.getBlock)}
+        </UIExplorerPage>
+      );
+    }
+  });
+
+  return ExamplePage;
+};
+
+module.exports = createExamplePage;

Examples/UIExplorer/main.m

@@ -0,0 +1,10 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+#import <UIKit/UIKit.h>
+#import "AppDelegate.h"
+
+int main(int argc, char * argv[]) {
+  @autoreleasepool {
+      return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
+  }
+}