Updated docs for 0.27

Author: reactjs-bot

css/react-native.css

@@ -481,42 +481,53 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   border-bottom: 0;
 }
 
-@media screen and (max-device-width: 960px) {
+@media only screen and (max-device-width: 1024px) {
+  @-webkit-keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+  @-moz-keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+  @-o-keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+  @keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+
   .nav-docs {
     position: fixed;
     z-index: 90;
-    top: 0;
+    top: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 53px 0 0 0;
     background: #3B3738;
-    /* Transition these properties */
-    transition: opacity 0.3s, visibility 0.3s;
-    visibility: hidden;
-    opacity: 0;
   }
 
   .nav-docs-viewport {
     border-top: 1px solid rgb(5, 165, 209);
-    height: 100%;
     padding: 25px;
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
-    top: -30px;
     position: relative;
-    transition: top 0.3s;
+    width: 100%;
+    height: 100%;
   }
 
   /* Active state */
   .nav-docs.in {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .nav-docs.in .nav-docs-viewport {
     top: 0;
+    -webkit-animation: slide-in 0.3s forwards;
+    -moz-animation: slide-in 0.3s forwards;
+    -o-animation: slide-in 0.3s forwards;
+    animation: slide-in 0.3s forwards;
   }
 
   .nav-docs * {
@@ -555,18 +566,38 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   }
 }
 
-@media screen and (min-device-width: 641px) and (max-device-width: 1024px) {
+/**
+ * Multicolumn layout for phone (landscape only) & tablet (regardless its screen orientation)/
+ */
+@media only screen and (min-device-width : 375px) and (max-device-width : 1024px) {
   .nav-docs-section ul {
     display: flex;
     flex-wrap: wrap;
   }
 
-  /* Display 2 columns on tablet */
+  .nav-docs-section li {
+    width: 100%;
+  }
+}
+
+/* 2 columns layout */
+@media
+  /*Phone, landscape screen orientation*/
+  only screen and (min-device-width : 375px) and (max-device-width : 1024px) and (orientation : landscape),
+  /*Tablet, portrait screen orientation*/
+  only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
   .nav-docs-section li {
     width: 50%;
   }
 }
 
+/* 3 columns layout on tablet (landscape screen orientation) */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
+  .nav-docs-section li {
+    width: 33%;
+  }
+}
+
 .nav-blog li {
   margin-bottom: 5px;
 }
@@ -1351,13 +1382,10 @@ div[data-twttr-id] iframe {
 }
 
 .survey-image {
-  position: absolute;
-  top: 10px;
-  height: 83px;
-  width: 120px;
+  float: left;
+  height: 128px;
+  width: 128px;
   background-image: url('../img/survey.png');
-  background-size: 272px 198px;
-  background-position: -8px -8px;
 }
 
 .survey p {

img/survey.png

@@ -8,7 +8,7 @@
 
   function init() {
     if (isMobile()) {
-      document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTargetNav);
+      document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTarget);
     }
 
     var backdrop = document.querySelector('.modal-backdrop');
@@ -46,12 +46,21 @@
     modal.classList.remove('modal-open');
   }
 
-  function toggleTargetNav(event) {
+  var toggledTarget;
+  function toggleTarget(event) {
     var target = document.body.querySelector(event.target.getAttribute('data-target'));
 
     if (target) {
       event.preventDefault();
-      target.classList.toggle('in');
+
+      if (toggledTarget === target) {
+        toggledTarget.classList.toggle('in');
+      } else {
+        toggledTarget && toggledTarget.classList.remove('in');
+        target.classList.add('in');
+      }
+
+      toggledTarget = target;
     }
   }
 

js/scripts.js

@@ -481,42 +481,53 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   border-bottom: 0;
 }
 
-@media screen and (max-device-width: 960px) {
+@media only screen and (max-device-width: 1024px) {
+  @-webkit-keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+  @-moz-keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+  @-o-keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+  @keyframes slide-in {
+    0% { top: -30px; opacity: 0; }
+    100% { top: 0; opacity: 1; }
+  }
+
   .nav-docs {
     position: fixed;
     z-index: 90;
-    top: 0;
+    top: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 53px 0 0 0;
     background: #3B3738;
-    /* Transition these properties */
-    transition: opacity 0.3s, visibility 0.3s;
-    visibility: hidden;
-    opacity: 0;
   }
 
   .nav-docs-viewport {
     border-top: 1px solid rgb(5, 165, 209);
-    height: 100%;
     padding: 25px;
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
-    top: -30px;
     position: relative;
-    transition: top 0.3s;
+    width: 100%;
+    height: 100%;
   }
 
   /* Active state */
   .nav-docs.in {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  .nav-docs.in .nav-docs-viewport {
     top: 0;
+    -webkit-animation: slide-in 0.3s forwards;
+    -moz-animation: slide-in 0.3s forwards;
+    -o-animation: slide-in 0.3s forwards;
+    animation: slide-in 0.3s forwards;
   }
 
   .nav-docs * {
@@ -555,18 +566,38 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   }
 }
 
-@media screen and (min-device-width: 641px) and (max-device-width: 1024px) {
+/**
+ * Multicolumn layout for phone (landscape only) & tablet (regardless its screen orientation)/
+ */
+@media only screen and (min-device-width : 375px) and (max-device-width : 1024px) {
   .nav-docs-section ul {
     display: flex;
     flex-wrap: wrap;
   }
 
-  /* Display 2 columns on tablet */
+  .nav-docs-section li {
+    width: 100%;
+  }
+}
+
+/* 2 columns layout */
+@media
+  /*Phone, landscape screen orientation*/
+  only screen and (min-device-width : 375px) and (max-device-width : 1024px) and (orientation : landscape),
+  /*Tablet, portrait screen orientation*/
+  only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
   .nav-docs-section li {
     width: 50%;
   }
 }
 
+/* 3 columns layout on tablet (landscape screen orientation) */
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
+  .nav-docs-section li {
+    width: 33%;
+  }
+}
+
 .nav-blog li {
   margin-bottom: 5px;
 }
@@ -1351,13 +1382,10 @@ div[data-twttr-id] iframe {
 }
 
 .survey-image {
-  position: absolute;
-  top: 10px;
-  height: 83px;
-  width: 120px;
+  float: left;
+  height: 128px;
+  width: 128px;
   background-image: url('../img/survey.png');
-  background-size: 272px 198px;
-  background-position: -8px -8px;
 }
 
 .survey p {

releases/0.27/css/react-native.css

@@ -8,7 +8,7 @@
 
   function init() {
     if (isMobile()) {
-      document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTargetNav);
+      document.querySelector('.nav-site-wrapper a[data-target]').addEventListener('click', toggleTarget);
     }
 
     var backdrop = document.querySelector('.modal-backdrop');
@@ -46,12 +46,21 @@
     modal.classList.remove('modal-open');
   }
 
-  function toggleTargetNav(event) {
+  var toggledTarget;
+  function toggleTarget(event) {
     var target = document.body.querySelector(event.target.getAttribute('data-target'));
 
     if (target) {
       event.preventDefault();
-      target.classList.toggle('in');
+
+      if (toggledTarget === target) {
+        toggledTarget.classList.toggle('in');
+      } else {
+        toggledTarget && toggledTarget.classList.remove('in');
+        target.classList.add('in');
+      }
+
+      toggledTarget = target;
     }
   }
 

releases/0.27/img/survey.png

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Documentation archive – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Documentation archive – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/0.27/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.27</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent nosidebar"><div class="inner-content"><h1>React Native Versions</h1><p>React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.</p><table class="versions"><tbody><tr><th>master</th><td><a href="/react-native/releases/next">Docs</a></td><td></td></tr><tr><th>(current) 0.27</th><td><a href="/react-native">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.27.0">Release Notes</a></td></tr><tr><th>0.26</th><td><a href="/react-native/releases/0.26">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.26.0">Release Notes</a></td></tr><tr><th>0.25</th><td><a href="/react-native/releases/0.25">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.25.0">Release Notes</a></td></tr><tr><th>0.24</th><td><a href="/react-native/releases/0.24">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.24.0">Release Notes</a></td></tr><tr><th>0.23</th><td><a href="/react-native/releases/0.23">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.23.0">Release Notes</a></td></tr><tr><th>0.22</th><td><a href="/react-native/releases/0.22">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.22.0">Release Notes</a></td></tr><tr><th>0.21</th><td><a href="/react-native/releases/0.21">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.21.0">Release Notes</a></td></tr><tr><th>0.20</th><td><a href="/react-native/releases/0.20">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.20.0">Release Notes</a></td></tr><tr><th>0.19</th><td><a href="/react-native/releases/0.19">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.19.0">Release Notes</a></td></tr><tr><th>0.18</th><td><a href="/react-native/releases/0.18">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.18.0">Release Notes</a></td></tr></tbody></table></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Documentation archive – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Documentation archive – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/0.27/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.27</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent nosidebar"><div class="inner-content"><h1>React Native Versions</h1><p>React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.</p><table class="versions"><tbody><tr><th>master</th><td><a href="/react-native/releases/next">Docs</a></td><td></td></tr><tr><th>0.28-rc</th><td><a href="/react-native/releases/0.28">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.28.0-rc">Release Notes</a></td></tr><tr><th>(current) 0.27</th><td><a href="/react-native">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.27.0">Release Notes</a></td></tr><tr><th>0.26</th><td><a href="/react-native/releases/0.26">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.26.0">Release Notes</a></td></tr><tr><th>0.25</th><td><a href="/react-native/releases/0.25">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.25.0">Release Notes</a></td></tr><tr><th>0.24</th><td><a href="/react-native/releases/0.24">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.24.0">Release Notes</a></td></tr><tr><th>0.23</th><td><a href="/react-native/releases/0.23">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.23.0">Release Notes</a></td></tr><tr><th>0.22</th><td><a href="/react-native/releases/0.22">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.22.0">Release Notes</a></td></tr><tr><th>0.21</th><td><a href="/react-native/releases/0.21">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.21.0">Release Notes</a></td></tr><tr><th>0.20</th><td><a href="/react-native/releases/0.20">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.20.0">Release Notes</a></td></tr><tr><th>0.19</th><td><a href="/react-native/releases/0.19">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.19.0">Release Notes</a></td></tr><tr><th>0.18</th><td><a href="/react-native/releases/0.18">Docs</a></td><td><a href="https://github.com/facebook/react-native/releases/tag/v0.18.0">Release Notes</a></td></tr></tbody></table></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)