reactnativecn
diff --git a/‎docs/accessibility.md
Lines changed: 69 additions & 65 deletions b/‎docs/accessibility.md
Lines changed: 69 additions & 65 deletions
diff --git a/‎docs/accessibilityinfo.md
Lines changed: 15 additions & 13 deletions b/‎docs/accessibilityinfo.md
Lines changed: 15 additions & 13 deletions
diff --git a/‎docs/alert.md
Lines changed: 26 additions & 28 deletions b/‎docs/alert.md
Lines changed: 26 additions & 28 deletions
diff --git a/‎docs/appstate.md
Lines changed: 15 additions & 6 deletions b/‎docs/appstate.md
Lines changed: 15 additions & 6 deletions
diff --git a/‎docs/debugging.md
Lines changed: 20 additions & 13 deletions b/‎docs/debugging.md
Lines changed: 20 additions & 13 deletions
diff --git a/‎docs/drawerlayoutandroid.md
Lines changed: 2 additions & 2 deletions b/‎docs/drawerlayoutandroid.md
Lines changed: 2 additions & 2 deletions
@@ -20,8 +20,7 @@ Sometimes it's useful to know whether or not the device has a screen reader that
 
 <block class="functional syntax" />
 
-```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example
-
+```SnackPlayer name=AccessibilityInfo%20Function%20Component%20Example&supportedPlatforms=android,ios
 import React, { useState, useEffect } from "react";
 import { AccessibilityInfo, View, Text, StyleSheet } from "react-native";
 
@@ -39,18 +38,22 @@ const App = () => {
       handleScreenReaderToggled
     );
 
-    AccessibilityInfo.fetch().then(reduceMotionEnabled => {
-      setReduceMotionEnabled(reduceMotionEnabled);
-    });
-    AccessibilityInfo.fetch().then(screenReaderEnabled => {
-      setScreenReaderEnabled(screenReaderEnabled);
-    });
+    AccessibilityInfo.isReduceMotionEnabled().then(
+      reduceMotionEnabled => {
+        setReduceMotionEnabled(reduceMotionEnabled);
+      }
+    );
+    AccessibilityInfo.isScreenReaderEnabled().then(
+      screenReaderEnabled => {
+        setScreenReaderEnabled(screenReaderEnabled);
+      }
+    );
+
     return () => {
       AccessibilityInfo.removeEventListener(
         "reduceMotionChanged",
         handleReduceMotionToggled
       );
-
       AccessibilityInfo.removeEventListener(
         "screenReaderChanged",
         handleScreenReaderToggled
@@ -94,8 +97,7 @@ export default App;
 
 <block class="classical syntax" />
 
-```SnackPlayer name=AccessibilityInfo%20Class%20Component%20Example
-
+```SnackPlayer name=AccessibilityInfo%20Class%20Component%20Example&supportedPlatforms=android,ios
 import React, { Component } from 'react';
 import { AccessibilityInfo, View, Text, StyleSheet } from 'react-native';
 
@@ -115,10 +117,10 @@ class AccessibilityStatusExample extends Component {
       this._handleScreenReaderToggled
     );
 
-    AccessibilityInfo.fetch().then(reduceMotionEnabled => {
+    AccessibilityInfo.isReduceMotionEnabled().then(reduceMotionEnabled => {
       this.setState({ reduceMotionEnabled });
     });
-    AccessibilityInfo.fetch().then(screenReaderEnabled => {
+    AccessibilityInfo.isScreenReaderEnabled().then(screenReaderEnabled => {
       this.setState({ screenReaderEnabled });
     });
   }
 
@@ -40,8 +40,7 @@ const App = () => {
           style: "cancel"
         },
         { text: "OK", onPress: () => console.log("OK Pressed") }
-      ],
-      { cancelable: false }
+      ]
     );
 
   const createThreeButtonAlert = () =>
@@ -59,8 +58,7 @@ const App = () => {
           style: "cancel"
         },
         { text: "OK", onPress: () => console.log("OK Pressed") }
-      ],
-      { cancelable: false }
+      ]
     );
 
   return (
@@ -101,8 +99,7 @@ class App extends Component {
           style: "cancel"
         },
         { text: "OK", onPress: () => console.log("OK Pressed") }
-      ],
-      { cancelable: false }
+      ]
     );
 
   createThreeButtonAlert = () =>
@@ -120,8 +117,7 @@ class App extends Component {
           style: "cancel"
         },
         { text: "OK", onPress: () => console.log("OK Pressed") }
-      ],
-      { cancelable: false }
+      ]
     );
 
   render() {
@@ -163,31 +159,33 @@ On Android at most three buttons can be specified. Android has a concept of a ne
 - Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
 - Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
 
-By default alerts on Android can be dismissed by tapping outside of the alert box. This event can be handled by providing an optional `options` parameter, with an `onDismiss` callback property `{ onDismiss: () => {} }`.
+Alerts on Android can be dismissed by tapping outside of the alert box. It is disabled by default and can be enabled by providing an optional `options` parameter with the cancelable property set to true i.e. `{ cancelable: true }`.
 
-Alternatively, the dismissing behavior can be disabled altogether by providing an optional options parameter with the cancelable property set to false i.e. `{ cancelable: false }`.
+The cancel event can be handled by providing an `onDismiss` callback property `{ onDismiss: () => {} }` inside the `options` parameter.
 
 Example usage:
 
 ```jsx
-// Works on both Android and iOS
-Alert.alert(
-  'Alert Title',
-  'My Alert Msg',
-  [
-    {
-      text: 'Ask me later',
-      onPress: () => console.log('Ask me later pressed')
-    },
-    {
-      text: 'Cancel',
-      onPress: () => console.log('Cancel Pressed'),
-      style: 'cancel'
-    },
-    { text: 'OK', onPress: () => console.log('OK Pressed') }
-  ],
-  { cancelable: false }
-);
+Alert.alert('Alert Title', 'My Alert Msg', [
+  {
+    text: 'Ask me later',
+    onPress: () => console.log('Ask me later pressed')
+  },
+  {
+    text: 'Cancel',
+    onPress: () => console.log('Cancel Pressed'),
+    style: 'cancel'
+  },
+  { text: 'OK', onPress: () => console.log('OK Pressed') },
+  {
+    // cancelable and onDismiss only work on Android.
+    cancelable: true,
+    onDismiss: () =>
+      console.log(
+        'This alert was dismissed by tapping outside of the alert dialog.'
+      )
+  }
+]);
 ```
 
 ---
 
@@ -36,11 +36,12 @@ To see the current state, you can check `AppState.currentState`, which will be k
 <block class="functional syntax" />
 
 ```SnackPlayer name=AppState%20Function%20Component%20Example
-import React, { useEffect, useRef } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { AppState, StyleSheet, Text, View } from "react-native";
 
 const AppStateExample = () => {
   const appState = useRef(AppState.currentState);
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
 
   useEffect(() => {
     AppState.addEventListener("change", _handleAppStateChange);
@@ -51,15 +52,21 @@ const AppStateExample = () => {
   }, []);
 
   const _handleAppStateChange = (nextAppState) => {
-    if (appState.current.match(/inactive|background/) && nextAppState === "active") {
+    if (
+      appState.current.match(/inactive|background/) &&
+      nextAppState === "active"
+    ) {
       console.log("App has come to the foreground!");
     }
+
     appState.current = nextAppState;
+    setAppStateVisible(appState.current);
+    console.log("AppState", appState.current);
   };
 
   return (
     <View style={styles.container}>
-      <Text>Current state is: {appState.current}</Text>
+      <Text>Current state is: {appStateVisible}</Text>
     </View>
   );
 };
@@ -68,13 +75,15 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: "center",
-    alignItems: "center"
-  }
+    alignItems: "center",
+  },
 });
 
 export default AppStateExample;
 ```
 
+If you don't want to see the AppState update from `active` to `inactive` on iOS you can remove the state variable and use the `appState.current` value.
+
 <block class="classical syntax" />
 
 ```SnackPlayer name=AppState%20Class%20Component%20Example
@@ -126,7 +135,7 @@ export default AppStateExample;
 
 <block class="endBlock syntax" />
 
-This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state, and the null state will happen only momentarily.
+This example will only ever appear to say "Current state is: active" because the app is only visible to the user when in the `active` state, and the null state will happen only momentarily. If you want to experiment with the code we recommend to use your own device instead of embedded preview.
 
 ---
 
 
@@ -19,30 +19,37 @@ Fast Refresh is a React Native feature that allows you to get near-instant feedb
 
 React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.
 
-## In-app Errors and Warnings
+## LogBox
 
-Errors and warnings are displayed inside your app in development builds.
+Errors and warnings in development builds are displayed in LogBox inside your app.
 
-### Errors
+> LogBox is automatically disabled in release (production) builds.
 
-In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use `console.error()` to manually trigger one.
+### Console Errors and Warnings
 
-### Warnings
+Console errors and warnings are displayed as on-screen notifications with a red or yellow badge, and the number of errors or warning in the console respectively. To view a console error or warnings, tap the notification to view the full screen information about the log and to paginiate through all of the logs in the console.
 
-Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
+These notifications can be hidden using `LogBox.ignoreAllLogs()`. This is useful when giving product demos, for example. Additionally, notifications can be hidden on a per-log basis via `LogBox.ignoreLogs()`. This is useful when there's a noisy warning that cannot be fixed, like those in a third-party dependency.
 
-As with a RedBox, you can use `console.warn()` to trigger a YellowBox.
-
-YellowBoxes can be disabled during development by using `console.disableYellowBox = true;`. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored:
+> Ignore logs as a last resort and create a task to fix any logs that are ignored.
 
 ```jsx
-import { YellowBox } from 'react-native';
-YellowBox.ignoreWarnings(['Warning: ...']);
+import { LogBox } from 'react-native';
+
+// Ignore log notification by message:
+LogBox.ignoreLogs(['Warning: ...']);
+
+// Ignore all log notifications:
+LogBox.ignoreAllLogs();
 ```
 
-In CI/Xcode, YellowBoxes can also be disabled by setting the `IS_TESTING` environment variable.
+### Unhandled Errors
+
+Unhanded JavaScript errors such as `undefined is not a function` will automatically open a full screen LogBox error with the source of the error. These errors are dismissable and minimizable so that you can see the state of your app when these errors occur, but should always be addressed.
+
+### Syntax Erorrs
 
-> RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
+Syntax errors will automatically open a full screen LogBox error with the source of the syntax error. This error is not dismissable because it represents invalid JavaScript execution that must be fixed before continuing with your app. To dismiss these errors, fix the syntax error and either save to automatically dismiss (with Fast Refresh enabled) or cmd+r to reload (with Fast Refresh disabled).
 
 ## Chrome Developer Tools
 
 
@@ -54,13 +54,13 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    paddingTop: "50px",
+    paddingTop: 50,
     backgroundColor: "#ecf0f1",
     padding: 8
   },
   navigationContainer: {
     flex: 1,
-    paddingTop:  "50px",
+    paddingTop: 50,
     backgroundColor: "#fff",
     padding: 8
   }