[Website] Load React Native Web Player from MaxCDN.

Summary:
The documentation was not updated after this change : Implemented automatic IP detection for iOS (8c29a52)

Fixes #8651.
Closes https://github.com/facebook/react-native/pull/8660

Differential Revision: D3539749

fbshipit-source-id: fe3b37c446a8c37941adbb08c4301284950a176a

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
 
-(You can skip this if you're fixing a typo or adding an app to the Showcase.)
+> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
 
 Explain the **motivation** for making this change. What existing problem does the pull request solve?
 

CONTRIBUTING.md

@@ -21,7 +21,7 @@ Please submit your pull request on the *master* branch. If the fix is critical a
 1. Fork the repo and create your branch from `master`.
 2. **Describe your test plan in your commit.** If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
-4. If you've updated the docs, verify the website locally and submit screenshots if applicable
+4. If you've updated the docs, verify the website locally and submit screenshots if applicable.
 
     ```
     $ cd website

Libraries/Image/Image.ios.js

@@ -34,7 +34,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  * including network images, static resources, temporary local images, and
  * images from local disk, such as the camera roll.
  *
- * This exmaples shows both fetching and displaying an image from local storage as well as on from
+ * This example shows both fetching and displaying an image from local storage as well as on from
  * network.
  *
  * ```ReactNativeWebPlayer

Libraries/Interaction/TaskQueue.js

@@ -15,12 +15,12 @@ const infoLog = require('infoLog');
 const invariant = require('fbjs/lib/invariant');
 
 type SimpleTask = {
-  name: string;
-  run: () => void;
+  name: string,
+  run: () => void,
 };
 type PromiseTask = {
-  name: string;
-  gen: () => Promise<any>;
+  name: string,
+  gen: () => Promise<any>,
 };
 export type Task = Function | SimpleTask | PromiseTask;
 
@@ -75,7 +75,7 @@ class TaskQueue {
         ...queue,
         tasks: queue.tasks.filter((task) => tasksToCancel.indexOf(task) === -1),
       }))
-      .filter((queue) => queue.tasks.length > 0);
+      .filter((queue, idx) => (queue.tasks.length > 0 || idx === 0));
   }
 
   /**
@@ -151,7 +151,10 @@ class TaskQueue {
     DEBUG && infoLog('exec gen task ' + task.name);
     task.gen()
       .then(() => {
-        DEBUG && infoLog('onThen for gen task ' + task.name, {stackIdx, queueStackSize: this._queueStack.length});
+        DEBUG && infoLog(
+          'onThen for gen task ' + task.name,
+          {stackIdx, queueStackSize: this._queueStack.length},
+        );
         this._queueStack[stackIdx].popable = true;
         this.hasTasksToProcess() && this._onMoreTasks();
       })

Libraries/Interaction/__tests__/TaskQueue-test.js

@@ -142,4 +142,13 @@ describe('TaskQueue', () => {
     expectToBeCalledOnce(task4);
     expect(taskQueue.hasTasksToProcess()).toBe(false);
   });
+
+  it('should not crash when last task is cancelled', () => {
+    const task1 = jest.fn();
+    taskQueue.enqueue(task1);
+    taskQueue.cancelTasks([task1]);
+    clearTaskQueue(taskQueue);
+    expect(task1).not.toBeCalled();
+    expect(taskQueue.hasTasksToProcess()).toBe(false);
+  });
 });

Libraries/NavigationExperimental/NavigationTransitioner.js

@@ -125,9 +125,6 @@ class NavigationTransitioner extends React.Component<any, Props, State> {
       progress,
     } = nextState;
 
-    // update scenes.
-    this.setState(nextState);
-
     // get the transition spec.
     const transitionUserSpec = nextProps.configureTransition ?
       nextProps.configureTransition(
@@ -168,12 +165,14 @@ class NavigationTransitioner extends React.Component<any, Props, State> {
       );
     }
 
-    // play the transition.
-    nextProps.onTransitionStart && nextProps.onTransitionStart(
-      this._transitionProps,
-      this._prevTransitionProps,
-    );
-    Animated.parallel(animations).start(this._onTransitionEnd);
+    // update scenes and play the transition
+    this.setState(nextState, () => {
+      nextProps.onTransitionStart && nextProps.onTransitionStart(
+        this._transitionProps,
+        this._prevTransitionProps,
+      );
+      Animated.parallel(animations).start(this._onTransitionEnd);
+    });
   }
 
   render(): ReactElement<any> {

React.podspec

@@ -4,7 +4,7 @@ package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
 Pod::Spec.new do |s|
   s.name                = "React"
-  s.version             = package['version']
+  s.version             = "0.30.0"
   s.summary             = package['description']
   s.description         = <<-DESC
                             React Native apps are built using the React JS

ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=1000.0.0-master
+VERSION_NAME=0.30.0
 GROUP=com.facebook.react
 
 POM_NAME=ReactNative

ReactAndroid/src/main/java/com/facebook/react/devsupport/StackTraceHelper.java

@@ -9,6 +9,8 @@
 
 package com.facebook.react.devsupport;
 
+import javax.annotation.Nullable;
+
 import java.io.File;
 
 import com.facebook.react.bridge.ReadableArray;
@@ -91,9 +93,10 @@ public class StackTraceHelper {
    * Convert a JavaScript stack trace (see {@code parseErrorStack} JS module) to an array of
    * {@link StackFrame}s.
    */
-  public static StackFrame[] convertJsStackTrace(ReadableArray stack) {
-    StackFrame[] result = new StackFrame[stack.size()];
-    for (int i = 0; i < stack.size(); i++) {
+  public static StackFrame[] convertJsStackTrace(@Nullable ReadableArray stack) {
+    int size = stack != null ? stack.size() : 0;
+    StackFrame[] result = new StackFrame[size];
+    for (int i = 0; i < size; i++) {
       ReadableMap frame = stack.getMap(i);
       String methodName = frame.getString("methodName");
       String fileName = frame.getString("file");

ReactAndroid/src/main/jni/react/JSCExecutor.cpp

@@ -68,25 +68,6 @@ static JSValueRef nativeInjectHMRUpdate(
     const JSValueRef arguments[],
     JSValueRef *exception);
 
-static std::string executeJSCallWithJSC(
-    JSGlobalContextRef ctx,
-    const std::string& methodName,
-    const std::vector<folly::dynamic>& arguments) {
-  #ifdef WITH_FBSYSTRACE
-  FbSystraceSection s(
-      TRACE_TAG_REACT_CXX_BRIDGE, "JSCExecutor.executeJSCall",
-      "method", methodName);
-  #endif
-
-  // Evaluate script with JSC
-  folly::dynamic jsonArgs(arguments.begin(), arguments.end());
-  auto js = folly::to<std::string>(
-      "__fbBatchedBridge.", methodName, ".apply(null, ",
-      folly::toJson(jsonArgs), ")");
-  auto result = evaluateScript(ctx, String(js.c_str()), nullptr);
-  return Value(ctx, result).toJSONString();
-}
-
 std::unique_ptr<JSExecutor> JSCExecutorFactory::createJSExecutor(Bridge *bridge) {
   return std::unique_ptr<JSExecutor>(new JSCExecutor(bridge, cacheDir_, m_jscConfig));
 }
@@ -202,6 +183,8 @@ void JSCExecutor::terminateOnJSVMThread() {
 
   m_batchedBridge.reset();
   m_flushedQueueObj.reset();
+  m_callFunctionObj.reset();
+  m_invokeCallbackObj.reset();
 
   s_globalContextRefToJSCExecutor.erase(m_context);
   JSGlobalContextRelease(m_context);
@@ -266,6 +249,8 @@ bool JSCExecutor::ensureBatchedBridgeObject() {
   }
   m_batchedBridge = folly::make_unique<Object>(batchedBridgeValue.asObject());
   m_flushedQueueObj = folly::make_unique<Object>(m_batchedBridge->getProperty("flushedQueue").asObject());
+  m_callFunctionObj = folly::make_unique<Object>(m_batchedBridge->getProperty("callFunctionReturnFlushedQueue").asObject());
+  m_invokeCallbackObj = folly::make_unique<Object>(m_batchedBridge->getProperty("invokeCallbackAndReturnFlushedQueue").asObject());
   return true;
 }
 
@@ -290,6 +275,10 @@ void JSCExecutor::flush() {
 }
 
 void JSCExecutor::callFunction(const std::string& moduleId, const std::string& methodId, const folly::dynamic& arguments) {
+#ifdef WITH_FBSYSTRACE
+  FbSystraceSection s(TRACE_TAG_REACT_CXX_BRIDGE, "JSCExecutor.callFunction");
+#endif
+
   if (!ensureBatchedBridgeObject()) {
     throwJSExecutionException(
         "Couldn't call JS module %s, method %s: bridge configuration isn't available. This "
@@ -298,27 +287,35 @@ void JSCExecutor::callFunction(const std::string& moduleId, const std::string& m
         methodId.c_str());
   }
 
-  std::vector<folly::dynamic> call {
-      moduleId,
-      methodId,
-      std::move(arguments),
+  String argsString = String(folly::toJson(std::move(arguments)).c_str());
+  String moduleIdStr(moduleId.c_str());
+  String methodIdStr(methodId.c_str());
+  JSValueRef args[] = {
+      JSValueMakeString(m_context, moduleIdStr),
+      JSValueMakeString(m_context, methodIdStr),
+      Value::fromJSON(m_context, argsString)
   };
-  std::string calls = executeJSCallWithJSC(m_context, "callFunctionReturnFlushedQueue", std::move(call));
-  m_bridge->callNativeModules(*this, calls, true);
+  auto result = m_callFunctionObj->callAsFunction(3, args);
+  m_bridge->callNativeModules(*this, result.toJSONString(), true);
 }
 
 void JSCExecutor::invokeCallback(const double callbackId, const folly::dynamic& arguments) {
+#ifdef WITH_FBSYSTRACE
+  FbSystraceSection s(TRACE_TAG_REACT_CXX_BRIDGE, "JSCExecutor.invokeCallback");
+#endif
+
   if (!ensureBatchedBridgeObject()) {
     throwJSExecutionException(
         "Couldn't invoke JS callback %d: bridge configuration isn't available. This shouldn't be possible. Congratulations.", (int) callbackId);
   }
 
-  std::vector<folly::dynamic> call {
-      (double) callbackId,
-      std::move(arguments)
+  String argsString = String(folly::toJson(std::move(arguments)).c_str());
+  JSValueRef args[] = {
+      JSValueMakeNumber(m_context, callbackId),
+      Value::fromJSON(m_context, argsString)
   };
-  std::string calls = executeJSCallWithJSC(m_context, "invokeCallbackAndReturnFlushedQueue", std::move(call));
-  m_bridge->callNativeModules(*this, calls, true);
+  auto result = m_invokeCallbackObj->callAsFunction(2, args);
+  m_bridge->callNativeModules(*this, result.toJSONString(), true);
 }
 
 void JSCExecutor::setGlobalVariable(const std::string& propName, const std::string& jsonValue) {

ReactAndroid/src/main/jni/react/JSCExecutor.h

@@ -91,6 +91,8 @@ private:
   folly::dynamic m_jscConfig;
   std::unique_ptr<Object> m_batchedBridge;
   std::unique_ptr<Object> m_flushedQueueObj;
+  std::unique_ptr<Object> m_callFunctionObj;
+  std::unique_ptr<Object> m_invokeCallbackObj;
 
   /**
    * WebWorker constructor. Must be invoked from thread this Executor will run on.

docs/Networking.md

@@ -4,7 +4,7 @@ title: Networking
 layout: docs
 category: The Basics
 permalink: docs/network.html
-next: navigators
+next: using-navigators
 ---
 
 Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server.

docs/RunningOnDeviceIOS.md

@@ -13,9 +13,7 @@ Running an iOS app on a device requires an [Apple Developer account](https://dev
 
 You can iterate quickly on device using the development server. First, ensure that you are on the same Wi-Fi network as your computer.
 
-1. Open `ios/YourApp/AppDelegate.m`
-2. Change the host in the URL from `localhost` to your laptop's IP address. On Mac, you can find the IP address in System Preferences / Network.
-3. In Xcode, select your phone as build target and press "Build and run"
+In Xcode, select your phone as build target and press "Build and run"
 
 > Hint
 >

docs/UsingNavigators.md

@@ -1,5 +1,5 @@
 ---
-id: navigators
+id: using-navigators
 title: Using Navigators
 layout: docs
 category: The Basics

local-cli/rnpm/core/src/config/android/index.js

@@ -33,9 +33,9 @@ exports.projectConfig = function projectConfigAndroid(folder, userConfig) {
   const packageFolder = userConfig.packageFolder ||
     packageName.replace(/\./g, path.sep);
 
-  const mainActivityPath = path.join(
+  const mainFilePath = path.join(
     sourceDir,
-    userConfig.mainActivityPath || `src/main/java/${packageFolder}/MainActivity.java`
+    userConfig.mainFilePath || `src/main/java/${packageFolder}/MainApplication.java`
   );
 
   const stringsPath = path.join(
@@ -68,7 +68,7 @@ exports.projectConfig = function projectConfigAndroid(folder, userConfig) {
     buildGradlePath,
     settingsGradlePath,
     assetsPath,
-    mainActivityPath,
+    mainFilePath,
   };
 };
 

local-cli/rnpm/link/src/android/patches/0.20/makeImportPatch.js

@@ -1,6 +1,6 @@
 module.exports = function makeImportPatch(packageImportPath) {
   return {
-    pattern: 'import com.facebook.react.ReactActivity;',
+    pattern: 'import com.facebook.react.ReactApplication;',
     patch: '\n' + packageImportPath,
   };
 };

local-cli/rnpm/link/src/android/registerNativeModule.js

@@ -27,12 +27,12 @@ module.exports = function registerNativeAndroidModule(
   applyPatch(projectConfig.stringsPath, makeStringsPatch(params, name));
 
   applyPatch(
-    projectConfig.mainActivityPath,
+    projectConfig.mainFilePath,
     makePackagePatch(androidConfig.packageInstance, params, name)
   );
 
   applyPatch(
-    projectConfig.mainActivityPath,
+    projectConfig.mainFilePath,
     makeImportPatch(androidConfig.packageImportPath)
   );
 };

local-cli/rnpm/link/src/android/unregisterNativeModule.js

@@ -36,12 +36,12 @@ module.exports = function unregisterNativeAndroidModule(
   revokePatch(projectConfig.stringsPath, makeStringsPatch(params, name));
 
   revokePatch(
-    projectConfig.mainActivityPath,
+    projectConfig.mainFilePath,
     makePackagePatch(androidConfig.packageInstance, params, name)
   );
 
   revokePatch(
-    projectConfig.mainActivityPath,
+    projectConfig.mainFilePath,
     makeImportPatch(androidConfig.packageImportPath)
   );
 };

local-cli/rnpm/link/test/android/patches/0.17/makeImportPatch.js

@@ -7,7 +7,7 @@ const makeImportPatch = require('../../../../src/android/patches/0.17/makeImport
 const applyPatch = require('../../../../src/android/patches/applyPatch');
 
 const projectConfig = {
-  mainActivityPath: 'MainActivity.java',
+  mainFilePath: 'MainActivity.java',
 };
 
 const packageImportPath = 'import some.example.project';

local-cli/rnpm/link/test/android/patches/0.17/makePackagePatch.js

@@ -7,7 +7,7 @@ const makePackagePatch = require('../../../../src/android/patches/0.17/makePacka
 const applyPatch = require('../../../../src/android/patches/applyPatch');
 
 const projectConfig = {
-  mainActivityPath: 'MainActivity.java',
+  mainFilePath: 'MainActivity.java',
 };
 
 const packageInstance = 'new SomeLibrary(${foo}, ${bar}, \'something\')';

local-cli/rnpm/link/test/android/patches/0.18/makeImportPatch.js

@@ -7,7 +7,7 @@ const makeImportPatch = require('../../../../src/android/patches/0.18/makeImport
 const applyPatch = require('../../../../src/android/patches/applyPatch');
 
 const projectConfig = {
-  mainActivityPath: 'MainActivity.java',
+  mainFilePath: 'MainActivity.java',
 };
 
 const packageImportPath = 'import some.example.project';

local-cli/rnpm/link/test/android/patches/0.18/makePackagePatch.js

@@ -7,7 +7,7 @@ const makePackagePatch = require('../../../../src/android/patches/0.18/makePacka
 const applyPatch = require('../../../../src/android/patches/applyPatch');
 
 const projectConfig = {
-  mainActivityPath: 'MainActivity.java',
+  mainFilePath: 'MainActivity.java',
 };
 
 const packageInstance = 'new SomeLibrary(${foo}, ${bar}, \'something\')';

local-cli/rnpm/link/test/android/patches/0.20/makeImportPatch.js

@@ -7,7 +7,7 @@ const makeImportPatch = require('../../../../src/android/patches/0.20/makeImport
 const applyPatch = require('../../../../src/android/patches/applyPatch');
 
 const projectConfig = {
-  mainActivityPath: 'MainActivity.java',
+  mainFilePath: 'MainActivity.java',
 };
 
 const packageImportPath = 'import some.example.project';

local-cli/rnpm/link/test/android/patches/0.20/makePackagePatch.js

@@ -7,7 +7,7 @@ const makePackagePatch = require('../../../../src/android/patches/0.20/makePacka
 const applyPatch = require('../../../../src/android/patches/applyPatch');
 
 const projectConfig = {
-  mainActivityPath: 'MainActivity.java',
+  mainFilePath: 'MainActivity.java',
 };
 
 const packageInstance = 'new SomeLibrary(${foo}, ${bar}, \'something\')';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native",
-  "version": "1000.0.0",
+  "version": "0.30.0",
   "description": "A framework for building native apps using React",
   "license": "BSD-3-Clause",
   "repository": {
@@ -204,4 +204,4 @@
     "react": "~15.2.0",
     "shelljs": "0.6.0"
   }
-}
+}

react.gradle

@@ -31,7 +31,9 @@ gradle.projectsEvaluated {
     productFlavors.each { productFlavorName ->
         buildTypes.each { buildTypeName ->
             // Create variant and target names
-            def targetName = "${productFlavorName.capitalize()}${buildTypeName.capitalize()}"
+            def flavorNameCapitalized = "${productFlavorName.capitalize()}"
+            def buildNameCapitalized = "${buildTypeName.capitalize()}"
+            def targetName = "${flavorNameCapitalized}${buildNameCapitalized}"
             def targetPath = productFlavorName ?
                     "${productFlavorName}/${buildTypeName}" :
                     "${buildTypeName}"
@@ -92,8 +94,8 @@ gradle.projectsEvaluated {
             currentBundleTask.dependsOn("merge${targetName}Resources")
             currentBundleTask.dependsOn("merge${targetName}Assets")
 
-            runBefore("processArmeabi-v7a${targetName}Resources", currentBundleTask)
-            runBefore("processX86${targetName}Resources", currentBundleTask)
+            runBefore("process${flavorNameCapitalized}Armeabi-v7a${buildNameCapitalized}Resources", currentBundleTask)
+            runBefore("process${flavorNameCapitalized}X86${buildNameCapitalized}Resources", currentBundleTask)
             runBefore("processUniversal${targetName}Resources", currentBundleTask)
             runBefore("process${targetName}Resources", currentBundleTask)
         }

website/core/Footer.js

@@ -0,0 +1,28 @@
+/**
+ * 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 Footer
+ */
+
+var React = require('React');
+
+function getGitHubPath(path) {
+  return 'https://github.com/facebook/react-native/blob/master/' + path;
+}
+
+var Footer = React.createClass({
+  render: function() {
+    return (
+      <p className="edit-page-block">
+        You can <a target="_blank" href={getGitHubPath(this.props.path)}>edit the content above on GitHub</a> and send us a pull request!
+      </p>
+    );
+  }
+});
+
+module.exports = Footer;

website/core/HeaderWithGithub.js

@@ -12,13 +12,8 @@
 var H = require('Header');
 var React = require('React');
 
-function getVersionedGithubPath(path, version) {
-  version = version || 'next';
-  return [
-    'https://github.com/facebook/react-native/blob',
-    version === 'next' ? 'master' : version + '-stable',
-    path
-  ].join('/');
+function getGitHubPath(path) {
+  return  'https://github.com/facebook/react-native/blob/master/' + path;
 }
 
 var HeaderWithGithub = React.createClass({
@@ -40,7 +35,7 @@ var HeaderWithGithub = React.createClass({
             <td style={{textAlign: 'right'}}>
               <a
                 target="_blank"
-                href={getVersionedGithubPath(this.props.path, this.context.version)}>
+                href={getGitHubPath(this.props.path)}>
                 Edit on GitHub
               </a>
             </td>

website/core/WebPlayer.js

@@ -57,7 +57,7 @@ var WebPlayer = React.createClass({
           style={{marginTop: 4}}
           width='880'
           height={this.parseParams(this.props.params).platform === 'android' ? '425' : '420'}
-          data-src={`//npmcdn.com/react-native-web-player@1.0.0/index.html${hash}`}
+          data-src={`//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.4/index.html${hash}`}
           frameBorder='0'
         />
       </div>

website/layout/AutodocsLayout.js

@@ -12,9 +12,9 @@
 'use strict';
 
 var DocsSidebar = require('DocsSidebar');
-var H = require('Header');
 var Header = require('Header');
 var HeaderWithGithub = require('HeaderWithGithub');
+var Footer = require('Footer');
 var Marked = require('Marked');
 var Prism = require('Prism');
 var React = require('React');
@@ -327,7 +327,7 @@ var ComponentDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Methods</H>
+        <Header level={3}>Methods</Header>
         <div className="props">
           {methods.filter((method) => {
             return method.name[0] !== '_';
@@ -358,7 +358,7 @@ var ComponentDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Type Definitions</H>
+        <Header level={3}>Type Definitions</Header>
         <div className="props">
           {typedefs.map((typedef) => {
             return this.renderTypeDef(typedef, namedTypes);
@@ -377,7 +377,7 @@ var ComponentDoc = React.createClass({
         <Marked>
           {content.description}
         </Marked>
-        <H level={3}>Props</H>
+        <Header level={3}>Props</Header>
         {this.renderProps(content.props, content.composes)}
         {this.renderMethods(content.methods, namedTypes)}
         {this.renderTypeDefs(content.typedef, namedTypes)}
@@ -409,7 +409,7 @@ var APIDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Methods</H>
+        <Header level={3}>Methods</Header>
         <div className="props">
           {methods.filter((method) => {
             return method.name[0] !== '_';
@@ -443,7 +443,7 @@ var APIDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Properties</H>
+        <Header level={3}>Properties</Header>
         <div className="props">
           {properties.filter((property) => {
             return property.name[0] !== '_';
@@ -504,7 +504,7 @@ var APIDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Type Definitions</H>
+        <Header level={3}>Type Definitions</Header>
         <div className="props">
           {typedefs.map((typedef) => {
             return this.renderTypeDef(typedef, namedTypes);
@@ -831,13 +831,11 @@ var Autodocs = React.createClass({
     }
     return (
       <div>
-        <HeaderWithGithub
-          title="Description"
-          path={'docs/' + docs.componentName + '.md'}
-        />
+        <Header level={1}>Description</Header>
         <Marked>
           {docs.fullDescription}
         </Marked>
+        <Footer path={'docs/' + docs.componentName + '.md'} />
       </div>
     );
   },
@@ -872,7 +870,7 @@ var Autodocs = React.createClass({
 
     return (
       <div>
-        {(docs.examples.length > 1) ? <H level={3}>Examples</H> : null}
+        {(docs.examples.length > 1) ? <Header level={3}>Examples</Header> : null}
         {docs.examples.map(example => this.renderExample(example, metadata))}
       </div>
     );
@@ -891,12 +889,9 @@ var Autodocs = React.createClass({
           <DocsSidebar metadata={metadata} />
           <div className="inner-content">
             <a id="content" />
-            <HeaderWithGithub
-              title={metadata.title}
-              level={1}
-              path={metadata.path}
-            />
+            <Header level={1}>{metadata.title}</Header>
             {content}
+            <Footer path={metadata.path} />
             {this.renderFullDescription(docs)}
             {this.renderExamples(docs, metadata)}
             <div className="docs-prevnext">

website/layout/DocsLayout.js

@@ -10,7 +10,8 @@
  */
 
 var DocsSidebar = require('DocsSidebar');
-var HeaderWithGithub = require('HeaderWithGithub');
+var Header = require('Header');
+var Footer = require('Footer');
 var Marked = require('Marked');
 var React = require('React');
 var Site = require('Site');
@@ -38,16 +39,13 @@ var DocsLayout = React.createClass({
           <DocsSidebar metadata={metadata} />
           <div className="inner-content">
             <a id="content" />
-            <HeaderWithGithub
-              title={metadata.title}
-              level={1}
-              path={'docs/' + metadata.filename}
-            />
+            <Header level={1}>{metadata.title}</Header>
             <Marked>{content}</Marked>
             <div className="docs-prevnext">
               {metadata.previous && <a className="docs-prev" href={'docs/' + metadata.previous + '.html#content'}>&larr; Prev</a>}
               {metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}
             </div>
+            <Footer path={'docs/' + metadata.filename} />
             <div className="survey">
               <div className="survey-image" />
               <p>

website/src/react-native/css/react-native.css

@@ -834,8 +834,8 @@ h2 {
 }
 
 .docs-prevnext {
-  padding-top: 40px;
-  padding-bottom: 40px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .button {
@@ -1580,56 +1580,58 @@ input#algolia-doc-search:focus {
   color: #3B3738;
 }
 
-.params, .props
-{
-    border-spacing: 0;
-    border: 0;
-    border-collapse: collapse;
+.params, .props {
+  border-spacing: 0;
+  border: 0;
+  border-collapse: collapse;
 }
 
 .params .name, .props .name, .name code {
-    color: #4D4E53;
+  color: #4D4E53;
 }
 
-.params td, .params th, .props td, .props th
-{
-    border: 1px solid #ddd;
-    margin: 0px;
-    text-align: left;
-    vertical-align: top;
-    padding: 4px 6px;
-    display: table-cell;
+.params td, .params th, .props td, .props th {
+  border: 1px solid #ddd;
+  margin: 0px;
+  text-align: left;
+  vertical-align: top;
+  padding: 4px 6px;
+  display: table-cell;
 }
 
-.params thead tr, .props thead tr
-{
-    background-color: hsl(198, 75%, 88%);
-    font-weight: bold;
+.params thead tr, .props thead tr {
+  background-color: hsl(198, 75%, 88%);
+  font-weight: bold;
 }
 
-.params .params thead tr, .props .props thead tr
-{
-    background-color: #fff;
-    font-weight: bold;
+.params .params thead tr, .props .props thead tr {
+  background-color: #fff;
+  font-weight: bold;
 }
 
 .params th, .props th { border-right: 1px solid #aaa; }
 .params thead .last, .props thead .last { border-right: 1px solid #ddd; }
 
 .params td.description > div > p:first-child,
-.props td.description > div > p:first-child
-{
-    margin-top: 0;
-    padding-top: 0;
+.props td.description > div > p:first-child {
+  margin-top: 0;
+  padding-top: 0;
 }
 
 .params td.description > p:last-child,
-.props td.description > p:last-child
-{
-    margin-bottom: 0;
-    padding-bottom: 0;
+.props td.description > p:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
 }
 
+.edit-page-block {
+  padding: 5px;
+  margin-bottom: 40px;
+  font-size: 12px;
+  color: #887766;
+  text-align: center;
+  background-color: rgba(5, 165, 209, 0.05);
+}
 
 /** Web player **/