Merge branch 'master' of https://github.com/facebook/react-native-web…

…site into facebook-master

# Conflicts:
#	website/core/Footer.js

docs/_getting-started-linux-android.md

@@ -18,7 +18,7 @@ Setting up your development environment can be somewhat tedious if you're new to
 
 <h4>1. Install Android Studio</h4>
 
-[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:
+[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
 
 - `Android SDK`
 - `Android SDK Platform`

docs/_getting-started-macos-android.md

@@ -33,7 +33,7 @@ Setting up your development environment can be somewhat tedious if you're new to
 
 <h4>1. Install Android Studio</h4>
 
-[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:
+[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
 
 - `Android SDK`
 - `Android SDK Platform`

docs/_getting-started-windows-android.md

@@ -6,7 +6,9 @@ While you can use any editor of your choice to develop your app, you will need t
 
 <h3>Node, JDK</h3>
 
-We recommend installing Node via [Chocolatey](https://chocolatey.org), a popular package manager for Windows.
+We recommend installing Node via [Chocolatey](https://chocolatey.org), a popular package manager for Windows. 
+
+If you want to be able to switch between different Node versions, you might want to install Node via [nvm-windows](https://github.com/coreybutler/nvm-windows), a Node version manager for Windows.
 
 React Native also requires [Java SE Development Kit (JDK)](https://openjdk.java.net/projects/jdk8/), which can be installed using Chocolatey as well.
 
@@ -28,7 +30,7 @@ Setting up your development environment can be somewhat tedious if you're new to
 
 <h4>1. Install Android Studio</h4>
 
-[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio intallation wizard, make sure the boxes next to all of the following items are checked:
+[Download and install Android Studio](https://developer.android.com/studio/index.html). While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
 
 - `Android SDK`
 - `Android SDK Platform`

docs/building-for-tv.md

@@ -181,7 +181,7 @@ class Game2048 extends React.Component {
 
 - _Back navigation with the TV remote menu button_: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.
 
-- _TabBarIOS behavior_: The `TabBarIOS` component wraps the native `UITabBar` API, which works differently on Apple TV. To avoid jittery re-rendering of the tab bar in tvOS (see [this issue](https://github.com/facebook/react-native/issues/15081)), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.
+- _TabBarIOS behavior_: The `TabBarIOS` component wraps the native `UITabBar` API, which works differently on Apple TV. To avoid jittery re-rendering of the tab bar in tvOS (see [this issue](https://github.com/facebook/react-native/issues/15081)), the selected tab bar item can only be set from JavaScript on initial render, and is controlled after that by the user through native code.
 
 - _Known issues_:
 

docs/drawerlayoutandroid.md

@@ -8,10 +8,11 @@ React component that wraps the platform `DrawerLayout` (Android only). The Drawe
 ## Example
 
 ```SnackPlayer name=DrawerLayoutAndroid%20Component%20Example&supportedPlatforms=android
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Button, DrawerLayoutAndroid, Text, StyleSheet, View } from "react-native";
 
 const App = () => {
+  const drawer = useRef(null);
   const [drawerPosition, setDrawerPosition] = useState("left");
   const changeDrawerPosition = () => {
     if (drawerPosition === "left") {
@@ -21,29 +22,38 @@ const App = () => {
     }
   };
 
-  const navigationView = (
-    <View style={styles.navigationContainer}>
-      <Text style={{ margin: 10, fontSize: 15 }}>I'm in the Drawer!</Text>
+  const navigationView = () => (
+    <View style={[styles.container, styles.navigationContainer]}>
+      <Text style={styles.paragraph}>I'm in the Drawer!</Text>
+      <Button
+        title="Close drawer"
+        onPress={() => drawer.current.closeDrawer()}
+      />
     </View>
   );
 
   return (
     <DrawerLayoutAndroid
+      ref={drawer}
       drawerWidth={300}
       drawerPosition={drawerPosition}
-      renderNavigationView={() => navigationView}
+      renderNavigationView={navigationView}
     >
       <View style={styles.container}>
-        <Text style={{ margin: 10, fontSize: 15 }}>
-          DrawerLayoutAndroid example
+        <Text style={styles.paragraph}>
+          Drawer on the {drawerPosition}!
         </Text>
         <Button
           title="Change Drawer Position"
           onPress={() => changeDrawerPosition()}
         />
-        <Text style={{ margin: 10, fontSize: 15 }}>
-          Drawer on the {drawerPosition}! Swipe from the side to see!
+        <Text style={styles.paragraph}>
+          Swipe from the side or press button below to see it!
         </Text>
+        <Button
+          title="Open drawer"
+          onPress={() => drawer.current.openDrawer()}
+        />
       </View>
     </DrawerLayoutAndroid>
   );
@@ -54,15 +64,15 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    paddingTop: 50,
-    backgroundColor: "#ecf0f1",
-    padding: 8
+    padding: 16
   },
   navigationContainer: {
-    flex: 1,
-    paddingTop: 50,
-    backgroundColor: "#fff",
-    padding: 8
+    backgroundColor: "#ecf0f1"
+  },
+  paragraph: {
+    padding: 16,
+    fontSize: 15,
+    textAlign: "center"
   }
 });
 

docs/hermes.md

@@ -13,6 +13,10 @@ First, ensure you're using at least version 0.60.4 of React Native.
 
 If you have an existing app based on an earlier version of React Native, you will have to upgrade it first. See [Upgrading to new React Native Versions](/docs/upgrading) for how to do this. Make especially sure that all changes to `android/app/build.gradle` have been applied, as detailed by the [React Native upgrade helper](https://react-native-community.github.io/upgrade-helper/?from=0.59.0). After upgrading the app, make sure everything works before trying to switch to Hermes.
 
+> ## Note for RN compatibility.
+>
+> Each Hermes release is aimed at a specific RN version. The rule of thumb is to always follow [Hermes releases](https://github.com/facebook/hermes/releases) strictly. Version mismatch can result in instant crash of your apps in the worst case scenario.
+
 > ## Note for Windows users.
 >
 > Hermes requires [Microsoft Visual C++ 2015 Redistributable](https://www.microsoft.com/en-us/download/details.aspx?id=48145)
@@ -70,9 +74,11 @@ $ npx react-native run-android --variant release
 
 This will compile JavaScript to bytecode during build time which will improve your app's startup speed on device.
 
-## Debugging Hermes using Google Chrome's DevTools
+## Debugging JS on Hermes using Google Chrome's DevTools
+
+Hermes supports the Chrome debugger by implementing the Chrome inspector protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a real, physical, device.
 
-Hermes supports the Chrome debugger by implementing the Chrome inspector protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or device.
+> Note that this is very different with the "Remote JS Debugging" from the In-App Developer Menu documented in the [Debugging](debugging#debugging-using-a-custom-javascript-debugger) section, which actually runs the JS code on Chrome's V8 on your development machine (laptop or desktop).
 
 Chrome connects to Hermes running on device via Metro, so you'll need to know where Metro is listening. Typically this will be on `localhost:8081`, but this is [configurable](https://facebook.github.io/metro/docs/configuration). When running `yarn start` the address is written to stdout on startup.
 

docs/image.md

@@ -345,7 +345,7 @@ Invoked when a partial load of the image is complete. The definition of what con
 
 ---
 
-### `onProgress` <div class="label ios">iOS</div>
+### `onProgress`
 
 Invoked on download progress.
 

docs/native-components-android.md

@@ -1,6 +1,6 @@
 ---
 id: native-components-android
-title: Native UI Components
+title: Android Native UI Components
 ---
 
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.

docs/native-components-ios.md

@@ -1,6 +1,6 @@
 ---
 id: native-components-ios
-title: Native UI Components
+title: iOS Native UI Components
 ---
 
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.
@@ -65,7 +65,7 @@ render() {
 }
 ```
 
-Make sure to use `RNTMap` here. We want to require the manager here, which will expose the view of our manager for use in Javascript.
+Make sure to use `RNTMap` here. We want to require the manager here, which will expose the view of our manager for use in JavaScript.
 
 **Note:** When rendering, don't forget to stretch the view, otherwise you'll be staring at a blank screen.