From 8344ec8ed41280f413f5f01d6db9fb4b04daf89d Mon Sep 17 00:00:00 2001
From: Chris Winter <chris-winter@live.de>
Date: Thu, 2 Jul 2020 10:01:57 +0200
Subject: [PATCH 1/4] Fixed the Function Component Example

We experienced that the documentation was faulty so after we at @enpit found a fix, we wanted to share it with you.
The old trigger `appState.current.match(/inactive|background/) && nextAppState === "active"` would never work because the useState hook doesn't update the state fast enough for the function to work. The solution is to use useRef instead and optional (to display the inactive status under iOS) also use a `useState` for cosmetics.
---
 docs/appstate.md | 40 ++++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/docs/appstate.md b/docs/appstate.md
index c22729798d8..898e8a0fef5 100644
--- a/docs/appstate.md
+++ b/docs/appstate.md
@@ -36,30 +36,38 @@ 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);
-
-  useEffect(() => {
-    AppState.addEventListener("change", _handleAppStateChange);
-
-    return () => {
-      AppState.removeEventListener("change", _handleAppStateChange);
+  /*  
+      You can remove line 7 & 24 if you don't want to see the AppState update from active to inactive (iOS)
+      You then must alter line 30 to something like appState.current 
+  */
+  const [appStateVisible, setAppStateVisible] = useState(appState.current);
+
+    useEffect(() => {
+        AppState.addEventListener('change', _handleAppStateChange);
+
+        return () => {
+            AppState.removeEventListener('change', _handleAppStateChange);
+        };
+    }, []);
+
+    const _handleAppStateChange = (nextAppState) => {
+        if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+            console.log("App has come to the foreground!");
+        } 
+
+        appState.current = nextAppState;
+        console.log("AppState", appState.current);
+        setAppStateVisible(appState.current);
     };
-  }, [_handleAppStateChange]);
-
-  const _handleAppStateChange = (nextAppState) => {
-    if (appState.current.match(/inactive|background/) && nextAppState === "active") {
-      console.log("App has come to the foreground!");
-    }
-    appState.current = nextAppState;
-  };
 
   return (
     <View style={styles.container}>
-      <Text>Current state is: {appState.current}</Text>
+      <Text>Current state is: {appStateVisible}</Text>
     </View>
   );
 };

From b9c97d809870b723f26ee9b8ddba70e770f23f83 Mon Sep 17 00:00:00 2001
From: Chris Winter <chris-winter@live.de>
Date: Mon, 6 Jul 2020 15:53:17 +0200
Subject: [PATCH 2/4] removed block comment, removed spaces

removed the block comment from code and added it as a descriptive text above. Some spaces were removed because the code was too indented.
---
 docs/appstate.md | 35 +++++++++++++++++------------------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/docs/appstate.md b/docs/appstate.md
index 898e8a0fef5..b8d76b58aff 100644
--- a/docs/appstate.md
+++ b/docs/appstate.md
@@ -22,6 +22,9 @@ For more information, see [Apple's documentation](https://developer.apple.com/do
 
 To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge.
 
+You can remove line 7 & 24 in the functional component example if you don't want to see the AppState update from active to inactive (iOS).
+After that you must alter line 30 to something like `appState.current`.
+
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
@@ -41,29 +44,25 @@ import { AppState, StyleSheet, Text, View } from "react-native";
 
 const AppStateExample = () => {
   const appState = useRef(AppState.currentState);
-  /*  
-      You can remove line 7 & 24 if you don't want to see the AppState update from active to inactive (iOS)
-      You then must alter line 30 to something like appState.current 
-  */
   const [appStateVisible, setAppStateVisible] = useState(appState.current);
 
-    useEffect(() => {
-        AppState.addEventListener('change', _handleAppStateChange);
+  useEffect(() => {
+      AppState.addEventListener('change', _handleAppStateChange);
 
-        return () => {
-            AppState.removeEventListener('change', _handleAppStateChange);
-        };
-    }, []);
+      return () => {
+          AppState.removeEventListener('change', _handleAppStateChange);
+      };
+  }, []);
 
-    const _handleAppStateChange = (nextAppState) => {
-        if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
-            console.log("App has come to the foreground!");
-        } 
+  const _handleAppStateChange = (nextAppState) => {
+      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+          console.log("App has come to the foreground!");
+      } 
 
-        appState.current = nextAppState;
-        console.log("AppState", appState.current);
-        setAppStateVisible(appState.current);
-    };
+      appState.current = nextAppState;
+      console.log("AppState", appState.current);
+      setAppStateVisible(appState.current);
+  };
 
   return (
     <View style={styles.container}>

From 94561887de6d36e9bae88034b1d759afeec44d28 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Mon, 6 Jul 2020 20:09:03 +0200
Subject: [PATCH 3/4] rephrase and move new comment, add one more sentence,
 prettier run

---
 docs/appstate.md | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/docs/appstate.md b/docs/appstate.md
index b8d76b58aff..c18de6af8c6 100644
--- a/docs/appstate.md
+++ b/docs/appstate.md
@@ -22,9 +22,6 @@ For more information, see [Apple's documentation](https://developer.apple.com/do
 
 To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge.
 
-You can remove line 7 & 24 in the functional component example if you don't want to see the AppState update from active to inactive (iOS).
-After that you must alter line 30 to something like `appState.current`.
-
 <div class="toggler">
   <ul role="tablist" class="toggle-syntax">
     <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
@@ -47,21 +44,24 @@ const AppStateExample = () => {
   const [appStateVisible, setAppStateVisible] = useState(appState.current);
 
   useEffect(() => {
-      AppState.addEventListener('change', _handleAppStateChange);
+    AppState.addEventListener("change", _handleAppStateChange);
 
-      return () => {
-          AppState.removeEventListener('change', _handleAppStateChange);
-      };
+    return () => {
+      AppState.removeEventListener("change", _handleAppStateChange);
+    };
   }, []);
 
   const _handleAppStateChange = (nextAppState) => {
-      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
-          console.log("App has come to the foreground!");
-      } 
+    if (
+      appState.current.match(/inactive|background/) &&
+      nextAppState === "active"
+    ) {
+      console.log("App has come to the foreground!");
+    }
 
-      appState.current = nextAppState;
-      console.log("AppState", appState.current);
-      setAppStateVisible(appState.current);
+    appState.current = nextAppState;
+    setAppStateVisible(appState.current);
+    console.log("AppState", appState.current);
   };
 
   return (
@@ -75,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 just the `appState.current` value.
+
 <block class="classical syntax" />
 
 ```SnackPlayer name=AppState%20Class%20Component%20Example
@@ -133,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.
 
 ---
 

From ed0beb52662abaa02e8e9a481de52a9f9ff9f687 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Mon, 6 Jul 2020 20:33:08 +0200
Subject: [PATCH 4/4] language lint fix

---
 docs/appstate.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/appstate.md b/docs/appstate.md
index c18de6af8c6..7b1a81b5e23 100644
--- a/docs/appstate.md
+++ b/docs/appstate.md
@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
 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 just the `appState.current` value.
+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" />