diff --git a/website/core/Marked.js b/website/core/Marked.js
index 7d3fa4626449eb..d123b874bdb636 100644
--- a/website/core/Marked.js
+++ b/website/core/Marked.js
@@ -8,6 +8,7 @@
var React = require('React');
var Prism = require('Prism');
+var WebPlayer = require('WebPlayer');
var Header = require('Header');
/**
@@ -827,7 +828,16 @@ Parser.prototype.tok = function() {
);
}
case 'code': {
- return {this.token.text};
+ var lang = this.token.lang
+ , text = this.token.text;
+
+ if (lang && lang.indexOf('ReactNativeWebPlayer') === 0) {
+ return (
+ {text}
+ );
+ }
+
+ return {text};
}
case 'table': {
var table = []
diff --git a/website/core/WebPlayer.js b/website/core/WebPlayer.js
new file mode 100644
index 00000000000000..2e985388b6b8fa
--- /dev/null
+++ b/website/core/WebPlayer.js
@@ -0,0 +1,68 @@
+/**
+ * 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 WebPlayer
+ */
+
+var React = require('React');
+var Prism = require('Prism');
+
+/**
+ * Use the WebPlayer by including a ```ReactNativeWebPlayer``` block in markdown.
+ *
+ * Optionally, include url parameters directly after the block's language. For
+ * the complete list of url parameters, see: https://github.com/dabbott/react-native-web-player
+ *
+ * E.g.
+ * ```ReactNativeWebPlayer?platform=android
+ * import React from 'react';
+ * import { AppRegistry, Text } from 'react-native';
+ *
+ * const App = () => Hello World!;
+ *
+ * AppRegistry.registerComponent('MyApp', () => App);
+ * ```
+ */
+var WebPlayer = React.createClass({
+ parseParams: function(paramString) {
+ var params = {};
+
+ if (paramString) {
+ var pairs = paramString.split('&');
+ for (var i = 0; i < pairs.length; i++) {
+ var pair = pairs[i].split('=');
+ params[pair[0]] = pair[1];
+ }
+ }
+
+ return params;
+ },
+
+ render: function() {
+ var hash = `#code=${encodeURIComponent(this.props.children)}&runApp=AwesomeProject`;
+
+ if (this.props.params) {
+ hash += `&${this.props.params}`;
+ }
+
+ return (
+
+
{this.props.children}
+
+
+ );
+ },
+});
+
+module.exports = WebPlayer;
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index a08679ffde49e1..2436c14019ff73 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -1557,3 +1557,18 @@ input#algolia-doc-search:focus {
margin-bottom: 0;
padding-bottom: 0;
}
+
+
+/** Web player **/
+
+.web-player > iframe, .web-player > .prism {
+ display: none;
+}
+
+.web-player.desktop > iframe {
+ display: block;
+}
+
+.web-player.mobile > .prism {
+ display: block;
+}
diff --git a/website/src/react-native/js/scripts.js b/website/src/react-native/js/scripts.js
index e59e8c1f4a66dd..7d16fa1fb51a2a 100644
--- a/website/src/react-native/js/scripts.js
+++ b/website/src/react-native/js/scripts.js
@@ -7,10 +7,29 @@
document.addEventListener('DOMContentLoaded', init);
function init() {
- if (isMobile()) {
+ var mobile = isMobile();
+
+ if (mobile) {
document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTarget);
}
+ var webPlayerList = document.querySelectorAll('.web-player');
+
+ // Either show interactive or static code block, depending on desktop or mobile
+ for (var i = 0; i < webPlayerList.length; ++i) {
+ webPlayerList[i].classList.add(mobile ? 'mobile' : 'desktop');
+
+ if (! mobile) {
+
+ // Determine location to look up required assets
+ var assetRoot = encodeURIComponent(document.location.origin + '/react-native');
+
+ // Set iframe src. Do this dynamically so the iframe never loads on mobile.
+ var iframe = webPlayerList[i].querySelector('iframe');
+ iframe.src = iframe.getAttribute('data-src') + '&assetRoot=' + assetRoot;
+ }
+ }
+
var backdrop = document.querySelector('.modal-backdrop');
if (!backdrop) return;