[JS Polyfills] Also call the original console methods if they exist

docs/NativeComponentsIOS.md

@@ -294,7 +294,7 @@ Since all our native react views are subclasses of `UIView`, most style attribut
 ```javascript
 // DatePickerIOS.ios.js
 
-var RCTDatePickerIOSConsts = require('NativeModules').UIManager.RCTDatePicker.Constants;
+var RCTDatePickerIOSConsts = require('react-native').NativeModules.UIManager.RCTDatePicker.Constants;
 ...
   render: function() {
     return (

docs/NativeModulesIOS.md

@@ -50,7 +50,7 @@ RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
 Now, from your JavaScript file you can call the method like this:
 
 ```javascript
-var CalendarManager = require('NativeModules').CalendarManager;
+var CalendarManager = require('react-native').NativeModules.CalendarManager;
 CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');
 ```
 

docs/Timers.md

@@ -57,6 +57,8 @@ InteractionManager.clearInteractionHandle(handle);
 
 We found out that the primary cause of fatals in apps created with React Native was due to timers firing after a component was unmounted. To solve this recurring issue, we introduced `TimerMixin`. If you include `TimerMixin`, then you can replace your calls to `setTimeout(fn, 500)` with `this.setTimeout(fn, 500)` (just prepend `this.`) and everything will be properly cleaned up for you when the component unmounts.
 
+This library does not ship with React Native - in order to use it on your project, you will need to install it with `npm i react-timer-mixin --save` from your project directory.
+
 ```javascript
 var TimerMixin = require('react-timer-mixin');
 

packager/react-packager/src/DependencyResolver/polyfills/console.js

@@ -367,6 +367,9 @@
   };
 
   function setupConsole(global) {
+
+    var originalConsole = global.console;
+
     if (!global.nativeLoggingHook) {
       return;
     }
@@ -456,6 +459,17 @@
       table: consoleTablePolyfill
     };
 
+    // If available, also call the original `console` method since that is
+    // sometimes useful, Ex. On OS X, this will let you see rich output to
+    // the Safari REPL console
+    Object.keys(global.console).forEach(methodName => {
+      var reactNativeMethod = global.console[methodName];
+      global.console[methodName] = function() {
+        originalConsole[methodName].apply(originalConsole, arguments);
+        reactNativeMethod.apply(global.console, arguments);
+      }
+    });
+
   }
 
   if (typeof module !== 'undefined') {

website/layout/AutodocsLayout.js

@@ -264,6 +264,20 @@ var APIDoc = React.createClass({
 });
 
 var HeaderWithGithub = React.createClass({
+
+  renderRunnableLink: function() {
+    if (this.props.metadata && this.props.metadata.runnable) {
+      return (
+        <a
+          className="run-example"
+          target="_blank"
+          href={'https://rnplay.org/apps/l3Zi2g?route='+this.props.metadata.title+'&file=' + this.props.metadata.title+ "Example.js"}>
+          Run this example
+        </a>
+      );
+    }
+  },
+
   render: function() {
     return (
       <H level={3} toSlug={this.props.title}>
@@ -272,6 +286,7 @@ var HeaderWithGithub = React.createClass({
           href={'https://github.com/facebook/react-native/blob/master/' + this.props.path}>
           Edit on GitHub
         </a>
+        {this.renderRunnableLink()}
         {this.props.title}
       </H>
     );
@@ -296,7 +311,7 @@ var Autodocs = React.createClass({
     );
   },
 
-  renderExample: function(docs) {
+  renderExample: function(docs, metadata) {
     if (!docs.example) {
       return;
     }
@@ -306,6 +321,7 @@ var Autodocs = React.createClass({
         <HeaderWithGithub
           title="Examples"
           path={docs.example.path}
+          metadata={metadata}
         />
         <Prism>
           {docs.example.content.replace(/^[\s\S]*?\*\//, '').trim()}
@@ -330,7 +346,7 @@ var Autodocs = React.createClass({
             <h1>{metadata.title}</h1>
             {content}
             {this.renderFullDescription(docs)}
-            {this.renderExample(docs)}
+            {this.renderExample(docs, metadata)}
             <div className="docs-prevnext">
               {metadata.previous && <a className="docs-prev" href={metadata.previous + '.html#content'}>&larr; Prev</a>}
               {metadata.next && <a className="docs-next" href={metadata.next + '.html#content'}>Next &rarr;</a>}

website/server/extractDocs.js

@@ -44,6 +44,16 @@ function getExample(componentName) {
   };
 }
 
+// Determines whether a component should have a link to a runnable example
+
+function isRunnable(componentName) {
+  if (componentName === 'AlertIOS') {
+    return true;
+  }
+
+  return false;
+}
+
 // Hide a component from the sidebar by making it return false from
 // this function
 function shouldDisplayInSidebar(componentName) {
@@ -99,6 +109,7 @@ function componentsToMarkdown(type, json, filepath, i, styles) {
     'permalink: docs/' + slugify(componentName) + '.html',
     'next: ' + next,
     'sidebar: ' + shouldDisplayInSidebar(componentName),
+    'runnable:' + isRunnable(componentName),
     '---',
     JSON.stringify(json, null, 2),
   ].filter(function(line) { return line; }).join('\n');

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

@@ -973,6 +973,12 @@ div[data-twttr-id] iframe {
   float: right;
 }
 
+.run-example {
+  font-size: 15px;
+  float: right;
+  margin-right: 20px;
+}
+
 #content {
   display: none;
 }
@@ -1043,4 +1049,3 @@ div[data-twttr-id] iframe {
     margin: 0;
   }
 }
-