Updated docs for next

releases/next/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;
+}

releases/next/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;