[0.36.1] Bump version numbers

Summary:
They keyboard module is an instance of `NativeEventEmitter` which is an instance of `EventEmitter`. But the exported module only has a small subset of the APIs. This broke existing codebases which are using the methods not exported currently.

The PR just reassigns the variable before exporting so that the actual module is exported instead of the dummy object used for documentation. It also fixes a layout issue in the documentation.
Closes https://github.com/facebook/react-native/pull/10671

Differential Revision: D4110355

fbshipit-source-id: a6757f3ca8c2494970ba221b10a7e6e9a5f2d64d

.eslintrc

@@ -221,6 +221,9 @@
     "no-bitwise": 1,                 // disallow use of bitwise operators (off by default)
     "no-plusplus": 0,                // disallow use of unary operators, ++ and -- (off by default)
 
+  // React Plugin
+  // The following rules are made available via `eslint-plugin-react`.
+
     "react/display-name": 0,
     "react/jsx-boolean-value": 0,
     "react/jsx-no-duplicate-props": 2,
@@ -228,8 +231,8 @@
     "react/jsx-sort-props": 0,
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
-    "react/no-did-mount-set-state": [1, "allow-in-func"],
-    "react/no-did-update-set-state": [1, "allow-in-func"],
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1,
     "react/no-multi-comp": 0,
     "react/no-string-refs": 1,
     "react/no-unknown-property": 0,

.flowconfig

@@ -1,7 +1,7 @@
 [ignore]
 
 # We fork some components by platform.
-.*/*.android.js
+.*/*[.]android.js
 
 # Ignore templates with `@flow` in header
 .*/local-cli/generator.*
@@ -47,11 +47,11 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(30\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(30\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 unsafe.enable_getters_and_setters=true
 
 [version]
-^0.30.0
+^0.33.0

.github/ISSUE_TEMPLATE.md

@@ -1,21 +1,42 @@
-Hey there and thank you for using React Native!
+## Hey there and thank you for using React Native!
 
-React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.
+React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. Before opening a new issue, make sure to carefully read the following guidelines.
 
-Do the checklist before filing an issue:
+- Is this something you can **debug and fix**? 
+  Send a pull request! Bug fixes and documentation fixes are welcome.
+- Have a **usage** question?
+  We use GitHub Issues for bugs. Ask your usage question on Stack Overflow: http://stackoverflow.com/questions/tagged/react-native
+- Have an idea for a **feature**? 
+  Post the feature request on Product Pains, which has a voting system to surface important issues: https://productpains.com/product/react-native/
 
-- [ ] Is this something you can **debug and fix**? Send a pull request! Bug fixes and documentation fixes are welcome.
-- [ ] Have a usage question? Ask your question on [StackOverflow](http://stackoverflow.com/questions/tagged/react-native). We use StackOverflow for usage question and GitHub for bugs.
-- [ ] Have an idea for a feature? Post the feature request on [Product Pains](https://productpains.com/product/react-native/). It has a voting system to surface the important issues. GitHub issues should only be used for bugs.
+GitHub issues should only be used for bugs. Make sure these boxes are checked before submitting your issue:
 
+- [ ] You're using the latest release of React Native: https://github.com/facebook/react-native/releases
 
-None of the above, create a bug report
-------------------------------------------------------------------
+- [ ] You've searched through existing issues: https://github.com/facebook/react-native/issues 
+      Chances are that your issue has been reported or resolved before.
 
-Make sure to add **all the information needed to understand the bug** so that someone can help. If the info is missing we'll add the 'Needs more information' label and close the issue until there is enough information.
+- [ ] You have filled out the template below, or provided an equivalent amount of detail.
+      Issues without sufficient information will be labeled 'Needs more information' and will be closed until there is enough information.
 
-- [ ] Provide a **minimal code snippet** / [rnplay](https://rnplay.org/) example that reproduces the bug.
-- [ ] Provide **screenshots** where appropriate
-- [ ] What's the **version** of React Native you're using?
-- [ ] Does this occur on iOS, Android or both?
-- [ ] Are you using Mac, Linux or Windows?
+Describe your issue in as much detail as possible. Provide **screenshots** where appropriate. Provide a **minimal code snippet** / [rnplay](https://rnplay.org/) example that reproduces the bug, or include a list of detailed list of steps that reproduce the issue.
+
+--- delete everything above this line before submitting your issue --- 
+
+### Issue Description
+
+[FILL THIS OUT]
+
+### Steps to Reproduce / Code Snippets
+
+[FILL THIS OUT]
+
+#### Expected Results
+
+[FILL THIS OUT]
+
+### Additional Information
+
+* React Native version: [FILL THIS OUT]
+* Platform(s) (iOS, Android, or both?): [FILL THIS OUT]
+* Operating System (macOS, Linux, or Windows?): [FILL THIS OUT]

.gitignore

@@ -34,6 +34,7 @@ project.xcworkspace
 buck-out
 /ReactAndroid/src/main/jni/prebuilt/lib/armeabi-v7a/
 /ReactAndroid/src/main/jni/prebuilt/lib/x86/
+/ReactAndroid/src/main/gen
 
 # Android
 .idea

.travis.yml

@@ -1,6 +1,6 @@
 language: objective-c
 
-osx_image: xcode7.3
+osx_image: xcode8
 
 install:
   - mkdir -p /Users/travis/build/facebook/.nvm
@@ -16,6 +16,7 @@ install:
 
 script:
   - if [[ "$TEST_TYPE" = objc ]]; then travis_retry travis_wait ./scripts/objc-test.sh; fi
+  - if [[ "$TEST_TYPE" = objc-tvos ]]; then travis_retry travis_wait ./scripts/objc-test-tvos.sh; fi
   - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
   - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
   - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi
@@ -24,6 +25,7 @@ env:
   matrix:
     - TEST_TYPE=e2e-objc
     - TEST_TYPE=objc
+    - TEST_TYPE=objc-tvos
     - TEST_TYPE=js
 
 branches:

Examples/2048/2048.xcodeproj/project.pbxproj

@@ -415,7 +415,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -455,7 +455,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

Examples/Movies/Movies.xcodeproj/project.pbxproj

@@ -446,7 +446,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -486,7 +486,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

Examples/TicTacToe/TicTacToe.xcodeproj/project.pbxproj

@@ -444,7 +444,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -484,7 +484,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

Examples/TicTacToe/android/app/BUCK

@@ -0,0 +1,31 @@
+include_defs('//ReactAndroid/DEFS')
+
+android_binary(
+  name = 'app',
+  manifest = 'src/main/AndroidManifest.xml',
+  keystore = '//keystores:debug',
+  deps = [
+    ':tictactoe-lib',
+  ],
+)
+
+android_library(
+  name = 'tictactoe-lib',
+  srcs = glob(['src/main/java/**/*.java']),
+  deps = [
+    ':res',
+    react_native_dep('third-party/java/jsr-305:jsr-305'),
+    react_native_target('java/com/facebook/react/modules/core:core'),
+    react_native_target('java/com/facebook/react/shell:shell'),
+    react_native_target('java/com/facebook/react:react'),
+    react_native_target('jni/prebuilt:android-jsc'),
+    # .so files are prebuilt by Gradle with `./gradlew :ReactAndroid:packageReactNdkLibsForBuck`
+    react_native_target('jni/prebuilt:reactnative-libs'),
+  ],
+)
+
+android_resource(
+  name = 'res',
+  res = 'src/main/res',
+  package = 'com.facebook.react.tictactoe',
+)

Examples/TicTacToe/android/app/build.gradle

@@ -0,0 +1,31 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        applicationId "com.facebook.react.tictactoe"
+        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.1'
+
+    // Build React Native from source
+    compile project(':ReactAndroid')
+}

Examples/TicTacToe/android/app/gradle.properties

@@ -0,0 +1 @@
+android.useDeprecatedNdk=true

Examples/TicTacToe/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/TicTacToe/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,30 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.facebook.react.tictactoe"
+    android:versionCode="1"
+    android:versionName="1.0">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <uses-sdk
+      android:minSdkVersion="16"
+      android:targetSdkVersion="22" />
+
+    <application
+      android:name=".TicTacToeApplication"
+      android:allowBackup="true"
+      android:label="@string/app_name"
+      android:icon="@drawable/launcher_icon"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".TicTacToeActivity">
+        <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/TicTacToe/android/app/src/main/java/com/facebook/react/tictactoe/TicTacToeActivity.java

@@ -0,0 +1,23 @@
+/**
+ * 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.tictactoe;
+
+import com.facebook.react.ReactActivity;
+
+public class TicTacToeActivity extends ReactActivity {
+  @Override
+  protected String getMainComponentName() {
+    return "TicTacToeApp";
+  }
+}

Examples/TicTacToe/android/app/src/main/java/com/facebook/react/tictactoe/TicTacToeApplication.java

@@ -0,0 +1,58 @@
+/**
+ * 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.tictactoe;
+
+import android.app.Application;
+
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+
+import java.util.Arrays;
+import java.util.List;
+
+import javax.annotation.Nullable;
+
+public class TicTacToeApplication extends Application implements ReactApplication {
+  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+    @Override
+    public String getJSMainModuleName() {
+      return "Examples/TicTacToe/TicTacToeApp";
+    }
+
+    @Override
+    public @Nullable String getBundleAssetName() {
+      return "TicTacToeApp.bundle";
+    }
+
+    @Override
+    protected boolean getUseDeveloperSupport() {
+      return true;
+    }
+
+    @Override
+    protected List<ReactPackage> getPackages() {
+      return Arrays.<ReactPackage>asList(
+        new MainReactPackage()
+      );
+    }
+  };
+
+  @Override
+  public ReactNativeHost getReactNativeHost() {
+    return mReactNativeHost;
+  }
+}

Examples/TicTacToe/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=".TicTacToeApp">
+
+    <com.facebook.react.ReactRootView
+      android:layout_width="match_parent"
+      android:layout_height="match_parent"
+      android:id="@+id/react_root_view"/>
+
+</RelativeLayout>

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

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

Examples/TicTacToe/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>

Examples/UIExplorer/UIExplorer-tvOS/Info.plist

@@ -0,0 +1,35 @@
+<?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>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
+	<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>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>arm64</string>
+	</array>
+	<key>UIUserInterfaceStyle</key>
+	<string>Automatic</string>
+</dict>
+</plist>

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

@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "0800"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2DD3238F1DA2DD8A000FE1B8"
+               BuildableName = "UIExplorer-tvOS.app"
+               BlueprintName = "UIExplorer-tvOS"
+               ReferencedContainer = "container:UIExplorer.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2DD323A41DA2DD8B000FE1B8"
+               BuildableName = "UIExplorer-tvOSUnitTests.xctest"
+               BlueprintName = "UIExplorer-tvOSUnitTests"
+               ReferencedContainer = "container:UIExplorer.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2D4624C11DA2EA6900C74D09"
+               BuildableName = "UIExplorer-tvOSIntegrationTests.xctest"
+               BlueprintName = "UIExplorer-tvOSIntegrationTests"
+               ReferencedContainer = "container:UIExplorer.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+      <MacroExpansion>
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "2DD3238F1DA2DD8A000FE1B8"
+            BuildableName = "UIExplorer-tvOS.app"
+            BlueprintName = "UIExplorer-tvOS"
+            ReferencedContainer = "container:UIExplorer.xcodeproj">
+         </BuildableReference>
+      </MacroExpansion>
+      <AdditionalOptions>
+      </AdditionalOptions>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "2DD3238F1DA2DD8A000FE1B8"
+            BuildableName = "UIExplorer-tvOS.app"
+            BlueprintName = "UIExplorer-tvOS"
+            ReferencedContainer = "container:UIExplorer.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+      <EnvironmentVariables>
+         <EnvironmentVariable
+            key = "CI_USE_PACKAGER"
+            value = "1"
+            isEnabled = "YES">
+         </EnvironmentVariable>
+      </EnvironmentVariables>
+      <AdditionalOptions>
+      </AdditionalOptions>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "2DD3238F1DA2DD8A000FE1B8"
+            BuildableName = "UIExplorer-tvOS.app"
+            BlueprintName = "UIExplorer-tvOS"
+            ReferencedContainer = "container:UIExplorer.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

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

@@ -6,6 +6,20 @@
       parallelizeBuildables = "YES"
       buildImplicitDependencies = "YES">
       <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "3D13F83D1D6F6AE000E69E0E"
+               BuildableName = "UIExplorerBundle.bundle"
+               BlueprintName = "UIExplorerBundle"
+               ReferencedContainer = "container:UIExplorer.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
          <BuildActionEntry
             buildForTesting = "YES"
             buildForRunning = "YES"

Examples/UIExplorer/UIExplorer/AppDelegate.m

@@ -19,6 +19,9 @@
 #import "RCTJavaScriptLoader.h"
 #import "RCTLinkingManager.h"
 #import "RCTRootView.h"
+#if !TARGET_OS_TV
+#import "RCTPushNotificationManager.h"
+#endif
 
 @interface AppDelegate() <RCTBridgeDelegate>
 
@@ -76,4 +79,40 @@
                             onComplete:loadCallback];
 }
 
+# pragma mark - Push Notifications
+
+#if !TARGET_OS_TV
+
+// Required to register for notifications
+- (void)application:(__unused UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
+{
+  [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
+}
+
+// Required for the remoteNotificationsRegistered event.
+- (void)application:(__unused UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
+{
+  [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
+}
+
+// Required for the remoteNotificationRegistrationError event.
+- (void)application:(__unused UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
+{
+  [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];
+}
+
+// Required for the remoteNotificationReceived event.
+- (void)application:(__unused UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification
+{
+  [RCTPushNotificationManager didReceiveRemoteNotification:notification];
+}
+
+// Required for the localNotificationReceived event.
+- (void)application:(__unused UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
+{
+  [RCTPushNotificationManager didReceiveLocalNotification:notification];
+}
+
+#endif
+
 @end

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

@@ -1,5 +1,15 @@
 {
   "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
     {
       "size" : "29x29",
       "idiom" : "iphone",
@@ -41,4 +51,4 @@
     "version" : 1,
     "author" : "xcode"
   }
-}
+}

Examples/UIExplorer/UIExplorer/Info.plist

@@ -56,5 +56,7 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>You need to add NSPhotoLibraryUsageDescription key in Info.plist to enable photo library usage, otherwise it is going to *fail silently*!</string>
 </dict>
 </plist>

Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m

@@ -64,7 +64,9 @@ RCT_EXPORT_MODULE();
     [_resizableRootView setSizeFlexibility:RCTRootViewSizeFlexibilityHeight];
 
     _currentSizeTextView = [UITextView new];
+#ifndef TARGET_OS_TV
     _currentSizeTextView.editable = NO;
+#endif
     _currentSizeTextView.text = @"Resizable view has not been resized yet";
     _currentSizeTextView.textColor = [UIColor blackColor];
     _currentSizeTextView.backgroundColor = [UIColor whiteColor];

Examples/UIExplorer/UIExplorer/UIExplorerBundle/Info.plist

@@ -0,0 +1,28 @@
+<?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>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>NSHumanReadableCopyright</key>
+	<string>Copyright © 2016 Facebook. All rights reserved.</string>
+	<key>NSPrincipalClass</key>
+	<string></string>
+</dict>
+</plist>

Examples/UIExplorer/UIExplorer/UIExplorerBundle/OtherImages.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

Examples/UIExplorer/UIExplorer/UIExplorerBundle/OtherImages.xcassets/ImageInAssetCatalog.imageset/Contents.json

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

Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m

@@ -33,6 +33,9 @@
 - (void)setUp
 {
   _runner = RCTInitRunnerForApp(@"Examples/UIExplorer/js/UIExplorerApp.ios", nil);
+  if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 10) {
+    _runner.testSuffix = @"-iOS10";
+  }
   _runner.recordMode = NO;
 }
 
@@ -42,12 +45,14 @@
   [_runner runTest:_cmd module:@#name]; \
 }
 
+#if !TARGET_OS_TV // None of these will run in tvOS due to StatusBar not existing
 RCT_TEST(ViewExample)
 RCT_TEST(LayoutExample)
 RCT_TEST(TextExample)
 RCT_TEST(SwitchExample)
-//RCT_TEST(SliderExample) // Disabled: #8985988
-//RCT_TEST(TabBarExample) // Disabled: #8985988
+RCT_TEST(SliderExample)
+RCT_TEST(TabBarExample)
+#endif
 
 - (void)testZZZNotInRecordMode
 {

Examples/UIExplorer/UIExplorerUnitTests/RCTAllocationTests.m

@@ -85,9 +85,14 @@ RCT_EXPORT_METHOD(test:(__unused NSString *)a
 
   NSURL *tempDir = [NSURL fileURLWithPath:NSTemporaryDirectory() isDirectory:YES];
   [[NSFileManager defaultManager] createDirectoryAtURL:tempDir withIntermediateDirectories:YES attributes:nil error:NULL];
+  NSString *guid = [[NSProcessInfo processInfo] globallyUniqueString];
+  NSString *fileName = [NSString stringWithFormat:@"rctallocationtests-bundle-%@.js", guid];
 
-  _bundleURL = [tempDir URLByAppendingPathComponent:@"rctallocationtests-bundle.js"];
-  [bundleContents writeToURL:_bundleURL atomically:YES encoding:NSUTF8StringEncoding error:NULL];
+  _bundleURL = [tempDir URLByAppendingPathComponent:fileName];
+  NSError *saveError;
+  if (![bundleContents writeToURL:_bundleURL atomically:YES encoding:NSUTF8StringEncoding error:&saveError]) {
+    XCTFail(@"Failed to save test bundle to %@, error: %@", _bundleURL, saveError);
+  };
 }
 
 - (void)tearDown
@@ -230,6 +235,7 @@ RCT_EXPORT_METHOD(test:(__unused NSString *)a
   // Wait to complete the test until the new batchedbridge is also deallocated
   @autoreleasepool {
     batchedBridge = bridge.batchedBridge;
+    [bridge invalidate];
     bridge = nil;
   }
 

Examples/UIExplorer/UIExplorerUnitTests/RCTBridgeTests.m

@@ -33,6 +33,10 @@
   } \
 }
 
+static const NSUInteger kNameIndex = 0;
+static const NSUInteger kConstantsIndex = 1;
+static const NSUInteger kMethodsIndex = 2;
+
 @interface TestExecutor : NSObject <RCTJavaScriptExecutor>
 
 @property (nonatomic, readonly, copy) NSMutableDictionary<NSString *, id> *injectedStuff;
@@ -195,10 +199,10 @@ RCT_EXPORT_MODULE(TestModule)
 
   NSArray *remoteModuleConfig = RCTJSONParse(injectedStuff, NULL)[@"remoteModuleConfig"];
   [remoteModuleConfig enumerateObjectsUsingBlock:^(id moduleConfig, NSUInteger i, BOOL *stop) {
-    if ([moduleConfig isKindOfClass:[NSArray class]] && [moduleConfig[0] isEqualToString:@"TestModule"]) {
+    if ([moduleConfig isKindOfClass:[NSArray class]] && [moduleConfig[kNameIndex] isEqualToString:@"TestModule"]) {
       testModuleID = @(i);
-      testConstants = moduleConfig[1];
-      testMethodID = @([moduleConfig[2] indexOfObject:@"testMethod"]);
+      testConstants = moduleConfig[kConstantsIndex];
+      testMethodID = @([moduleConfig[kMethodsIndex] indexOfObject:@"testMethod"]);
       *stop = YES;
     }
   }];
@@ -221,9 +225,9 @@ RCT_EXPORT_MODULE(TestModule)
 
   NSArray *remoteModuleConfig = RCTJSONParse(injectedStuff, NULL)[@"remoteModuleConfig"];
   [remoteModuleConfig enumerateObjectsUsingBlock:^(id moduleConfig, NSUInteger i, __unused BOOL *stop) {
-    if ([moduleConfig isKindOfClass:[NSArray class]] && [moduleConfig[0] isEqualToString:@"TestModule"]) {
+    if ([moduleConfig isKindOfClass:[NSArray class]] && [moduleConfig[kNameIndex] isEqualToString:@"TestModule"]) {
       testModuleID = @(i);
-      testMethodID = @([moduleConfig[2] indexOfObject:@"testMethod"]);
+      testMethodID = @([moduleConfig[kMethodsIndex] indexOfObject:@"testMethod"]);
       *stop = YES;
     }
   }];
@@ -234,7 +238,7 @@ RCT_EXPORT_MODULE(TestModule)
   NSArray *args = @[@1234, @5678, @"stringy", @{@"a": @1}, @42];
   NSArray *buffer = @[@[testModuleID], @[testMethodID], @[args]];
 
-  [_bridge.batchedBridge handleBuffer:buffer];
+  [_bridge.batchedBridge handleBuffer:buffer batchEnded:YES];
 
   dispatch_sync(_methodQueue, ^{
     // clear the queue
@@ -253,9 +257,9 @@ RCT_EXPORT_MODULE(TestModule)
 
   NSArray *remoteModuleConfig = RCTJSONParse(injectedStuff, NULL)[@"remoteModuleConfig"];
   [remoteModuleConfig enumerateObjectsUsingBlock:^(id moduleConfig, NSUInteger i, __unused BOOL *stop) {
-    if ([moduleConfig isKindOfClass:[NSArray class]] && [moduleConfig[0] isEqualToString:@"UnregisteredTestModule"]) {
+    if ([moduleConfig isKindOfClass:[NSArray class]] && [moduleConfig[kNameIndex] isEqualToString:@"UnregisteredTestModule"]) {
       testModuleID = @(i);
-      testMethodID = @([moduleConfig[1] indexOfObject:@"testMethod"]);
+      testMethodID = @([moduleConfig[kMethodsIndex] indexOfObject:@"testMethod"]);
       *stop = YES;
     }
   }];
@@ -266,7 +270,7 @@ RCT_EXPORT_MODULE(TestModule)
   NSArray *args = @[];
   NSArray *buffer = @[@[testModuleID], @[testMethodID], @[args]];
 
-  [_bridge.batchedBridge handleBuffer:buffer];
+  [_bridge.batchedBridge handleBuffer:buffer batchEnded:YES];
 
   dispatch_sync(_unregisteredTestModule.methodQueue, ^{
     XCTAssertTrue(self->_unregisteredTestModule.testMethodCalled);

Examples/UIExplorer/UIExplorerUnitTests/RCTFontTests.m

@@ -14,13 +14,15 @@
 
 #import <XCTest/XCTest.h>
 
-#import "RCTConvert.h"
+#import "RCTFont.h"
 
-@interface RCTConvert_UIFontTests : XCTestCase
+#import <CoreText/CoreText.h>
+
+@interface RCTFontTests : XCTestCase
 
 @end
 
-@implementation RCTConvert_UIFontTests
+@implementation RCTFontTests
 
 #define RCTAssertEqualFonts(font1, font2) { \
   XCTAssertEqualObjects(font1, font2); \
@@ -61,11 +63,13 @@
 
 - (void)testFamily
 {
+#if !TARGET_OS_TV
   {
     UIFont *expected = [UIFont fontWithName:@"Cochin" size:14];
     UIFont *result = [RCTConvert UIFont:@{@"fontFamily": @"Cochin"}];
     RCTAssertEqualFonts(expected, result);
   }
+#endif
   {
     UIFont *expected = [UIFont fontWithName:@"HelveticaNeue" size:14];
     UIFont *result = [RCTConvert UIFont:@{@"fontFamily": @"Helvetica Neue"}];
@@ -133,6 +137,7 @@
     UIFont *result = [RCTConvert UIFont:@{@"fontFamily": @"HelveticaNeue-Bold", @"fontWeight": @"normal"}];
     RCTAssertEqualFonts(expected, result);
   }
+#if !TARGET_OS_TV
   {
     UIFont *expected = [UIFont fontWithName:@"Cochin-Bold" size:14];
     UIFont *result = [RCTConvert UIFont:@{@"fontFamily": @"Cochin", @"fontWeight": @"700"}];
@@ -143,6 +148,7 @@
     UIFont *result = [RCTConvert UIFont:@{@"fontFamily": @"Cochin", @"fontWeight": @"100"}];
     RCTAssertEqualFonts(expected, result);
   }
+#endif
 }
 
 - (void)testFamilyAndStyle
@@ -178,6 +184,27 @@
   }
 }
 
+- (void)testVariant
+{
+  {
+    UIFont *expected = [UIFont monospacedDigitSystemFontOfSize:14 weight:UIFontWeightRegular];
+    UIFont *result = [RCTConvert UIFont:@{@"fontVariant": @[@"tabular-nums"]}];
+    RCTAssertEqualFonts(expected, result);
+  }
+  {
+    UIFont *monospaceFont = [UIFont monospacedDigitSystemFontOfSize:14 weight:UIFontWeightRegular];
+    UIFontDescriptor *fontDescriptor = [monospaceFont.fontDescriptor fontDescriptorByAddingAttributes:@{
+      UIFontDescriptorFeatureSettingsAttribute: @[@{
+        UIFontFeatureTypeIdentifierKey: @(kLowerCaseType),
+        UIFontFeatureSelectorIdentifierKey: @(kLowerCaseSmallCapsSelector),
+      }]
+    }];
+    UIFont *expected = [UIFont fontWithDescriptor:fontDescriptor size:14];
+    UIFont *result = [RCTConvert UIFont:@{@"fontVariant": @[@"tabular-nums", @"small-caps"]}];
+    RCTAssertEqualFonts(expected, result);
+  }
+}
+
 - (void)testInvalidFont
 {
   {

Examples/UIExplorer/UIExplorerUnitTests/RCTImageLoaderHelpers.m

@@ -47,7 +47,13 @@
   return _canLoadImageURLHandler(requestURL);
 }
 
-- (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL size:(CGSize)size scale:(CGFloat)scale resizeMode:(RCTResizeMode)resizeMode progressHandler:(RCTImageLoaderProgressBlock)progressHandler completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
+- (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
+                                              size:(CGSize)size
+                                             scale:(CGFloat)scale
+                                        resizeMode:(RCTResizeMode)resizeMode
+                                   progressHandler:(RCTImageLoaderProgressBlock)progressHandler
+                                partialLoadHandler:(__unused RCTImageLoaderPartialLoadBlock)partialLoadHandler
+                                 completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
 {
   return _loadImageURLHandler(imageURL, size, scale, resizeMode, progressHandler, completionHandler);
 }

Examples/UIExplorer/UIExplorerUnitTests/RCTImageLoaderTests.m

@@ -61,7 +61,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
   [bridge.imageLoader loadImageWithURLRequest:urlRequest size:CGSizeMake(100, 100) scale:1.0 clipped:YES resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
     XCTAssertEqual(progress, 1);
     XCTAssertEqual(total, 1);
-  } completionBlock:^(NSError *loadError, id loadedImage) {
+  } partialLoadBlock:nil completionBlock:^(NSError *loadError, id loadedImage) {
     XCTAssertEqualObjects(loadedImage, image);
     XCTAssertNil(loadError);
   }];
@@ -92,7 +92,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
   [bridge.imageLoader loadImageWithURLRequest:urlRequest size:CGSizeMake(100, 100) scale:1.0 clipped:YES resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
     XCTAssertEqual(progress, 1);
     XCTAssertEqual(total, 1);
-  } completionBlock:^(NSError *loadError, id loadedImage) {
+  } partialLoadBlock:nil completionBlock:^(NSError *loadError, id loadedImage) {
     XCTAssertEqualObjects(loadedImage, image);
     XCTAssertNil(loadError);
   }];

Examples/UIExplorer/UIExplorerUnitTests/RCTMultipartStreamReaderTests.m

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ */
+
+#import <XCTest/XCTest.h>
+#import "RCTUtils.h"
+#import "RCTMultipartStreamReader.h"
+
+@interface RCTMultipartStreamReaderTests : XCTestCase
+
+@end
+
+@implementation RCTMultipartStreamReaderTests
+
+- (void)testSimpleCase {
+  NSString *response =
+  @"preable, should be ignored\r\n"
+  @"--sample_boundary\r\n"
+  @"Content-Type: application/json; charset=utf-8\r\n"
+  @"Content-Length: 2\r\n\r\n"
+  @"{}\r\n"
+  @"--sample_boundary--\r\n"
+  @"epilogue, should be ignored";
+
+  NSInputStream *inputStream = [NSInputStream inputStreamWithData:[response dataUsingEncoding:NSUTF8StringEncoding]];
+  RCTMultipartStreamReader *reader = [[RCTMultipartStreamReader alloc] initWithInputStream:inputStream boundary:@"sample_boundary"];
+  __block NSInteger count = 0;
+  BOOL success = [reader readAllParts:^(NSDictionary *headers, NSData *content, BOOL done) {
+    XCTAssertTrue(done);
+    XCTAssertEqualObjects(headers[@"Content-Type"], @"application/json; charset=utf-8");
+    XCTAssertEqualObjects([[NSString alloc] initWithData:content encoding:NSUTF8StringEncoding], @"{}");
+    count++;
+  }];
+  XCTAssertTrue(success);
+  XCTAssertEqual(count, 1);
+}
+
+- (void)testMultipleParts {
+  NSString *response =
+  @"preable, should be ignored\r\n"
+  @"--sample_boundary\r\n"
+  @"1\r\n"
+  @"--sample_boundary\r\n"
+  @"2\r\n"
+  @"--sample_boundary\r\n"
+  @"3\r\n"
+  @"--sample_boundary--\r\n"
+  @"epilogue, should be ignored";
+
+  NSInputStream *inputStream = [NSInputStream inputStreamWithData:[response dataUsingEncoding:NSUTF8StringEncoding]];
+  RCTMultipartStreamReader *reader = [[RCTMultipartStreamReader alloc] initWithInputStream:inputStream boundary:@"sample_boundary"];
+  __block NSInteger count = 0;
+  BOOL success = [reader readAllParts:^(__unused NSDictionary *headers, NSData *content, BOOL done) {
+    count++;
+    XCTAssertEqual(done, count == 3);
+    NSString *expectedBody = [NSString stringWithFormat:@"%ld", (long)count];
+    NSString *actualBody = [[NSString alloc] initWithData:content encoding:NSUTF8StringEncoding];
+    XCTAssertEqualObjects(actualBody, expectedBody);
+  }];
+  XCTAssertTrue(success);
+  XCTAssertEqual(count, 3);
+}
+
+- (void)testNoDelimiter {
+  NSString *response = @"Yolo";
+
+  NSInputStream *inputStream = [NSInputStream inputStreamWithData:[response dataUsingEncoding:NSUTF8StringEncoding]];
+  RCTMultipartStreamReader *reader = [[RCTMultipartStreamReader alloc] initWithInputStream:inputStream boundary:@"sample_boundary"];
+  __block NSInteger count = 0;
+  BOOL success = [reader readAllParts:^(__unused NSDictionary *headers, __unused NSData *content, __unused BOOL done) {
+    count++;
+  }];
+  XCTAssertFalse(success);
+  XCTAssertEqual(count, 0);
+}
+
+- (void)testNoCloseDelimiter {
+  NSString *response =
+  @"preable, should be ignored\r\n"
+  @"--sample_boundary\r\n"
+  @"Content-Type: application/json; charset=utf-8\r\n"
+  @"Content-Length: 2\r\n\r\n"
+  @"{}\r\n"
+  @"--sample_boundary\r\n"
+  @"incomplete message...";
+
+  NSInputStream *inputStream = [NSInputStream inputStreamWithData:[response dataUsingEncoding:NSUTF8StringEncoding]];
+  RCTMultipartStreamReader *reader = [[RCTMultipartStreamReader alloc] initWithInputStream:inputStream boundary:@"sample_boundary"];
+  __block NSInteger count = 0;
+  BOOL success = [reader readAllParts:^(__unused NSDictionary *headers, __unused NSData *content, __unused BOOL done) {
+    count++;
+  }];
+  XCTAssertFalse(success);
+  XCTAssertEqual(count, 1);
+}
+
+@end

Examples/UIExplorer/UIExplorerUnitTests/RCTShadowViewTests.m

@@ -56,8 +56,8 @@
 
   RCTShadowView *centerView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
     CSSNodeStyleSetFlex(node, 2);
-    CSSNodeStyleSetMarginLeft(node, 10);
-    CSSNodeStyleSetMarginRight(node, 10);
+    CSSNodeStyleSetMargin(node, CSSEdgeLeft, 10);
+    CSSNodeStyleSetMargin(node, CSSEdgeRight, 10);
   }];
 
   RCTShadowView *rightView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
@@ -67,8 +67,8 @@
   RCTShadowView *mainView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
     CSSNodeStyleSetFlexDirection(node, CSSFlexDirectionRow);
     CSSNodeStyleSetFlex(node, 2);
-    CSSNodeStyleSetMarginTop(node, 10);
-    CSSNodeStyleSetMarginBottom(node, 10);
+    CSSNodeStyleSetMargin(node, CSSEdgeTop, 10);
+    CSSNodeStyleSetMargin(node, CSSEdgeBottom, 10);
   }];
 
   [mainView insertReactSubview:leftView atIndex:0];
@@ -83,10 +83,10 @@
     CSSNodeStyleSetFlex(node, 1);
   }];
 
-  CSSNodeStyleSetPaddingLeft(self.parentView.cssNode, 10);
-  CSSNodeStyleSetPaddingTop(self.parentView.cssNode, 10);
-  CSSNodeStyleSetPaddingRight(self.parentView.cssNode, 10);
-  CSSNodeStyleSetPaddingBottom(self.parentView.cssNode, 10);
+  CSSNodeStyleSetPadding(self.parentView.cssNode, CSSEdgeLeft, 10);
+  CSSNodeStyleSetPadding(self.parentView.cssNode, CSSEdgeTop, 10);
+  CSSNodeStyleSetPadding(self.parentView.cssNode, CSSEdgeRight, 10);
+  CSSNodeStyleSetPadding(self.parentView.cssNode, CSSEdgeBottom, 10);
 
   [self.parentView insertReactSubview:headerView atIndex:0];
   [self.parentView insertReactSubview:mainView atIndex:1];
@@ -111,20 +111,20 @@
   RCTShadowView *centerView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
     CSSNodeStyleSetFlex(node, 1);
   }];
-  
+
   RCTShadowView *mainView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
     CSSNodeStyleSetFlex(node, 1);
   }];
-  
+
   [mainView insertReactSubview:centerView atIndex:0];
 
   RCTShadowView *footerView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
     CSSNodeStyleSetFlex(node, 1);
   }];
-  
+
   [self.parentView insertReactSubview:mainView atIndex:0];
   [self.parentView insertReactSubview:footerView atIndex:1];
-  
+
   XCTAssertTrue([centerView viewIsDescendantOf:mainView]);
   XCTAssertFalse([footerView viewIsDescendantOf:mainView]);
 }
@@ -132,8 +132,8 @@
 - (void)testAssignsSuggestedWidthDimension
 {
   [self _withShadowViewWithStyle:^(CSSNodeRef node) {
-                                   CSSNodeStyleSetPositionLeft(node, 0);
-                                   CSSNodeStyleSetPositionTop(node, 0);
+                                   CSSNodeStyleSetPosition(node, CSSEdgeLeft, 0);
+                                   CSSNodeStyleSetPosition(node, CSSEdgeTop, 0);
                                    CSSNodeStyleSetHeight(node, 10);
                                  }
             assertRelativeLayout:CGRectMake(0, 0, 3, 10)
@@ -143,8 +143,8 @@
 - (void)testAssignsSuggestedHeightDimension
 {
   [self _withShadowViewWithStyle:^(CSSNodeRef node) {
-                                   CSSNodeStyleSetPositionLeft(node, 0);
-                                   CSSNodeStyleSetPositionTop(node, 0);
+                                   CSSNodeStyleSetPosition(node, CSSEdgeLeft, 0);
+                                   CSSNodeStyleSetPosition(node, CSSEdgeTop, 0);
                                    CSSNodeStyleSetWidth(node, 10);
                                  }
             assertRelativeLayout:CGRectMake(0, 0, 10, 4)
@@ -154,8 +154,8 @@
 - (void)testDoesNotOverrideDimensionStyleWithSuggestedDimensions
 {
   [self _withShadowViewWithStyle:^(CSSNodeRef node) {
-                                   CSSNodeStyleSetPositionLeft(node, 0);
-                                   CSSNodeStyleSetPositionTop(node, 0);
+                                   CSSNodeStyleSetPosition(node, CSSEdgeLeft, 0);
+                                   CSSNodeStyleSetPosition(node, CSSEdgeTop, 0);
                                    CSSNodeStyleSetWidth(node, 10);
                                    CSSNodeStyleSetHeight(node, 10);
                                  }

Examples/UIExplorer/UIExplorerUnitTests/TestBundle.js

@@ -7,3 +7,8 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
+var __fbBatchedBridge = {
+  flushedQueue: function() {
+    return null;
+  }
+};

Examples/UIExplorer/android/app/BUCK

@@ -14,6 +14,7 @@ android_library(
   srcs = glob(['src/main/java/**/*.java']),
   deps = [
     ':res',
+    react_native_dep('third-party/android/support/v4:lib-support-v4'),
     react_native_dep('third-party/java/jsr-305:jsr-305'),
     react_native_target('java/com/facebook/react/modules/core:core'),
     react_native_target('java/com/facebook/react/shell:shell'),

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

@@ -23,7 +23,9 @@
       android:theme="@style/Theme.ReactNative.AppCompat.Light" >
     <activity
         android:name=".UIExplorerActivity"
-        android:label="@string/app_name" >
+        android:label="@string/app_name"
+        android:screenOrientation="fullSensor"
+        android:configChanges="orientation|screenSize" >
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />

Examples/UIExplorer/android/app/src/main/java/com/facebook/react/uiapp/UIExplorerActivity.java

@@ -14,32 +14,49 @@
 
 package com.facebook.react.uiapp;
 
+import android.app.Activity;
 import android.os.Bundle;
 
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+
+import javax.annotation.Nullable;
 
 public class UIExplorerActivity extends ReactActivity {
-  private final String PARAM_ROUTE = "route";
-  private Bundle mInitialProps = null;
+  public static class UIExplorerActivityDelegate extends ReactActivityDelegate {
+    private static final String PARAM_ROUTE = "route";
+    private Bundle mInitialProps = null;
+    private final @Nullable Activity mActivity;
 
-  @Override
-  protected void onCreate(Bundle savedInstanceState) {
-    // Get remote param before calling super which uses it
-    Bundle bundle = getIntent().getExtras();
-    if (bundle != null && bundle.containsKey(PARAM_ROUTE)) {
-      String routeUri = new StringBuilder("rnuiexplorer://example/")
-        .append(bundle.getString(PARAM_ROUTE))
-        .append("Example")
-        .toString();
-      mInitialProps = new Bundle();
-      mInitialProps.putString("exampleFromAppetizeParams", routeUri);
+    public UIExplorerActivityDelegate(Activity activity, String mainComponentName) {
+      super(activity, mainComponentName);
+      this.mActivity = activity;
+    }
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+      // Get remote param before calling super which uses it
+      Bundle bundle = mActivity.getIntent().getExtras();
+      if (bundle != null && bundle.containsKey(PARAM_ROUTE)) {
+        String routeUri = new StringBuilder("rnuiexplorer://example/")
+          .append(bundle.getString(PARAM_ROUTE))
+          .append("Example")
+          .toString();
+        mInitialProps = new Bundle();
+        mInitialProps.putString("exampleFromAppetizeParams", routeUri);
+      }
+      super.onCreate(savedInstanceState);
+    }
+
+    @Override
+    protected Bundle getLaunchOptions() {
+      return mInitialProps;
     }
-    super.onCreate(savedInstanceState);
   }
 
   @Override
-  protected Bundle getLaunchOptions() {
-    return mInitialProps;
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new UIExplorerActivityDelegate(this, getMainComponentName());
   }
 
   @Override

Examples/UIExplorer/js/AlertExample.js

@@ -106,6 +106,21 @@ class SimpleAlertExampleBlock extends React.Component {
             <Text>Alert with too many buttons</Text>
           </View>
         </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Alert Title',
+            null,
+            [
+              {text: 'OK', onPress: () => console.log('OK Pressed!')},
+            ],
+            {
+              cancelable: false
+            }
+          )}>
+          <View style={styles.button}>
+            <Text>Alert that cannot be dismissed</Text>
+          </View>
+        </TouchableHighlight>
       </View>
     );
   }

Examples/UIExplorer/js/CameraRollExample.js

@@ -35,25 +35,26 @@ const {
   TouchableOpacity
 } = ReactNative;
 
+const invariant = require('invariant');
+
 const CameraRollView = require('./CameraRollView');
 
 const AssetScaledImageExampleView = require('./AssetScaledImageExample');
 
-const CAMERA_ROLL_VIEW = 'camera_roll_view';
-
 class CameraRollExample extends React.Component {
   state = {
     groupTypes: 'SavedPhotos',
     sliderValue: 1,
     bigImages: true,
   };
-
+  _cameraRollView: ?CameraRollView;
   render() {
     return (
       <View>
         <Switch
           onValueChange={this._onSwitchChange}
-          value={this.state.bigImages} />
+          value={this.state.bigImages}
+        />
         <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
         <Slider
           value={this.state.sliderValue}
@@ -61,7 +62,7 @@ class CameraRollExample extends React.Component {
         />
         <Text>{'Group Type: ' + this.state.groupTypes}</Text>
         <CameraRollView
-          ref={CAMERA_ROLL_VIEW}
+          ref={(ref) => { this._cameraRollView = ref; }}
           batchSize={20}
           groupTypes={this.state.groupTypes}
           renderImage={this._renderImage}
@@ -84,8 +85,8 @@ class CameraRollExample extends React.Component {
   _renderImage = (asset) => {
     const imageSize = this.state.bigImages ? 150 : 75;
     const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
-    const location = asset.node.location.longitude ?
-      JSON.stringify(asset.node.location) : 'Unknown location';
+    const {location} = asset.node;
+    const locationStr = location ? JSON.stringify(location) : 'Unknown location';
     return (
       <TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
         <View style={styles.row}>
@@ -95,7 +96,7 @@ class CameraRollExample extends React.Component {
           />
           <View style={styles.info}>
             <Text style={styles.url}>{asset.node.image.uri}</Text>
-            <Text>{location}</Text>
+            <Text>{locationStr}</Text>
             <Text>{asset.node.group_name}</Text>
             <Text>{new Date(asset.node.timestamp).toString()}</Text>
           </View>
@@ -114,7 +115,8 @@ class CameraRollExample extends React.Component {
   };
 
   _onSwitchChange = (value) => {
-    this.refs[CAMERA_ROLL_VIEW].rendererChanged();
+    invariant(this._cameraRollView, 'ref should be set');
+    this._cameraRollView.rendererChanged();
     this.setState({ bigImages: value });
   };
 }

Examples/UIExplorer/js/GeolocationExample.js

@@ -59,7 +59,7 @@ class GeolocationExample extends React.Component {
         var initialPosition = JSON.stringify(position);
         this.setState({initialPosition});
       },
-      (error) => alert(error.message),
+      (error) => alert(JSON.stringify(error)),
       {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
     );
     this.watchID = navigator.geolocation.watchPosition((position) => {

Examples/UIExplorer/js/ImageExample.js

@@ -61,7 +61,15 @@ var NetworkImageCallbackExample = React.createClass({
           source={this.props.source}
           style={[styles.base, {overflow: 'visible'}]}
           onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
-          onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
+          onLoad={(event) => {
+            // Currently this image source feature is only available on iOS.
+            if (event.nativeEvent.source) {
+              const url = event.nativeEvent.source.url;
+              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
+            } else {
+              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`);
+            }
+          }}
           onLoadEnd={() => {
             this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
             this.setState({startLoadPrefetched: true}, () => {
@@ -78,7 +86,15 @@ var NetworkImageCallbackExample = React.createClass({
             source={this.props.prefetchedSource}
             style={[styles.base, {overflow: 'visible'}]}
             onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
-            onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
+            onLoad={(event) => {
+              // Currently this image source feature is only available on iOS.
+              if (event.nativeEvent.source) {
+                const url = event.nativeEvent.source.url;
+                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
+              } else {
+                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`);
+              }
+            }}
             onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
           />
           : null}
@@ -596,12 +612,41 @@ exports.examples = [
     render: function() {
       return (
         <Image
-          source={require('image!hawk')}
-          style={styles.base}
+          source={require('image!legacy_image')}
         />
       );
     },
   },
+  {
+    title: 'Bundled images',
+    description:
+      'Images shipped in a separate native bundle',
+    render: function() {
+      return (
+        <View style={{flexDirection: 'row'}}>
+          <Image
+            source={{
+              url: 'ImageInBundle',
+              bundle: 'UIExplorerBundle',
+              width: 100,
+              height: 100,
+            }}
+            style={{borderColor: 'yellow', borderWidth: 4}}
+          />
+          <Image
+            source={{
+              url: 'ImageInAssetCatalog',
+              bundle: 'UIExplorerBundle',
+              width: 100,
+              height: 100,
+            }}
+            style={{marginLeft: 10, borderColor: 'blue', borderWidth: 4}}
+          />
+        </View>
+      );
+    },
+    platform: 'ios',
+  },
 ];
 
 var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};

Examples/UIExplorer/js/MapViewExample.js

@@ -400,7 +400,7 @@ exports.examples = [
     render() {
       return <AnnotationExample style={styles.map} annotation={{
         title: 'Thumbs Up!',
-        image: require('image!uie_thumb_big'),
+        image: require('./uie_thumb_big.png'),
       }}/>;
     }
   },
@@ -417,7 +417,7 @@ exports.examples = [
           </Text>
           <Image
             style={{width: 90, height: 65, resizeMode: 'cover'}}
-            source={require('image!uie_thumb_big')}
+            source={require('./uie_thumb_big.png')}
           />
         </View>,
       }}/>;

Examples/UIExplorer/js/ModalExample.js

@@ -26,6 +26,7 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
   Modal,
+  Picker,
   StyleSheet,
   Switch,
   Text,
@@ -33,6 +34,8 @@ var {
   View,
 } = ReactNative;
 
+const Item = Picker.Item;
+
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Modal>';
@@ -68,11 +71,22 @@ class Button extends React.Component {
   }
 }
 
+const supportedOrientationsPickerValues = [
+  ['portrait'],
+  ['landscape'],
+  ['landscape-left'],
+  ['portrait', 'landscape-right'],
+  ['portrait', 'landscape'],
+  [],
+];
+
 class ModalExample extends React.Component {
   state = {
     animationType: 'none',
     modalVisible: false,
     transparent: false,
+    selectedSupportedOrientation: 0,
+    currentOrientation: 'unknown',
   };
 
   _setModalVisible = (visible) => {
@@ -104,11 +118,14 @@ class ModalExample extends React.Component {
           animationType={this.state.animationType}
           transparent={this.state.transparent}
           visible={this.state.modalVisible}
-          onRequestClose={() => {this._setModalVisible(false)}}
+          onRequestClose={() => this._setModalVisible(false)}
+          supportedOrientations={supportedOrientationsPickerValues[this.state.selectedSupportedOrientation]}
+          onOrientationChange={evt => this.setState({currentOrientation: evt.nativeEvent.orientation})}
           >
           <View style={[styles.container, modalBackgroundStyle]}>
             <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
               <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
+              <Text>It is currently displayed in {this.state.currentOrientation} mode.</Text>
               <Button
                 onPress={this._setModalVisible.bind(this, false)}
                 style={styles.modalButton}>
@@ -135,6 +152,22 @@ class ModalExample extends React.Component {
           <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
         </View>
 
+        <View>
+          <Text style={styles.rowTitle}>Supported orientations</Text>
+          <Picker
+            selectedValue={this.state.selectedSupportedOrientation}
+            onValueChange={(_, i) => this.setState({selectedSupportedOrientation: i})}
+            itemStyle={styles.pickerItem}
+            >
+            <Item label="Portrait" value={0} />
+            <Item label="Landscape" value={1} />
+            <Item label="Landscape left" value={2} />
+            <Item label="Portrait and landscape right" value={3} />
+            <Item label="Portrait and landscape" value={4} />
+            <Item label="Default supportedOrientations" value={5} />
+          </Picker>
+        </View>
+
         <Button onPress={this._setModalVisible.bind(this, true)}>
           Present
         </Button>
@@ -187,4 +220,7 @@ var styles = StyleSheet.create({
   modalButton: {
     marginTop: 10,
   },
+  pickerItem: {
+    fontSize: 16,
+  },
 });

Examples/UIExplorer/js/NativeAnimationsExample.js

@@ -41,9 +41,12 @@ class Tester extends React.Component {
   current = 0;
 
   onPress = () => {
+    const animConfig = (
+      this.current && this.props.reverseConfig ? this.props.reverseConfig : this.props.config
+    );
     this.current = this.current ? 0 : 1;
     const config = {
-      ...this.props.config,
+      ...animConfig,
       toValue: this.current,
     };
 
@@ -119,6 +122,92 @@ class ValueListenerExample extends React.Component {
   }
 }
 
+const UIExplorerSettingSwitchRow = require('UIExplorerSettingSwitchRow');
+class InternalSettings extends React.Component {
+  _stallInterval: ?number;
+  state: {busyTime: number | string, filteredStall: number};
+  render() {
+    return (
+      <View>
+        <UIExplorerSettingSwitchRow
+          initialValue={false}
+          label="Force JS Stalls"
+          onEnable={() => {
+            this._stallInterval = setInterval(() => {
+              const start = Date.now();
+              console.warn('burn CPU');
+              while ((Date.now() - start) < 100) {}
+            }, 300);
+          }}
+          onDisable={() => {
+            clearInterval(this._stallInterval || 0);
+          }}
+        />
+        <UIExplorerSettingSwitchRow
+          initialValue={false}
+          label="Track JS Stalls"
+          onEnable={() => {
+            require('JSEventLoopWatchdog').install({thresholdMS: 25});
+            this.setState({busyTime: '<none>'});
+            require('JSEventLoopWatchdog').addHandler({
+              onStall: ({busyTime}) => this.setState((state) => ({
+                busyTime,
+                filteredStall: (state.filteredStall || 0) * 0.97 + busyTime * 0.03,
+              })),
+            });
+          }}
+          onDisable={() => {
+            console.warn('Cannot disable yet....');
+          }}
+        />
+        {this.state && <Text>
+          JS Stall filtered: {Math.round(this.state.filteredStall)}, last: {this.state.busyTime}
+        </Text>}
+      </View>
+    );
+  }
+}
+
+class EventExample extends React.Component {
+  state = {
+    scrollX: new Animated.Value(0),
+  };
+
+  render() {
+    const opacity = this.state.scrollX.interpolate({
+      inputRange: [0, 200],
+      outputRange: [1, 0],
+    });
+    return (
+      <View>
+        <Animated.View
+          style={[
+            styles.block,
+            {
+              opacity,
+            }
+          ]}
+        />
+        <Animated.ScrollView
+          horizontal
+          style={{ height: 100, marginTop: 16 }}
+          onScroll={
+            Animated.event([{
+              nativeEvent: { contentOffset: { x: this.state.scrollX } }
+            }], {
+              useNativeDriver: true,
+            })
+          }
+        >
+          <View style={{ width: 600, backgroundColor: '#eee', justifyContent: 'center' }}>
+            <Text>Scroll me!</Text>
+          </View>
+        </Animated.ScrollView>
+      </View>
+    );
+  }
+}
+
 const styles = StyleSheet.create({
   row: {
     padding: 10,
@@ -143,8 +232,7 @@ exports.examples = [
       return (
           <Tester
             type="timing"
-            config={{ duration: 1000 }}
-          >
+            config={{ duration: 1000 }}>
             {anim => (
               <Animated.View
                 style={[
@@ -194,8 +282,7 @@ exports.examples = [
       return (
           <Tester
             type="timing"
-            config={{ duration: 1000 }}
-          >
+            config={{ duration: 1000 }}>
             {anim => (
               <Animated.View
                 style={[
@@ -239,8 +326,7 @@ exports.examples = [
       return (
         <Tester
           type="timing"
-          config={{ duration: 1000 }}
-        >
+          config={{ duration: 1000 }}>
           {anim => (
             <Animated.View
               style={[
@@ -269,8 +355,7 @@ exports.examples = [
       return (
         <Tester
           type="timing"
-          config={{ duration: 1000 }}
-        >
+          config={{ duration: 1000 }}>
           {anim => (
             <Animated.View
               style={[
@@ -292,8 +377,7 @@ exports.examples = [
       return (
         <Tester
           type="timing"
-          config={{ duration: 1000 }}
-        >
+          config={{ duration: 1000 }}>
           {anim => (
             <Animated.View
               style={[
@@ -322,8 +406,7 @@ exports.examples = [
       return (
         <Tester
           type="spring"
-          config={{ bounciness: 0 }}
-        >
+          config={{ bounciness: 0 }}>
           {anim => (
             <Animated.View
               style={[
@@ -335,7 +418,32 @@ exports.examples = [
                         inputRange: [0, 1],
                         outputRange: [0, 100],
                       })
-                    }
+                    },
+                  ],
+                }
+              ]}
+            />
+          )}
+        </Tester>
+      );
+    },
+  },{
+    title: 'translateX => Animated.decay',
+    render: function() {
+      return (
+        <Tester
+          type="decay"
+          config={{ velocity: 0.5 }}
+          reverseConfig={{ velocity: -0.5 }}>
+          {anim => (
+            <Animated.View
+              style={[
+                styles.block,
+                {
+                  transform: [
+                    {
+                      translateX: anim
+                    },
                   ],
                 }
               ]}
@@ -347,11 +455,27 @@ exports.examples = [
   },
   {
     title: 'Animated value listener',
-    platform: 'android',
     render: function() {
       return (
         <ValueListenerExample />
       );
     },
   },
+  {
+    title: 'Internal Settings',
+    render: function() {
+      return (
+        <InternalSettings />
+      );
+    },
+  },
+  {
+    title: 'Animated events',
+    platform: 'android',
+    render: function() {
+      return (
+        <EventExample />
+      );
+    },
+  },
 ];

Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NoGesture-example.js

@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * 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';
+
+const NavigationExampleRow = require('./NavigationExampleRow');
+const React = require('react');
+const ReactNative = require('react-native');
+
+/**
+ * Basic example that shows how to use <NavigationCardStack /> to build
+ * an app with controlled navigation system but without gestures.
+ */
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+} = ReactNative;
+
+const {
+  CardStack: NavigationCardStack,
+  StateUtils: NavigationStateUtils,
+} = NavigationExperimental;
+
+// Step 1:
+// Define a component for your application.
+class YourApplication extends React.Component {
+
+  // This sets up the initial navigation state.
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      // This defines the initial navigation state.
+      navigationState: {
+        index: 0, // starts with first route focused.
+        routes: [{key: 'Welcome'}], // starts with only one route.
+      },
+    };
+
+    this._exit = this._exit.bind(this);
+    this._onNavigationChange = this._onNavigationChange.bind(this);
+  }
+
+  // User your own navigator (see Step 2).
+  render(): ReactElement {
+    return (
+      <YourNavigator
+        navigationState={this.state.navigationState}
+        onNavigationChange={this._onNavigationChange}
+        onExit={this._exit}
+      />
+    );
+  }
+
+  // This handles the navigation state changes. You're free and responsible
+  // to define the API that changes that navigation state. In this exmaple,
+  // we'd simply use a `function(type: string)` to update the navigation state.
+  _onNavigationChange(type: string): void {
+    let {navigationState} = this.state;
+    switch (type) {
+      case 'push':
+        // push a new route.
+        const route = {key: 'route-' + Date.now()};
+        navigationState = NavigationStateUtils.push(navigationState, route);
+        break;
+
+      case 'pop':
+        navigationState = NavigationStateUtils.pop(navigationState);
+        break;
+    }
+
+    // NavigationStateUtils gives you back the same `navigationState` if nothing
+    // has changed. You could use that to avoid redundant re-rendering.
+    if (this.state.navigationState !== navigationState) {
+      this.setState({navigationState});
+    }
+  }
+
+  // Exits the example. `this.props.onExampleExit` is provided
+  // by the UI Explorer.
+  _exit(): void {
+    this.props.onExampleExit && this.props.onExampleExit();
+  }
+
+  // This public method is optional. If exists, the UI explorer will call it
+  // the "back button" is pressed. Normally this is the cases for Android only.
+  handleBackAction(): boolean {
+    return this._onNavigationChange('pop');
+  }
+}
+
+// Step 2:
+// Define your own controlled navigator.
+//
+//      +------------+
+//    +-+            |
+//  +-+ |            |
+//  | | |            |
+//  | | |   Active   |
+//  | | |   Scene    |
+//  | | |            |
+//  +-+ |            |
+//    +-+            |
+//      +------------+
+//
+class YourNavigator extends React.Component {
+
+  // This sets up the methods (e.g. Pop, Push) for navigation.
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this._onPushRoute = this.props.onNavigationChange.bind(null, 'push');
+    this._onPopRoute = this.props.onNavigationChange.bind(null, 'pop');
+
+    this._renderScene = this._renderScene.bind(this);
+  }
+
+  // Now use the `NavigationCardStack` to render the scenes.
+  render(): ReactElement {
+    return (
+      <NavigationCardStack
+        onNavigateBack={this._onPopRoute}
+        navigationState={this.props.navigationState}
+        renderScene={this._renderScene}
+        style={styles.navigator}
+        enableGestures={false}
+      />
+    );
+  }
+
+  // Render a scene for route.
+  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
+  // as type `NavigationSceneRendererProps`.
+  _renderScene(sceneProps: Object): ReactElement {
+    return (
+      <YourScene
+        route={sceneProps.scene.route}
+        onPushRoute={this._onPushRoute}
+        onPopRoute={this._onPopRoute}
+        onExit={this.props.onExit}
+      />
+    );
+  }
+}
+
+// Step 3:
+// Define your own scene.
+class YourScene extends React.Component {
+  render() {
+    return (
+      <ScrollView>
+        <NavigationExampleRow
+          text={'route = ' + this.props.route.key}
+        />
+        <NavigationExampleRow
+          text="Push Route"
+          onPress={this.props.onPushRoute}
+        />
+        <NavigationExampleRow
+          text="Pop Route"
+          onPress={this.props.onPopRoute}
+        />
+        <NavigationExampleRow
+          text="Exit Card Stack Example"
+          onPress={this.props.onExit}
+        />
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  navigator: {
+    flex: 1,
+  },
+});
+
+module.exports = YourApplication;

Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js

@@ -35,6 +35,7 @@ const View = require('View');
 const EXAMPLES = {
   'CardStack + Header + Tabs Example': require('./NavigationCardStack-NavigationHeader-Tabs-example'),
   'CardStack Example': require('./NavigationCardStack-example'),
+  'CardStack Without Gestures Example': require('./NavigationCardStack-NoGesture-example'),
   'Transitioner + Animated View Example': require('./NavigationTransitioner-AnimatedView-example'),
   'Transitioner + Animated View Pager Example': require('./NavigationTransitioner-AnimatedView-pager-example'),
 };

Examples/UIExplorer/js/NavigatorIOSExample.js

@@ -90,6 +90,17 @@ class NavigatorIOSExamplePage extends React.Component {
               }
             });
           })}
+          {this._renderRow('Custom Right System Button', () => {
+            this.props.navigator.push({
+              title: NavigatorIOSExample.title,
+              component: EmptyPage,
+              rightButtonSystemIcon: 'bookmarks',
+              onRightButtonPress: () => this.props.navigator.pop(),
+              passProps: {
+                text: 'This page has a right system button in the nav bar',
+              }
+            });
+          })}
           {this._renderRow('Custom Left & Right Icons', () => {
             this.props.navigator.push({
               title: NavigatorIOSExample.title,
@@ -114,6 +125,30 @@ class NavigatorIOSExamplePage extends React.Component {
               }
             });
           })}
+          {this._renderRow('Custom Left & Right System Icons', () => {
+            this.props.navigator.push({
+              title: NavigatorIOSExample.title,
+              component: EmptyPage,
+              leftButtonSystemIcon: 'cancel',
+              onLeftButtonPress: () => this.props.navigator.pop(),
+              rightButtonSystemIcon: 'search',
+              onRightButtonPress: () => {
+                AlertIOS.alert(
+                  'Bar Button Action',
+                  'Recognized a tap on the bar button icon',
+                  [
+                    {
+                      text: 'OK',
+                      onPress: () => console.log('Tapped OK'),
+                    },
+                  ]
+                );
+              },
+              passProps: {
+                text: 'This page has an icon for the right button in the nav bar',
+              }
+            });
+          })}
           {this._renderRow('Pop', () => {
             this.props.navigator.pop();
           })}

Examples/UIExplorer/js/OrientationChangeExample.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule OrientationChangeExample
+ * @flow
+ */
+'use strict';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  DeviceEventEmitter,
+  Text,
+  View,
+} = ReactNative;
+
+import type EmitterSubscription from 'EmitterSubscription';
+
+class OrientationChangeExample extends React.Component {
+  _orientationSubscription: EmitterSubscription;
+
+  state = {
+    currentOrientation: '',
+    orientationDegrees: 0,
+    isLandscape: false,
+  };
+
+  componentDidMount() {
+    this._orientationSubscription = DeviceEventEmitter.addListener(
+      'namedOrientationDidChange', this._onOrientationChange,
+    );
+  }
+
+  componentWillUnmount() {
+    this._orientationSubscription.remove();
+  }
+
+  _onOrientationChange = (orientation: Object) => {
+    this.setState({
+      currentOrientation: orientation.name,
+      orientationDegrees: orientation.rotationDegrees,
+      isLandscape: orientation.isLandscape,
+    });
+  }
+
+  render() {
+    return (
+      <View>
+        <Text>{JSON.stringify(this.state)}</Text>
+      </View>
+    );
+  }
+}
+
+exports.title = 'OrientationChangeExample';
+exports.description = 'listening to orientation changes';
+exports.examples = [
+  {
+    title: 'OrientationChangeExample',
+    description: 'listening to device orientation changes',
+    render() { return <OrientationChangeExample />; },
+  },
+];

Examples/UIExplorer/js/PermissionsExampleAndroid.android.js

@@ -26,23 +26,22 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const {
+  PermissionsAndroid,
   StyleSheet,
   Text,
   TextInput,
   TouchableWithoutFeedback,
   View,
 } = ReactNative;
-const DialogManager = require('NativeModules').DialogManagerAndroid;
-const Permissions = require('NativeModules').AndroidPermissions;
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
-exports.title = '<Permissions>';
+exports.title = 'PermissionsAndroid';
 exports.description = 'Permissions example for API 23+.';
 
 class PermissionsExample extends React.Component {
   state = {
-    permission: 'android.permission.WRITE_EXTERNAL_STORAGE',
+    permission: PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
     hasPermission: 'Not Checked',
   };
 
@@ -63,7 +62,7 @@ class PermissionsExample extends React.Component {
           </View>
         </TouchableWithoutFeedback>
         <Text style={styles.text}>Permission Status: {this.state.hasPermission}</Text>
-        <TouchableWithoutFeedback onPress={this._shouldExplainPermission}>
+        <TouchableWithoutFeedback onPress={this._requestPermission}>
           <View>
             <Text style={[styles.touchable, styles.text]}>Request Permission</Text>
           </View>
@@ -78,51 +77,28 @@ class PermissionsExample extends React.Component {
     });
   };
 
-  _checkPermission = () => {
-    Permissions.checkPermission(
-      this.state.permission,
-      (permission: string, result: boolean) => {
-        this.setState({
-          hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' + permission,
-        });
-      },
-      this._showError);
+  _checkPermission = async () => {
+    let result = await PermissionsAndroid.checkPermission(this.state.permission);
+    this.setState({
+      hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' +
+        this.state.permission,
+    });
   };
 
-  _shouldExplainPermission = () => {
-    Permissions.shouldShowRequestPermissionRationale(
+  _requestPermission = async () => {
+    let result = await PermissionsAndroid.requestPermission(
       this.state.permission,
-      (permission: string, shouldShow: boolean) => {
-        if (shouldShow) {
-          DialogManager.showAlert(
-            {
-              title: 'Permission Explanation',
-              message:
-                'The app needs the following permission ' + this.state.permission +
-                ' because of reasons. Please approve.'
-            },
-            this._showError,
-            this._requestPermission);
-        } else {
-          this._requestPermission();
-        }
+      {
+        title: 'Permission Explanation',
+        message:
+          'The app needs the following permission ' + this.state.permission +
+          ' because of reasons. Please approve.'
       },
-      this._showError);
-  };
-
-  _requestPermission = () => {
-    Permissions.requestPermission(
-      this.state.permission,
-      (permission: string, result: boolean) => {
-        this.setState({
-          hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' + permission,
-        });
-      },
-      this._showError);
-  };
-
-  _showError = () => {
-    DialogManager.showAlert({message: 'Error'}, {}, {});
+    );
+    this.setState({
+      hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' +
+        this.state.permission,
+    });
   };
 }
 
@@ -150,4 +126,3 @@ var styles = StyleSheet.create({
     color: '#007AFF',
   },
 });
-

Examples/UIExplorer/js/PickerExample.js

@@ -33,7 +33,7 @@ const {
   Text,
   TouchableWithoutFeedback,
 } = ReactNative;
-// $FlowFixMe found when converting React.createClass to ES6
+
 const Item = Picker.Item;
 
 class PickerExample extends React.Component {

Examples/UIExplorer/js/PushNotificationIOSExample.js

@@ -50,16 +50,18 @@ class Button extends React.Component {
 
 class NotificationExample extends React.Component {
   componentWillMount() {
-    // Add listener for push notifications
-    PushNotificationIOS.addEventListener('notification', this._onNotification);
-    // Add listener for local notifications
+    PushNotificationIOS.addEventListener('register', this._onRegistered);
+    PushNotificationIOS.addEventListener('registrationError', this._onRegistrationError);
+    PushNotificationIOS.addEventListener('notification', this._onRemoteNotification);
     PushNotificationIOS.addEventListener('localNotification', this._onLocalNotification);
+
+    PushNotificationIOS.requestPermissions();
   }
 
   componentWillUnmount() {
-    // Remove listener for push notifications
-    PushNotificationIOS.removeEventListener('notification', this._onNotification);
-    // Remove listener for local notifications
+    PushNotificationIOS.removeEventListener('register', this._onRegistered);
+    PushNotificationIOS.removeEventListener('registrationError', this._onRegistrationError);
+    PushNotificationIOS.removeEventListener('notification', this._onRemoteNotification);
     PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification);
   }
 
@@ -101,7 +103,29 @@ class NotificationExample extends React.Component {
     });
   }
 
-  _onNotification(notification) {
+  _onRegistered(deviceToken) {
+    AlertIOS.alert(
+      'Registered For Remote Push',
+      `Device Token: ${deviceToken}`,
+      [{
+        text: 'Dismiss',
+        onPress: null,
+      }]
+    );
+  }
+
+  _onRegistrationError(error) {
+    AlertIOS.alert(
+      'Failed To Register For Remote Push',
+      `Error (${error.code}): ${error.message}`,
+      [{
+        text: 'Dismiss',
+        onPress: null,
+      }]
+    );
+  }
+
+  _onRemoteNotification(notification) {
     AlertIOS.alert(
       'Push Notification Received',
       'Alert message: ' + notification.getMessage(),
@@ -170,8 +194,6 @@ exports.examples = [
 {
   title: 'Badge Number',
   render(): ReactElement<any> {
-    PushNotificationIOS.requestPermissions();
-
     return (
       <View>
         <Button

Examples/UIExplorer/js/RTLExample.js

@@ -0,0 +1,408 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * 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.
+ *
+ * Here's the Right-to-Left(RTL) example page with:
+ * - a button to force flip UI layout to RTL
+ * - base layout example and text example
+ * - two custom examples for RTL design
+ *
+ * @flow
+ */
+'use strict';
+
+const React = require('react');
+const ReactNative = require('react-native');
+const {
+  Alert,
+  Animated,
+  I18nManager,
+  Image,
+  PanResponder,
+  PixelRatio,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+  Switch,
+  View,
+} = ReactNative;
+
+const UIExplorerPage = require('./UIExplorerPage');
+const UIExplorerBlock = require('./UIExplorerBlock');
+
+const AnimatedImage = Animated.createAnimatedComponent(Image);
+
+type State = {
+  toggleStatus: any,
+  pan: Object,
+  linear: Object,
+  isRTL: boolean,
+  windowWidth: number,
+};
+
+const SCALE = PixelRatio.get();
+const IMAGE_DIMENSION = 100 * SCALE;
+const IMAGE_SIZE = [IMAGE_DIMENSION, IMAGE_DIMENSION];
+
+const IS_RTL = I18nManager.isRTL;
+
+function ListItem(props) {
+ return (
+    <View style={styles.row}>
+     <View style={styles.column1}>
+       <Image
+         source={props.imageSource}
+         style={styles.icon}
+       />
+     </View>
+     <View style={styles.column2}>
+       <View style={styles.textBox}>
+         <Text>
+           Text
+           Text
+           Text
+         </Text>
+       </View>
+     </View>
+     <View style={styles.column3}>
+       <View style={styles.smallButton}>
+         <Text style={styles.fontSizeSmall}>
+           Button
+         </Text>
+       </View>
+     </View>
+   </View>
+ );
+}
+
+function TextAlignmentExample(props) {
+  return (
+    <UIExplorerBlock
+     title={props.title}
+     description={props.description}>
+     <View>
+       <Text style={props.style}>
+         Left-to-Right language without text alignment.
+       </Text>
+       <Text style={props.style}>
+        {'\u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631 \u0627\u0644\u0644\u063A\u0629 \u062F\u0648\u0646 \u0645\u062D\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635'}
+       </Text>
+       <Text style={props.style}>
+        {'\u05DE\u05D9\u05DE\u05D9\u05DF \u05DC\u05E9\u05DE\u05D0\u05DC \u05D4\u05E9\u05E4\u05D4 \u05D1\u05DC\u05D9 \u05D9\u05D9\u05E9\u05D5\u05E8 \u05D8\u05E7\u05E1\u05D8'}
+       </Text>
+     </View>
+   </UIExplorerBlock>
+ );
+}
+
+function AnimationBlock(props) {
+  return (
+    <View style={styles.block}>
+      <TouchableWithoutFeedback onPress={props.onPress}>
+        <AnimatedImage
+          style={[styles.img, props.imgStyle]}
+          source={require('./Thumbnails/poke.png')}
+        />
+      </TouchableWithoutFeedback>
+    </View>
+  );
+}
+
+class RTLExample extends React.Component {
+  static title = 'RTLExample';
+  static description = 'Examples to show how to apply components to RTL layout.';
+
+  state: State;
+  props: any;
+  _panResponder: Object;
+
+  constructor(props: Object) {
+    super(props);
+    const pan = new Animated.ValueXY();
+
+    this._panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderGrant: this._onPanResponderGrant,
+      onPanResponderMove: Animated.event([
+        null, {dx: pan.x, dy: pan.y},
+      ]),
+      onPanResponderRelease: this._onPanResponderEnd,
+      onPanResponderTerminate: this._onPanResponderEnd,
+    });
+
+    this.state = {
+      toggleStatus: {},
+      pan,
+      linear: new Animated.Value(0),
+      isRTL: IS_RTL,
+      windowWidth: 0,
+    };
+  }
+
+  render() {
+    return (
+      <ScrollView
+        style={styles.container}
+        onLayout={this._onLayout}>
+        <UIExplorerPage title={'Right-to-Left (RTL) UI Layout'}>
+          <UIExplorerBlock title={'Current Layout Direction'}>
+            <View style={styles.directionBox}>
+              <Text style={styles.directionText}>
+                {this.state.isRTL ? 'Right-to-Left' : 'Left-to-Right'}
+              </Text>
+            </View>
+          </UIExplorerBlock>
+          <UIExplorerBlock title={'Quickly Test RTL Layout'}>
+            <View style={styles.flexDirectionRow}>
+              <Text style={styles.switchRowTextView}>
+                forceRTL
+              </Text>
+              <View style={styles.switchRowSwitchView}>
+                <Switch
+                  onValueChange={this._onDirectionChange}
+                  style={styles.rightAlignStyle}
+                  value={this.state.isRTL} />
+              </View>
+            </View>
+          </UIExplorerBlock>
+          <UIExplorerBlock title={'A Simple List Item Layout'}>
+            <View style={styles.list}>
+              <ListItem imageSource={require('./Thumbnails/like.png')}/>
+              <ListItem imageSource={require('./Thumbnails/poke.png')}/>
+            </View>
+          </UIExplorerBlock>
+          <TextAlignmentExample
+            title={'Default Text Alignment'}
+            description={
+              'In iOS, it depends on active language. ' +
+              'In Android, it depends on the text content.'
+            }
+            style={styles.fontSizeSmall}
+          />
+          <TextAlignmentExample
+            title={"Using textAlign: 'left'"}
+            description={
+              'In iOS, you must change active language to flip text alignment correctly.' +
+              'In Android, using forceRTL() flips alignment correctly.'
+            }
+            style={[styles.fontSizeSmall, styles.textAlignLeft]}
+          />
+          <TextAlignmentExample
+            title={"Using textAlign: 'right'"}
+            description={'In iOS/Android, text alignment flips regardless of languages or text content.'}
+            style={[styles.fontSizeSmall, styles.textAlignRight]}
+          />
+          <UIExplorerBlock title={'Working With Icons'}>
+            <View style={styles.flexDirectionRow}>
+              <View>
+                <Image
+                  source={require('./Thumbnails/like.png')}
+                  style={styles.image}
+                />
+                <Text style={styles.fontSizeExtraSmall}>
+                  Without directional meaning
+                </Text>
+              </View>
+              <View style={styles.rightAlignStyle}>
+                <Image
+                  source={require('./Thumbnails/poke.png')}
+                  style={[styles.image, styles.withRTLStyle]}
+                />
+                <Text style={styles.fontSizeExtraSmall}>
+                  With directional meaning
+                </Text>
+              </View>
+            </View>
+          </UIExplorerBlock>
+          <UIExplorerBlock
+            title={'Controlling Animation'}
+            description={'Animation direction according to layout'}>
+            <View Style={styles.view}>
+              <AnimationBlock
+                onPress={this._linearTap}
+                imgStyle={{transform: [{translateX: this.state.linear}, {scaleX: IS_RTL ? -1 : 1}]}}
+              />
+            </View>
+          </UIExplorerBlock>
+        </UIExplorerPage>
+      </ScrollView>
+    );
+  }
+
+  _onLayout = (e: Object) => {
+    this.setState({
+      windowWidth: e.nativeEvent.layout.width,
+    });
+  };
+
+  _onDirectionChange = () => {
+    I18nManager.forceRTL(!this.state.isRTL);
+    this.setState({isRTL: !this.state.isRTL});
+    Alert.alert('Reload this page',
+     'Please reload this page to change the UI direction! ' +
+     'All examples in this app will be affected. ' +
+     'Check them out to see what they look like in RTL layout.'
+    );
+  };
+
+  _linearTap = (refName: string, e: Object) => {
+    this.setState({
+      toggleStatus: {
+        ...this.state.toggleStatus,
+        [refName]: !this.state.toggleStatus[refName],
+      },
+    });
+    const offset = IMAGE_SIZE[0] / SCALE / 2 + 10;
+    const toMaxDistance = (IS_RTL ? -1 : 1) * (this.state.windowWidth / 2 - offset);
+    Animated.timing(this.state.linear, {
+      toValue: this.state.toggleStatus[refName] ? toMaxDistance : 0,
+      duration: 2000,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  _onPanResponderGrant = (e: Object, gestureState: Object) => {
+    this.state.pan.stopAnimation(value => {
+      this.state.pan.setOffset(value);
+    });
+  };
+
+  _onPanResponderEnd = (e: Object, gestureState: Object) => {
+    this.state.pan.flattenOffset();
+    Animated.sequence([
+      Animated.decay(this.state.pan, {
+        velocity: {x: gestureState.vx, y: gestureState.vy},
+        deceleration: 0.995,
+      }),
+      Animated.spring(this.state.pan, {toValue: {x: 0, y: 0}}),
+    ]).start();
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#e9eaed',
+    paddingTop: 15,
+  },
+  directionBox: {
+    flex: 1,
+    backgroundColor: '#f8f8f8',
+    borderWidth: 0.5,
+    borderColor: 'black',
+  },
+  directionText: {
+    padding: 10,
+    fontSize: 16,
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  switchRowTextView: {
+    flex: 1,
+    marginBottom: 5,
+    marginTop: 5,
+    textAlign: 'center',
+  },
+  switchRowSwitchView: {
+    flex: 3,
+  },
+  rightAlignStyle: {
+    right: 10,
+    position: 'absolute',
+  },
+  list: {
+    height: 120,
+    marginBottom: 5,
+    borderTopWidth: 0.5,
+    borderLeftWidth: 0.5,
+    borderRightWidth: 0.5,
+    borderColor: '#e5e5e5',
+  },
+  row: {
+    height: 60,
+    flexDirection: 'row',
+    borderBottomWidth: 0.5,
+    borderColor: '#e5e5e5',
+  },
+  column1: {
+    width: 60,
+  },
+  column2: {
+    flex: 2.5,
+    padding: 6,
+  },
+  column3: {
+    flex: 1.5,
+  },
+  icon: {
+    width: 48,
+    height: 48,
+    margin: 6,
+    borderWidth: 0.5,
+    borderColor: '#e5e5e5',
+  },
+  withRTLStyle: {
+    transform: [{scaleX: IS_RTL ? -1 : 1}],
+  },
+  image: {
+    left: 30,
+    width: 48,
+    height: 48,
+  },
+  img: {
+    width: IMAGE_SIZE[0] / SCALE,
+    height: IMAGE_SIZE[1] / SCALE,
+  },
+  view: {
+    flex: 1,
+  },
+  block: {
+    padding: 10,
+    alignItems: 'center',
+  },
+  smallButton: {
+    top: 18,
+    borderRadius: 5,
+    height: 24,
+    width: 64,
+    backgroundColor: '#e5e5e5',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fontSizeSmall:{
+    fontSize: 10,
+  },
+  fontSizeExtraSmall:{
+    fontSize: 8,
+  },
+  textAlignLeft: {
+    textAlign: 'left',
+  },
+  textAlignRight: {
+    textAlign: 'right',
+  },
+  textBox: {
+    width: 28,
+  },
+  flexDirectionRow: {
+    flexDirection: 'row',
+  },
+});
+
+module.exports = RTLExample;

Examples/UIExplorer/js/SliderIOSExample.js

@@ -1,127 +0,0 @@
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * 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');
-var ReactNative = require('react-native');
-var {
-  SliderIOS,
-  Text,
-  StyleSheet,
-  View,
-} = ReactNative;
-
-class SliderExample extends React.Component {
-  state = {
-    value: 0,
-  };
-
-  render() {
-    return (
-      <View>
-        <Text style={styles.text} >
-          {this.state.value}
-        </Text>
-        <SliderIOS
-          {...this.props}
-          onValueChange={(value) => this.setState({value: value})} />
-      </View>
-    );
-  }
-}
-
-var styles = StyleSheet.create({
-  slider: {
-    height: 10,
-    margin: 10,
-  },
-  text: {
-    fontSize: 14,
-    textAlign: 'center',
-    fontWeight: '500',
-    margin: 10,
-  },
-});
-
-exports.title = '<SliderIOS>';
-exports.displayName = 'SliderExample';
-exports.description = 'Slider input for numeric values';
-exports.examples = [
-  {
-    title: 'Default settings',
-    render(): ReactElement<any> {
-      return <SliderExample />;
-    }
-  },
-  {
-    title: 'minimumValue: -1, maximumValue: 2',
-    render(): ReactElement<any> {
-      return (
-        <SliderExample
-          minimumValue={-1}
-          maximumValue={2}
-        />
-      );
-    }
-  },
-  {
-    title: 'step: 0.25',
-    render(): ReactElement<any> {
-      return <SliderExample step={0.25} />;
-    }
-  },
-  {
-    title: 'Custom min/max track tint color',
-    render(): ReactElement<any> {
-      return (
-        <SliderExample
-          minimumTrackTintColor={'red'}
-          maximumTrackTintColor={'green'}
-        />
-      );
-    }
-  },
-  {
-    title: 'Custom thumb image',
-    render(): ReactElement<any> {
-      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
-    }
-  },
-  {
-    title: 'Custom track image',
-    render(): ReactElement<any> {
-      return <SliderExample trackImage={require('./slider.png')} />;
-    }
-  },
-  {
-    title: 'Custom min/max track image',
-    render(): ReactElement<any> {
-      return (
-        <SliderExample
-          minimumTrackImage={require('./slider-left.png')}
-          maximumTrackImage={require('./slider-right.png')}
-        />
-      );
-    }
-  },
-];

Examples/UIExplorer/js/SwipeableListViewExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -58,7 +65,8 @@ var SwipeableListViewSimpleExample = React.createClass({
         <SwipeableListView
           dataSource={this.state.dataSource}
           maxSwipeDistance={100}
-          renderQuickActions={(rowData: Object, sectionID: string, rowID: string) => {
+          renderQuickActions={
+            (rowData: Object, sectionID: string, rowID: string) => {
             return (<View style={styles.actionsContainer}>
               <TouchableHighlight onPress={() => {
                 Alert.alert('Tips', 'You could do something with this row: ' + rowData.text);

Examples/UIExplorer/js/TextExample.android.js

@@ -300,23 +300,23 @@ class TextExample extends React.Component {
           </Text>
         </UIExplorerBlock>
         <UIExplorerBlock title="Unicode">
-          <View style={{flex: 1}}>
+          <View>
             <View style={{flexDirection: 'row'}}>
               <Text style={{backgroundColor: 'red'}}>
                 星际争霸是世界上最好的游戏。
               </Text>
             </View>
-            <View style={{flex: 1}}>
+            <View>
               <Text style={{backgroundColor: 'red'}}>
                 星际争霸是世界上最好的游戏。
               </Text>
             </View>
-            <View style={{flex: 1, alignItems: 'center'}}>
+            <View style={{alignItems: 'center'}}>
               <Text style={{backgroundColor: 'red'}}>
                 星际争霸是世界上最好的游戏。
               </Text>
             </View>
-            <View style={{flex: 1}}>
+            <View>
               <Text style={{backgroundColor: 'red'}}>
                 星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
               </Text>

Examples/UIExplorer/js/TextExample.ios.js

@@ -29,6 +29,7 @@ var {
   StyleSheet,
   Text,
   View,
+  LayoutAnimation,
 } = ReactNative;
 
 class Entity extends React.Component {
@@ -81,6 +82,86 @@ class AttributeToggler extends React.Component {
   }
 }
 
+var AdjustingFontSize = React.createClass({
+  getInitialState: function() {
+    return {dynamicText:'', shouldRender: true,};
+  },
+  reset: function() {
+    LayoutAnimation.easeInEaseOut();
+    this.setState({
+      shouldRender: false,
+    });
+    setTimeout(()=>{
+      LayoutAnimation.easeInEaseOut();
+      this.setState({
+        dynamicText: '',
+        shouldRender: true,
+      });
+    }, 300);
+  },
+  addText: function() {
+    this.setState({
+      dynamicText: this.state.dynamicText + (Math.floor((Math.random() * 10) % 2) ? ' foo' : ' bar'),
+    });
+  },
+  removeText: function() {
+    this.setState({
+      dynamicText: this.state.dynamicText.slice(0, this.state.dynamicText.length - 4),
+    });
+  },
+  render: function() {
+
+    if (!this.state.shouldRender) {
+      return (<View/>);
+    }
+    return (
+      <View>
+        <Text lineBreakMode="tail" numberOfLines={1} style={{fontSize: 36, marginVertical:6}}>
+          Truncated text is baaaaad.
+        </Text>
+        <Text numberOfLines={1} adjustsFontSizeToFit={true} style={{fontSize: 40, marginVertical:6}}>
+          Shrinking to fit available space is much better!
+        </Text>
+
+        <Text adjustsFontSizeToFit={true} numberOfLines={1} style={{fontSize:30, marginVertical:6}}>
+        {'Add text to me to watch me shrink!' + ' ' + this.state.dynamicText}
+        </Text>
+
+        <Text adjustsFontSizeToFit={true} numberOfLines={4} style={{fontSize:20, marginVertical:6}}>
+        {'Multiline text component shrinking is supported, watch as this reeeeaaaally loooooong teeeeeeext grooooows and then shriiiinks as you add text to me! ioahsdia soady auydoa aoisyd aosdy ' + ' ' + this.state.dynamicText}
+        </Text>
+
+        <Text adjustsFontSizeToFit={true} numberOfLines={1} style={{marginVertical:6}}>
+          <Text style={{fontSize:14}}>
+            {'Differently sized nested elements will shrink together. '}
+          </Text>
+          <Text style={{fontSize:20}}>
+            {'LARGE TEXT! ' + this.state.dynamicText}
+          </Text>
+        </Text>
+
+        <View style={{flexDirection:'row', justifyContent:'space-around', marginTop: 5, marginVertical:6}}>
+          <Text
+            style={{backgroundColor: '#ffaaaa'}}
+            onPress={this.reset}>
+            Reset
+          </Text>
+          <Text
+            style={{backgroundColor: '#aaaaff'}}
+            onPress={this.removeText}>
+            Remove Text
+          </Text>
+          <Text
+            style={{backgroundColor: '#aaffaa'}}
+            onPress={this.addText}>
+            Add Text
+          </Text>
+        </View>
+      </View>
+    );
+  }
+});
+
 exports.title = '<Text>';
 exports.description = 'Base component for rendering styled text.';
 exports.displayName = 'TextExample';
@@ -465,6 +546,38 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'Font variants',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontVariant: ['small-caps']}}>
+          Small Caps{'\n'}
+        </Text>
+        <Text style={{fontFamily: 'Hoefler Text', fontVariant: ['oldstyle-nums']}}>
+          Old Style nums 0123456789{'\n'}
+        </Text>
+        <Text style={{fontFamily: 'Hoefler Text', fontVariant: ['lining-nums']}}>
+          Lining nums 0123456789{'\n'}
+        </Text>
+        <Text style={{fontVariant: ['tabular-nums']}}>
+          Tabular nums{'\n'}
+          1111{'\n'}
+          2222{'\n'}
+        </Text>
+        <Text style={{fontVariant: ['proportional-nums']}}>
+          Proportional nums{'\n'}
+          1111{'\n'}
+          2222{'\n'}
+        </Text>
+      </View>
+    );
+  },
+}, {
+  title: 'Dynamic Font Size Adjustment',
+  render: function(): ReactElement<any> {
+    return <AdjustingFontSize />;
+  },
 }];
 
 var styles = StyleSheet.create({

Examples/UIExplorer/js/TextInputExample.android.js

@@ -241,6 +241,110 @@ class BlurOnSubmitExample extends React.Component {
   }
 }
 
+class ToggleDefaultPaddingExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasPadding: false};
+  }
+  render() {
+    return (
+      <View>
+        <TextInput style={this.state.hasPadding ? { padding: 0 } : null}/>
+        <Text onPress={() => this.setState({hasPadding: !this.state.hasPadding})}>
+          Toggle padding
+        </Text>
+      </View>
+    );
+  }
+}
+
+type SelectionExampleState = {
+  selection: {
+    start: number;
+    end: number;
+  };
+  value: string;
+};
+
+class SelectionExample extends React.Component {
+  state: SelectionExampleState;
+
+  _textInput: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selection: {start: 0, end: 0},
+      value: props.value
+    };
+  }
+
+  onSelectionChange({nativeEvent: {selection}}) {
+    this.setState({selection});
+  }
+
+  getRandomPosition() {
+    var length = this.state.value.length;
+    return Math.round(Math.random() * length);
+  }
+
+  select(start, end) {
+    this._textInput.focus();
+    this.setState({selection: {start, end}});
+  }
+
+  selectRandom() {
+    var positions = [this.getRandomPosition(), this.getRandomPosition()].sort();
+    this.select(...positions);
+  }
+
+  placeAt(position) {
+    this.select(position, position);
+  }
+
+  placeAtRandom() {
+    this.placeAt(this.getRandomPosition());
+  }
+
+  render() {
+    var length = this.state.value.length;
+
+    return (
+      <View>
+        <TextInput
+          multiline={this.props.multiline}
+          onChangeText={(value) => this.setState({value})}
+          onSelectionChange={this.onSelectionChange.bind(this)}
+          ref={textInput => (this._textInput = textInput)}
+          selection={this.state.selection}
+          style={this.props.style}
+          value={this.state.value}
+        />
+        <View>
+          <Text>
+            selection = {JSON.stringify(this.state.selection)}
+          </Text>
+          <Text onPress={this.placeAt.bind(this, 0)}>
+            Place at Start (0, 0)
+          </Text>
+          <Text onPress={this.placeAt.bind(this, length)}>
+            Place at End ({length}, {length})
+          </Text>
+          <Text onPress={this.placeAtRandom.bind(this)}>
+            Place at Random
+          </Text>
+          <Text onPress={this.select.bind(this, 0, length)}>
+            Select All
+          </Text>
+          <Text onPress={this.selectRandom.bind(this)}>
+            Select Random
+          </Text>
+        </View>
+      </View>
+    );
+  }
+}
+
 var styles = StyleSheet.create({
   multiline: {
     height: 60,
@@ -482,19 +586,19 @@ exports.examples = [
             placeholder="multiline, aligned top-left"
             placeholderTextColor="red"
             multiline={true}
-            style={[styles.multiline, {textAlign: "left", textAlignVertical: "top"}]}
+            style={[styles.multiline, {textAlign: 'left', textAlignVertical: 'top'}]}
           />
           <TextInput
             autoCorrect={true}
             placeholder="multiline, aligned center"
             placeholderTextColor="green"
             multiline={true}
-            style={[styles.multiline, {textAlign: "center", textAlignVertical: "center"}]}
+            style={[styles.multiline, {textAlign: 'center', textAlignVertical: 'center'}]}
           />
           <TextInput
             autoCorrect={true}
             multiline={true}
-            style={[styles.multiline, {color: 'blue'}, {textAlign: "right", textAlignVertical: "bottom"}]}>
+            style={[styles.multiline, {color: 'blue'}, {textAlign: 'right', textAlignVertical: 'bottom'}]}>
             <Text style={styles.multiline}>multiline with children, aligned bottom-right</Text>
           </TextInput>
         </View>
@@ -602,4 +706,26 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Toggle Default Padding',
+    render: function(): ReactElement { return <ToggleDefaultPaddingExample />; },
+  },
+  {
+    title: 'Text selection & cursor placement',
+    render: function() {
+      return (
+        <View>
+          <SelectionExample
+            style={styles.default}
+            value="text selection can be changed"
+          />
+          <SelectionExample
+            multiline
+            style={styles.multiline}
+            value={"multiline text selection\ncan also be changed"}
+          />
+        </View>
+      );
+    }
+  },
 ];

Examples/UIExplorer/js/TextInputExample.ios.js

@@ -294,6 +294,93 @@ class BlurOnSubmitExample extends React.Component {
   }
 }
 
+type SelectionExampleState = {
+  selection: {
+    start: number;
+    end?: number;
+  };
+  value: string;
+};
+
+class SelectionExample extends React.Component {
+  state: SelectionExampleState;
+
+  _textInput: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selection: {start: 0, end: 0},
+      value: props.value
+    };
+  }
+
+  onSelectionChange({nativeEvent: {selection}}) {
+    this.setState({selection});
+  }
+
+  getRandomPosition() {
+    var length = this.state.value.length;
+    return Math.round(Math.random() * length);
+  }
+
+  select(start, end) {
+    this._textInput.focus();
+    this.setState({selection: {start, end}});
+  }
+
+  selectRandom() {
+    var positions = [this.getRandomPosition(), this.getRandomPosition()].sort();
+    this.select(...positions);
+  }
+
+  placeAt(position) {
+    this.select(position, position);
+  }
+
+  placeAtRandom() {
+    this.placeAt(this.getRandomPosition());
+  }
+
+  render() {
+    var length = this.state.value.length;
+
+    return (
+      <View>
+        <TextInput
+          multiline={this.props.multiline}
+          onChangeText={(value) => this.setState({value})}
+          onSelectionChange={this.onSelectionChange.bind(this)}
+          ref={textInput => (this._textInput = textInput)}
+          selection={this.state.selection}
+          style={this.props.style}
+          value={this.state.value}
+        />
+        <View>
+          <Text>
+            selection = {JSON.stringify(this.state.selection)}
+          </Text>
+          <Text onPress={this.placeAt.bind(this, 0)}>
+            Place at Start (0, 0)
+          </Text>
+          <Text onPress={this.placeAt.bind(this, length)}>
+            Place at End ({length}, {length})
+          </Text>
+          <Text onPress={this.placeAtRandom.bind(this)}>
+            Place at Random
+          </Text>
+          <Text onPress={this.select.bind(this, 0, length)}>
+            Select All
+          </Text>
+          <Text onPress={this.selectRandom.bind(this)}>
+            Select Random
+          </Text>
+        </View>
+      </View>
+    );
+  }
+}
+
 var styles = StyleSheet.create({
   page: {
     paddingBottom: 300,
@@ -728,4 +815,22 @@ exports.examples = [
       return <TokenizedTextExample />;
     }
   },
+  {
+    title: 'Text selection & cursor placement',
+    render: function() {
+      return (
+        <View>
+          <SelectionExample
+            style={styles.default}
+            value="text selection can be changed"
+          />
+          <SelectionExample
+            multiline
+            style={styles.multiline}
+            value={"multiline text selection\ncan also be changed"}
+          />
+        </View>
+      );
+    }
+  }
 ];

Examples/UIExplorer/js/TimePickerAndroidExample.js

@@ -66,7 +66,7 @@ class TimePickerAndroidExample extends React.Component {
       <UIExplorerPage title="TimePickerAndroid">
         <UIExplorerBlock title="Simple time picker">
           <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'simple')}>
+            onPress={this.showPicker.bind(this, 'simple', {})}>
             <Text style={styles.text}>{this.state.simpleText}</Text>
           </TouchableWithoutFeedback>
         </UIExplorerBlock>

Examples/UIExplorer/js/UIExplorerApp.android.js

@@ -33,6 +33,7 @@ const React = require('react');
 const StatusBar = require('StatusBar');
 const StyleSheet = require('StyleSheet');
 const ToolbarAndroid = require('ToolbarAndroid');
+const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
 const UIExplorerExampleList = require('./UIExplorerExampleList');
 const UIExplorerList = require('./UIExplorerList');
 const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
@@ -41,6 +42,8 @@ const UIManager = require('UIManager');
 const URIActionMap = require('./URIActionMap');
 const View = require('View');
 
+import type {UIExplorerNavigationState} from './UIExplorerNavigationReducer';
+
 UIManager.setLayoutAnimationEnabledExperimental(true);
 
 const DRAWER_WIDTH_LEFT = 56;
@@ -49,8 +52,8 @@ type Props = {
   exampleFromAppetizeParams: string,
 };
 
-type State = {
-  initialExampleUri: ?string,
+type State = UIExplorerNavigationState & {
+  externalExample: ?string,
 };
 
 class UIExplorerApp extends React.Component {
@@ -146,7 +149,6 @@ class UIExplorerApp extends React.Component {
     if (stack && stack.routes[index]) {
       const {key} = stack.routes[index];
       const ExampleModule = UIExplorerList.Modules[key];
-      const ExampleComponent = UIExplorerExampleList.makeRenderable(ExampleModule);
       return (
         <View style={styles.container}>
           <ToolbarAndroid
@@ -156,7 +158,8 @@ class UIExplorerApp extends React.Component {
             style={styles.toolbar}
             title={title}
           />
-          <ExampleComponent
+          <UIExplorerExampleContainer
+            module={ExampleModule}
             ref={(example) => { this._exampleRef = example; }}
           />
         </View>
@@ -184,8 +187,10 @@ class UIExplorerApp extends React.Component {
     this.drawer && this.drawer.closeDrawer();
     const newState = UIExplorerNavigationReducer(this.state, action);
     if (this.state !== newState) {
-      this.setState(newState);
-      AsyncStorage.setItem('UIExplorerAppState', JSON.stringify(this.state));
+      this.setState(
+        newState,
+        () => AsyncStorage.setItem('UIExplorerAppState', JSON.stringify(this.state))
+      );
       return true;
     }
     return false;

Examples/UIExplorer/js/UIExplorerApp.ios.js

@@ -28,6 +28,7 @@ const Linking = require('Linking');
 const React = require('react');
 const ReactNative = require('react-native');
 const UIExplorerList = require('./UIExplorerList.ios');
+const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
 const UIExplorerExampleList = require('./UIExplorerExampleList');
 const UIExplorerNavigationReducer = require('./UIExplorerNavigationReducer');
 const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
@@ -177,10 +178,9 @@ class UIExplorerApp extends React.Component {
 
     const Example = UIExplorerList.Modules[state.key];
     if (Example) {
-      const Component = UIExplorerExampleList.makeRenderable(Example);
       return (
         <View style={styles.exampleContainer}>
-          <Component />
+          <UIExplorerExampleContainer module={Example} />
         </View>
       );
     }
@@ -207,10 +207,9 @@ UIExplorerList.ComponentExamples.concat(UIExplorerList.APIExamples).forEach((Exa
   if (ExampleModule.displayName) {
     class Snapshotter extends React.Component {
       render() {
-        const Renderable = UIExplorerExampleList.makeRenderable(ExampleModule);
         return (
           <SnapshotViewIOS>
-            <Renderable />
+            <UIExplorerExampleContainer module={ExampleModule} />
           </SnapshotViewIOS>
         );
       }

Examples/UIExplorer/js/UIExplorerExampleContainer.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule UIExplorerExampleContainer
+ */
+'use strict';
+
+const React = require('react');
+const {
+  Platform,
+} = require('react-native');
+const UIExplorerBlock = require('./UIExplorerBlock');
+const UIExplorerPage = require('./UIExplorerPage');
+
+const invariant = require('fbjs/lib/invariant');
+
+class UIExplorerExampleContainer extends React.Component {
+  renderExample(example, i) {
+    // Filter platform-specific examples
+    var {title, description, platform} = example;
+    if (platform) {
+      if (Platform.OS !== platform) {
+        return null;
+      }
+      title += ' (' + platform + ' only)';
+    }
+    return (
+      <UIExplorerBlock
+        key={i}
+        title={title}
+        description={description}>
+        {example.render()}
+      </UIExplorerBlock>
+    );
+  }
+
+  render(): ReactElement<any> {
+    if (!this.props.module.examples) {
+      return <this.props.module />;
+    }
+
+    return (
+      <UIExplorerPage title={this.props.title}>
+        {this.props.module.examples.map(this.renderExample)}
+      </UIExplorerPage>
+    );
+  }
+}
+
+module.exports = UIExplorerExampleContainer;

Examples/UIExplorer/js/UIExplorerExampleList.js

@@ -30,43 +30,41 @@ const TextInput = require('TextInput');
 const TouchableHighlight = require('TouchableHighlight');
 const View = require('View');
 const UIExplorerActions = require('./UIExplorerActions');
-
-const createExamplePage = require('./createExamplePage');
+const UIExplorerStatePersister = require('./UIExplorerStatePersister');
 
 import type {
   UIExplorerExample,
 } from './UIExplorerList.ios';
 
+import type {
+  PassProps,
+} from './UIExplorerStatePersister';
+
+import type {
+  StyleObj,
+} from 'StyleSheetTypes';
+
 const ds = new ListView.DataSource({
   rowHasChanged: (r1, r2) => r1 !== r2,
   sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
 });
 
+type Props = {
+  onNavigate: Function,
+  list: {
+    ComponentExamples: Array<UIExplorerExample>,
+    APIExamples: Array<UIExplorerExample>,
+  },
+  persister: PassProps<*>,
+  searchTextInputStyle: StyleObj,
+  style?: ?StyleObj,
+};
+
 class UIExplorerExampleList extends React.Component {
-
-  state = {filter: ''};
-
-  constructor(props: {
-    disableTitleRow: ?boolean,
-    onNavigate: Function,
-    filter: ?string,
-    list: {
-      ComponentExamples: Array<UIExplorerExample>,
-      APIExamples: Array<UIExplorerExample>,
-    },
-    style: ?any,
-  }) {
-    super(props);
-  }
-
-  static makeRenderable(example: any): ReactClass<any> {
-    return example.examples ?
-      createExamplePage(null, example) :
-      example;
-  }
+  props: Props
 
   render(): ?ReactElement<any> {
-    const filterText = this.state.filter || '';
+    const filterText = this.props.persister.state.filter;
     const filterRegex = new RegExp(String(filterText), 'i');
     const filter = (example) => filterRegex.test(example.module.title);
 
@@ -119,12 +117,13 @@ class UIExplorerExampleList extends React.Component {
           autoCorrect={false}
           clearButtonMode="always"
           onChangeText={text => {
-            this.setState({filter: text});
+            this.props.persister.setState(() => ({filter: text}));
           }}
           placeholder="Search..."
+          underlineColorAndroid="transparent"
           style={[styles.searchTextInput, this.props.searchTextInputStyle]}
           testID="explorer_search"
-          value={this.state.filter}
+          value={this.props.persister.state.filter}
         />
       </View>
     );
@@ -170,6 +169,11 @@ class UIExplorerExampleList extends React.Component {
   }
 }
 
+UIExplorerExampleList = UIExplorerStatePersister.createContainer(UIExplorerExampleList, {
+  cacheKeySuffix: () => 'mainList',
+  getInitialState: () => ({filter: ''}),
+});
+
 const styles = StyleSheet.create({
   listContainer: {
     flex: 1,
@@ -182,9 +186,6 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     fontSize: 11,
   },
-  group: {
-    backgroundColor: 'white',
-  },
   row: {
     backgroundColor: 'white',
     justifyContent: 'center',
@@ -215,6 +216,7 @@ const styles = StyleSheet.create({
     borderRadius: 3,
     borderWidth: 1,
     paddingLeft: 8,
+    paddingVertical: 0,
     height: 35,
   },
 });

Examples/UIExplorer/js/UIExplorerList.android.js

@@ -22,22 +22,16 @@
  */
 'use strict';
 
-const React = require('React');
-
 export type UIExplorerExample = {
-  key: string;
-  module: React.Component;
+  key: string,
+  module: Object,
 };
 
-var ComponentExamples: Array<UIExplorerExample> = [
+const ComponentExamples: Array<UIExplorerExample> = [
   {
     key: 'ActivityIndicatorExample',
     module: require('./ActivityIndicatorExample'),
   },
-  {
-    key: 'SliderExample',
-    module: require('./SliderExample'),
-  },
   {
     key: 'ImageExample',
     module: require('./ImageExample'),
@@ -47,12 +41,16 @@ var ComponentExamples: Array<UIExplorerExample> = [
     module: require('./ListViewExample'),
   },
   {
-    key: 'ModalExample',
-    module: require('./ModalExample'),
+    key: 'ListViewGridLayoutExample',
+    module: require('./ListViewGridLayoutExample'),
   },
   {
-    key: 'NativeAnimationsExample',
-    module: require('./NativeAnimationsExample'),
+    key: 'ListViewPagingExample',
+    module: require('./ListViewPagingExample'),
+  },
+  {
+    key: 'ModalExample',
+    module: require('./ModalExample'),
   },
   {
     key: 'PickerExample',
@@ -70,6 +68,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
     key: 'ScrollViewSimpleExample',
     module: require('./ScrollViewSimpleExample'),
   },
+  {
+    key: 'SliderExample',
+    module: require('./SliderExample'),
+  },
   {
     key: 'StatusBarExample',
     module: require('./StatusBarExample'),
@@ -112,7 +114,7 @@ var ComponentExamples: Array<UIExplorerExample> = [
   },
 ];
 
-const APIExamples = [
+const APIExamples: Array<UIExplorerExample> = [
   {
     key: 'AccessibilityAndroidExample',
     module: require('./AccessibilityAndroidExample'),
@@ -121,6 +123,10 @@ const APIExamples = [
     key: 'AlertExample',
     module: require('./AlertExample').AlertExample,
   },
+  {
+    key: 'AnimatedExample',
+    module: require('./AnimatedExample'),
+  },
   {
     key: 'AppStateExample',
     module: require('./AppStateExample'),
@@ -165,6 +171,10 @@ const APIExamples = [
     key: 'LayoutExample',
     module: require('./LayoutExample'),
   },
+  {
+    key: 'NativeAnimationsExample',
+    module: require('./NativeAnimationsExample'),
+  },
   {
     key: 'NavigationExperimentalExample',
     module: require('./NavigationExperimental/NavigationExperimentalExample'),
@@ -173,6 +183,10 @@ const APIExamples = [
     key: 'NetInfoExample',
     module: require('./NetInfoExample'),
   },
+  {
+    key: 'OrientationChangeExample',
+    module: require('./OrientationChangeExample'),
+  },
   {
     key: 'PanResponderExample',
     module: require('./PanResponderExample'),
@@ -185,6 +199,10 @@ const APIExamples = [
     key: 'PointerEventsExample',
     module: require('./PointerEventsExample'),
   },
+  {
+    key: 'RTLExample',
+    module: require('./RTLExample'),
+  },
   {
     key: 'ShareExample',
     module: require('./ShareExample'),

Examples/UIExplorer/js/UIExplorerList.ios.js

@@ -23,8 +23,8 @@
 'use strict';
 
 export type UIExplorerExample = {
-  key: string;
-  module: Object;
+  key: string,
+  module: Object,
 };
 
 const ComponentExamples: Array<UIExplorerExample> = [
@@ -68,10 +68,6 @@ const ComponentExamples: Array<UIExplorerExample> = [
     key: 'ModalExample',
     module: require('./ModalExample'),
   },
-  {
-    key: 'NativeAnimationsExample',
-    module: require('./NativeAnimationsExample'),
-  },
   {
     key: 'NavigatorExample',
     module: require('./Navigator/NavigatorExample'),
@@ -227,6 +223,10 @@ const APIExamples: Array<UIExplorerExample> = [
     key: 'LinkingExample',
     module: require('./LinkingExample'),
   },
+  {
+    key: 'NativeAnimationsExample',
+    module: require('./NativeAnimationsExample'),
+  },
   {
     key: 'NavigationExperimentalExample',
     module: require('./NavigationExperimental/NavigationExperimentalExample'),
@@ -235,6 +235,10 @@ const APIExamples: Array<UIExplorerExample> = [
     key: 'NetInfoExample',
     module: require('./NetInfoExample'),
   },
+  {
+    key: 'OrientationChangeExample',
+    module: require('./OrientationChangeExample'),
+  },
   {
     key: 'PanResponderExample',
     module: require('./PanResponderExample'),
@@ -251,6 +255,10 @@ const APIExamples: Array<UIExplorerExample> = [
     key: 'RCTRootViewIOSExample',
     module: require('./RCTRootViewIOSExample'),
   },
+  {
+    key: 'RTLExample',
+    module: require('./RTLExample'),
+  },
   {
     key: 'ShareExample',
     module: require('./ShareExample'),

Examples/UIExplorer/js/UIExplorerSettingSwitchRow.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule UIExplorerSettingSwitchRow
+ * @flow
+ */
+'use strict';
+
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const Switch = require('Switch');
+const Text = require('Text');
+const UIExplorerStatePersister = require('./UIExplorerStatePersister');
+const View = require('View');
+
+class UIExplorerSettingSwitchRow extends React.Component {
+  componentWillReceiveProps(newProps) {
+    const {onEnable, onDisable, persister} = this.props;
+    if (newProps.persister.state !== persister.state) {
+      newProps.persister.state ? onEnable() : onDisable();
+    }
+  }
+  render() {
+    const {label, persister} = this.props;
+    return (
+      <View style={styles.row}>
+        <Text>{label}</Text>
+        <Switch
+          value={persister.state}
+          onValueChange={(value) => {
+            persister.setState(() => value);
+          }}
+        />
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  row: {
+    padding: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+UIExplorerSettingSwitchRow = UIExplorerStatePersister.createContainer(UIExplorerSettingSwitchRow, {
+  cacheKeySuffix: ({label}) => 'Switch:' + label,
+  getInitialState: ({initialValue}) => initialValue,
+});
+module.exports = UIExplorerSettingSwitchRow;

Examples/UIExplorer/js/UIExplorerStatePersister.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+const AsyncStorage = require('AsyncStorage');
+const React = require('React');
+
+export type PassProps<State> = {
+  state: State,
+  setState: (stateLamda: (state: State) => State) => void,
+};
+
+/**
+ * A simple container for persisting some state and passing it into the wrapped component as
+ * `props.persister.state`. Update it with `props.persister.setState`. The component is initially
+ * rendered using `getInitialState` in the spec and is then re-rendered with the persisted data
+ * once it's fetched.
+ *
+ * This is currently tied to UIExplorer because it's generally not good to use AsyncStorage like
+ * this in real apps with user data, but we could maybe pull it out for other internal settings-type
+ * usage.
+ */
+function createContainer<Props, State>(
+  Component: ReactClass<Props & {persister: PassProps<State>}>,
+  spec: {
+    cacheKeySuffix: (props: Props) => string,
+    getInitialState: (props: Props) => State,
+    version?: string,
+  },
+): ReactClass<Props> {
+  return class ComponentWithPersistedState extends React.Component {
+    props: Props;
+    static displayName = `UIExplorerStatePersister(${Component.displayName || Component.name})`;
+    state = {value: spec.getInitialState(this.props)};
+    _cacheKey = `UIExplorer:${spec.version || 'v1'}:${spec.cacheKeySuffix(this.props)}`;
+    componentDidMount() {
+      AsyncStorage.getItem(this._cacheKey, (err, value) => {
+        if (!err && value) {
+          this.setState({value: JSON.parse(value)});
+        }
+      });
+    }
+    _passSetState = (stateLamda: (state: State) => State): void => {
+      this.setState((state) => {
+        const value = stateLamda(state.value);
+        AsyncStorage.setItem(this._cacheKey, JSON.stringify(value));
+        return {value};
+      });
+    };
+    render(): React.Element<*> {
+      return (
+        <Component
+          {...this.props}
+          persister={{
+            state: this.state.value,
+            setState: this._passSetState,
+          }}
+        />
+      );
+    }
+  };
+}
+
+const UIExplorerStatePersister = {
+  createContainer,
+};
+
+module.exports = UIExplorerStatePersister;

Examples/UIExplorer/js/VibrationExample.js

@@ -30,12 +30,45 @@ var {
   Text,
   TouchableHighlight,
   Vibration,
+  Platform,
 } = ReactNative;
 
 exports.framework = 'React';
 exports.title = 'Vibration';
 exports.description = 'Vibration API';
+
+var pattern, patternLiteral, patternDescription;
+if (Platform.OS === 'android') {
+  pattern = [0, 500, 200, 500];
+  patternLiteral = '[0, 500, 200, 500]';
+  patternDescription = `${patternLiteral}
+arg 0: duration to wait before turning the vibrator on.
+arg with odd: vibration length.
+arg with even: duration to wait before next vibration.
+`;
+} else {
+  pattern = [0, 1000, 2000, 3000];
+  patternLiteral = '[0, 1000, 2000, 3000]';
+  patternDescription = `${patternLiteral}
+vibration length on iOS is fixed.
+pattern controls durations BETWEEN each vibration only.
+
+arg 0: duration to wait before turning the vibrator on.
+subsequent args: duration to wait before next vibrattion.
+`;
+}
+
 exports.examples = [
+  {
+    title: 'Pattern Descriptions',
+    render() {
+      return (
+        <View style={styles.wrapper}>
+          <Text>{patternDescription}</Text>
+        </View>
+      );
+    },
+  },
   {
     title: 'Vibration.vibrate()',
     render() {
@@ -51,12 +84,12 @@ exports.examples = [
     },
   },
   {
-    title: 'Vibration.vibrate([0, 500, 200, 500])',
+    title: `Vibration.vibrate(${patternLiteral})`,
     render() {
       return (
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => Vibration.vibrate([0, 500, 200, 500])}>
+          onPress={() => Vibration.vibrate(pattern)}>
           <View style={styles.button}>
             <Text>Vibrate once</Text>
           </View>
@@ -65,12 +98,12 @@ exports.examples = [
     },
   },
   {
-    title: 'Vibration.vibrate([0, 500, 200, 500], true)',
+    title: `Vibration.vibrate(${patternLiteral}, true)`,
     render() {
       return (
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={() => Vibration.vibrate([0, 500, 200, 500], true)}>
+          onPress={() => Vibration.vibrate(pattern, true)}>
           <View style={styles.button}>
             <Text>Vibrate until cancel</Text>
           </View>

Examples/UIExplorer/js/ViewExample.js

@@ -22,7 +22,6 @@
  */
 'use strict';
 
-var Platform = require('Platform');
 var React = require('react');
 var ReactNative = require('react-native');
 var {

Examples/UIExplorer/js/XHRExample.ios.js

@@ -41,6 +41,7 @@ var {
 var XHRExampleHeaders = require('./XHRExampleHeaders');
 var XHRExampleFetch = require('./XHRExampleFetch');
 var XHRExampleOnTimeOut = require('./XHRExampleOnTimeOut');
+var XHRExampleCookies = require('./XHRExampleCookies');
 
 /**
  * Convert number of bytes to MB and round to the nearest 0.1 MB.
@@ -432,6 +433,11 @@ exports.examples = [{
   render() {
     return <XHRExampleOnTimeOut/>;
   }
+}, {
+  title: 'Cookies',
+  render() {
+    return <XHRExampleCookies />;
+  }
 }];
 
 var styles = StyleSheet.create({

Examples/UIExplorer/js/XHRExampleFetch.js

@@ -36,6 +36,7 @@ var {
 class XHRExampleFetch extends React.Component {
   state: any;
   responseURL: ?string;
+  responseHeaders: ?Object;
 
   constructor(props: any) {
     super(props);
@@ -43,17 +44,34 @@ class XHRExampleFetch extends React.Component {
      responseText: null,
     };
     this.responseURL = null;
+    this.responseHeaders = null;
   }
 
   submit(uri: String) {
     fetch(uri).then((response) => {
       this.responseURL = response.url;
+      this.responseHeaders = response.headers;
       return response.text();
     }).then((body) => {
       this.setState({responseText: body});
     });
   }
 
+  _renderHeaders() {
+    if (!this.responseHeaders) {
+      return null;
+    }
+
+    var responseHeaders = [];
+    var keys = Object.keys(this.responseHeaders.map);
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+      var value = this.responseHeaders.get(key);
+      responseHeaders.push(<Text>{key}: {value}</Text>);
+    }
+    return responseHeaders;
+  }
+
   render() {
 
     var responseURL = this.responseURL ? (
@@ -63,6 +81,13 @@ class XHRExampleFetch extends React.Component {
       </View>
     ) : null;
 
+    var responseHeaders = this.responseHeaders ? (
+      <View style={{marginTop: 10}}>
+        <Text style={styles.label}>Server response headers:</Text>
+        {this._renderHeaders()}
+      </View>
+    ) : null;
+
     var response = this.state.responseText ? (
       <View style={{marginTop: 10}}>
         <Text style={styles.label}>Server response:</Text>
@@ -87,6 +112,7 @@ class XHRExampleFetch extends React.Component {
           style={styles.textInput}
         />
         {responseURL}
+        {responseHeaders}
         {response}
       </View>
     );

Examples/UIExplorer/js/createExamplePage.js

@@ -23,71 +23,18 @@
  */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
-  Platform,
-} = ReactNative;
-var UIExplorerBlock = require('./UIExplorerBlock');
-var UIExplorerPage = require('./UIExplorerPage');
+const React = require('react');
 
-var invariant = require('fbjs/lib/invariant');
+const UIExplorerExampleContainer = require('./UIExplorerExampleContainer');
 
 import type { Example, ExampleModule } from 'ExampleTypes';
 
 var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
   : ReactClass<any> {
-  invariant(!!exampleModule.examples, 'The module must have examples');
 
   class ExamplePage extends React.Component {
-    static title = exampleModule.title;
-    static description = exampleModule.description;
-
-    getBlock = (example: Example, i) => {
-      // Filter platform-specific examples
-      var {title, description, platform} = example;
-      if (platform) {
-        if (Platform.OS !== platform) {
-          return null;
-        }
-        title += ' (' + platform + ' only)';
-      }
-      // Hack warning: This is a hack because the www UI explorer used to
-      // require render to be called. It should just return elements now.
-      var originalRender = React.render;
-      var originalIOSRender = ReactNative.render;
-      var renderedComponent;
-      // TODO remove typecasts when Flow bug #6560135 is fixed
-      // and workaround is removed from react-native.js
-      (React: Object).render =
-      (ReactNative: Object).render =
-        function(element, container) {
-          renderedComponent = element;
-        };
-      var result = example.render(null);
-      if (result) {
-        renderedComponent = React.cloneElement(result, {
-          navigator: this.props.navigator,
-        });
-      }
-      (React: Object).render = originalRender;
-      (ReactNative: Object).render = originalIOSRender;
-      return (
-        <UIExplorerBlock
-          key={i}
-          title={title}
-          description={description}>
-          {renderedComponent}
-        </UIExplorerBlock>
-      );
-    };
-
     render() {
-      return (
-        <UIExplorerPage title={title}>
-          {exampleModule.examples.map(this.getBlock)}
-        </UIExplorerPage>
-      );
+      return <UIExplorerExampleContainer module={exampleModule} title={title} />;
     }
   }
 

IntegrationTests/PromiseTest.js

@@ -28,9 +28,7 @@ class PromiseTest extends React.Component {
       this.testShouldSucceedAsync(),
       this.testShouldThrowAsync(),
     ]).then(() => TestModule.markTestPassed(
-      // $FlowFixMe found when converting React.createClass to ES6
       this.shouldResolve && this.shouldReject &&
-      // $FlowFixMe found when converting React.createClass to ES6
       this.shouldSucceedAsync && this.shouldThrowAsync
     ));
   }

Libraries/ART/ART.xcodeproj/project.pbxproj

@@ -280,7 +280,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -319,7 +319,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

Libraries/ART/RCTConvert+ART.m

@@ -14,6 +14,7 @@
 #import "ARTRadialGradient.h"
 #import "ARTSolidColor.h"
 #import "RCTLog.h"
+#import "RCTFont.h"
 
 @implementation RCTConvert (ART)
 
@@ -86,15 +87,14 @@ RCT_ENUM_CONVERTER(CTTextAlignment, (@{
     return frame;
   }
 
-  NSDictionary *fontDict = dict[@"font"];
-  CTFontRef font = (__bridge CTFontRef)[self UIFont:nil withFamily:fontDict[@"fontFamily"] size:fontDict[@"fontSize"] weight:fontDict[@"fontWeight"] style:fontDict[@"fontStyle"] scaleMultiplier:1.0];
+  CTFontRef font = (__bridge CTFontRef)[self UIFont:dict[@"font"]];
   if (!font) {
     return frame;
   }
 
   // Create a dictionary for this font
   CFDictionaryRef attributes = (__bridge CFDictionaryRef)@{
-    (NSString *)kCTFontAttributeName: (__bridge id)font,
+    (NSString *)kCTFontAttributeName:(__bridge id)font,
     (NSString *)kCTForegroundColorFromContextAttributeName: @YES
   };
 

Libraries/ActionSheetIOS/ActionSheetIOS.js

@@ -44,13 +44,13 @@ var ActionSheetIOS = {
 
   /**
    * Display the iOS share sheet. The `options` object should contain
-   * one or both of `message` and `url` and can additionally have 
+   * one or both of `message` and `url` and can additionally have
    * a `subject` or `excludedActivityTypes`:
    *
    * - `url` (string) - a URL to share
    * - `message` (string) - a message to share
    * - `subject` (string) - a subject for the message
-   * - `excludedActivityTypes` (array) - the activites to exclude from the ActionSheet
+   * - `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet
    *
    * NOTE: if `url` points to a local file, or is a base64-encoded
    * uri, the file it points to will be loaded and shared directly.

Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj/project.pbxproj

@@ -156,7 +156,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -196,7 +196,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

Libraries/ActionSheetIOS/RCTActionSheetManager.m

@@ -84,67 +84,39 @@ RCT_EXPORT_METHOD(showActionSheetWithOptions:(NSDictionary *)options
   UIView *sourceView = controller.view;
   CGRect sourceRect = [self sourceRectInView:sourceView anchorViewTag:anchorViewTag];
 
-#if __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_8_0
+  UIAlertController *alertController =
+  [UIAlertController alertControllerWithTitle:title
+                                      message:message
+                               preferredStyle:UIAlertControllerStyleActionSheet];
 
-  if ([UIAlertController class] == nil) {
-
-    UIActionSheet *actionSheet = [UIActionSheet new];
-
-    actionSheet.title = title;
-    for (NSString *option in buttons) {
-      [actionSheet addButtonWithTitle:option];
-    }
-    actionSheet.destructiveButtonIndex = destructiveButtonIndex;
-    actionSheet.cancelButtonIndex = cancelButtonIndex;
-    actionSheet.delegate = self;
-
-    [_callbacks setObject:callback forKey:actionSheet];
-
-    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
-      [actionSheet showFromRect:sourceRect inView:sourceView animated:YES];
-    } else {
-      [actionSheet showInView:sourceView];
+  NSInteger index = 0;
+  for (NSString *option in buttons) {
+    UIAlertActionStyle style = UIAlertActionStyleDefault;
+    if (index == destructiveButtonIndex) {
+      style = UIAlertActionStyleDestructive;
+    } else if (index == cancelButtonIndex) {
+      style = UIAlertActionStyleCancel;
     }
 
-  } else
+    NSInteger localIndex = index;
+    [alertController addAction:[UIAlertAction actionWithTitle:option
+                                                        style:style
+                                                      handler:^(__unused UIAlertAction *action){
+      callback(@[@(localIndex)]);
+    }]];
 
-#endif
-
-  {
-    UIAlertController *alertController =
-    [UIAlertController alertControllerWithTitle:title
-                                        message:message
-                                 preferredStyle:UIAlertControllerStyleActionSheet];
-
-    NSInteger index = 0;
-    for (NSString *option in buttons) {
-      UIAlertActionStyle style = UIAlertActionStyleDefault;
-      if (index == destructiveButtonIndex) {
-        style = UIAlertActionStyleDestructive;
-      } else if (index == cancelButtonIndex) {
-        style = UIAlertActionStyleCancel;
-      }
-
-      NSInteger localIndex = index;
-      [alertController addAction:[UIAlertAction actionWithTitle:option
-                                                          style:style
-                                                        handler:^(__unused UIAlertAction *action){
-        callback(@[@(localIndex)]);
-      }]];
-
-      index++;
-    }
-
-    alertController.modalPresentationStyle = UIModalPresentationPopover;
-    alertController.popoverPresentationController.sourceView = sourceView;
-    alertController.popoverPresentationController.sourceRect = sourceRect;
-    if (!anchorViewTag) {
-      alertController.popoverPresentationController.permittedArrowDirections = 0;
-    }
-    [controller presentViewController:alertController animated:YES completion:nil];
-
-    alertController.view.tintColor = [RCTConvert UIColor:options[@"tintColor"]];
+    index++;
   }
+
+  alertController.modalPresentationStyle = UIModalPresentationPopover;
+  alertController.popoverPresentationController.sourceView = sourceView;
+  alertController.popoverPresentationController.sourceRect = sourceRect;
+  if (!anchorViewTag) {
+    alertController.popoverPresentationController.permittedArrowDirections = 0;
+  }
+  [controller presentViewController:alertController animated:YES completion:nil];
+
+  alertController.view.tintColor = [RCTConvert UIColor:options[@"tintColor"]];
 }
 
 RCT_EXPORT_METHOD(showShareActionSheetWithOptions:(NSDictionary *)options
@@ -163,7 +135,7 @@ RCT_EXPORT_METHOD(showShareActionSheetWithOptions:(NSDictionary *)options
   }
   NSURL *URL = [RCTConvert NSURL:options[@"url"]];
   if (URL) {
-    if (URL.fileURL || [URL.scheme.lowercaseString isEqualToString:@"data"]) {
+    if ([URL.scheme.lowercaseString isEqualToString:@"data"]) {
       NSError *error;
       NSData *data = [NSData dataWithContentsOfURL:URL
                                            options:(NSDataReadingOptions)0
@@ -195,36 +167,21 @@ RCT_EXPORT_METHOD(showShareActionSheetWithOptions:(NSDictionary *)options
   }
 
   UIViewController *controller = RCTPresentedViewController();
-
-#if __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_8_0
-
-  if (![UIActivityViewController instancesRespondToSelector:@selector(setCompletionWithItemsHandler:)]) {
-    // Legacy iOS 7 implementation
-    shareController.completionHandler = ^(NSString *activityType, BOOL completed) {
+  shareController.completionWithItemsHandler = ^(NSString *activityType, BOOL completed, __unused NSArray *returnedItems, NSError *activityError) {
+    if (activityError) {
+      failureCallback(activityError);
+    } else {
       successCallback(@[@(completed), RCTNullIfNil(activityType)]);
-    };
-  } else
-
-#endif
-
-  {
-    // iOS 8 version
-    shareController.completionWithItemsHandler = ^(NSString *activityType, BOOL completed, __unused NSArray *returnedItems, NSError *activityError) {
-      if (activityError) {
-        failureCallback(activityError);
-      } else {
-        successCallback(@[@(completed), RCTNullIfNil(activityType)]);
-      }
-    };
-
-    shareController.modalPresentationStyle = UIModalPresentationPopover;
-    NSNumber *anchorViewTag = [RCTConvert NSNumber:options[@"anchor"]];
-    if (!anchorViewTag) {
-      shareController.popoverPresentationController.permittedArrowDirections = 0;
     }
-    shareController.popoverPresentationController.sourceView = controller.view;
-    shareController.popoverPresentationController.sourceRect = [self sourceRectInView:controller.view anchorViewTag:anchorViewTag];
+  };
+
+  shareController.modalPresentationStyle = UIModalPresentationPopover;
+  NSNumber *anchorViewTag = [RCTConvert NSNumber:options[@"anchor"]];
+  if (!anchorViewTag) {
+    shareController.popoverPresentationController.permittedArrowDirections = 0;
   }
+  shareController.popoverPresentationController.sourceView = controller.view;
+  shareController.popoverPresentationController.sourceRect = [self sourceRectInView:controller.view anchorViewTag:anchorViewTag];
 
   [controller presentViewController:shareController animated:YES completion:nil];
 

Libraries/AdSupport/RCTAdSupport.xcodeproj/project.pbxproj

@@ -161,7 +161,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -206,7 +206,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

Libraries/Animated/src/Animated.js

@@ -15,10 +15,12 @@ var AnimatedImplementation = require('AnimatedImplementation');
 var Image = require('Image');
 var Text = require('Text');
 var View = require('View');
+var ScrollView = require('ScrollView');
 
 module.exports = {
   ...AnimatedImplementation,
   View: AnimatedImplementation.createAnimatedComponent(View),
   Text: AnimatedImplementation.createAnimatedComponent(Text),
   Image: AnimatedImplementation.createAnimatedComponent(Image),
+  ScrollView: AnimatedImplementation.createAnimatedComponent(ScrollView),
 };