Fix scrolling issue on iOS devices.

Summary:
It was not possible to scroll due to overlaying (and visually not present) docs navigation layer.

Fixes issue introduced in PR #7669, see this [comment](https://github.com/facebook/react-native/pull/7669#issuecomment-220784882)
Additionally, script makes sure only single target is "in" and closes any other target with "in" state.
Closes https://github.com/facebook/react-native/pull/7731

Differential Revision: D3344927

Pulled By: vjeux

fbshipit-source-id: b2c64d90a2a6e531a9be79b936d6a5da61a69b22

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

@@ -482,41 +482,52 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 }
 
 @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 * {

website/src/react-native/js/scripts.js

@@ -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;
     }
   }