☰

Reader-Friendly React Native Docs

Save screen space on React Native Document for better reading experiences, as it should be.

  1. // ==UserScript==
  2. // @name         Reader-Friendly React Native Docs
  3. // @namespace    af-rndoc-cleanify
  4. // @version      0.1
  5. // @description  Save screen space on React Native Document for better reading experiences, as it should be.
  6. // @author       Paranoid_AF
  7. // @match        https://reactnative.dev/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.     // Remove announcement.
  14.     document.querySelector(".announcement").style.display = "none";
  15.     document.querySelector(".headerWrapper.wrapper").style.paddingTop = "0";
  16.     document.querySelector(".navPusher").style.paddingTop = "60px";
  17.     document.querySelector(".docsNavContainer").style.top = "0";
  18.     document.querySelector(".docsNavContainer").style.height = "100vh";
  19.     // Add animations to nav bar
  20.     document.querySelector(".fixedHeaderContainer").style.top = "0";
  21.     document.querySelector(".fixedHeaderContainer").style.transition = "top .3s";
  22.     // Hide nav bar when scroll down.
  23.     var lastScroll = 0;
  24.     window.addEventListener("DOMContentLoaded", function(e){
  25.         lastScroll = window.scrollY;
  26.     })
  27.     document.addEventListener("scroll", function(e){
  28.         if(lastScroll < window.scrollY){
  29.            document.querySelector(".fixedHeaderContainer").style.top = "-60px";
  30.         }else{
  31.            document.querySelector(".fixedHeaderContainer").style.top = "0";
  32.         }
  33.         lastScroll = window.scrollY;
  34.     });
  35. })();