From a0c318b4e47839ed244fea543429d8ede344a84f Mon Sep 17 00:00:00 2001
From: Tahir Awan <tahir.awan@gmail.com>
Date: Tue, 25 Feb 2020 15:55:14 +0300
Subject: [PATCH 1/2] updated example to use functional components and hooks

updated example to use functional components and hooks
---
 docs/appstate.md | 68 ++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 60 insertions(+), 8 deletions(-)

diff --git a/docs/appstate.md b/docs/appstate.md
index 18071592bb2..cad39a78335 100644
--- a/docs/appstate.md
+++ b/docs/appstate.md
@@ -22,29 +22,79 @@ 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.
 
-```jsx
-import React, {Component} from 'react';
-import {AppState, Text} from 'react-native';
+<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')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```SnackPlayer name=Text Functional Component Example
+
+import React, { useEffect, useState } from "react";
+import {AppState, Text} from "react-native";
+
+const AppStateExample = () => {
+  const [appState, setAppState] = useState(AppState.currentState);
+
+  useEffect(() => {
+    AppState.addEventListener("change", _handleAppStateChange);
 
-class AppStateExample extends Component {
+    return () => {
+      AppState.removeEventListener("change", _handleAppStateChange);
+    }
+  }, []);
+
+  const _handleAppStateChange = (nextAppState) => {
+    if (
+      appState.match(/inactive|background/) &&
+      nextAppState === "active"
+    ) {
+      console.log("App has come to the foreground!");
+    }
+    setAppState(nextAppState);
+  };
+
+  return (
+    <Text>Current state is: {appState}</Text>
+  );
+}
+
+export default AppStateExample;
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=Text Class Component Example
+
+import React, {Component} from "react";
+import {AppState, Text} from "react-native";
+
+export default class AppStateExample extends Component {
   state = {
     appState: AppState.currentState,
   };
 
   componentDidMount() {
-    AppState.addEventListener('change', this._handleAppStateChange);
+    AppState.addEventListener("change", this._handleAppStateChange);
   }
 
   componentWillUnmount() {
-    AppState.removeEventListener('change', this._handleAppStateChange);
+    AppState.removeEventListener("change", this._handleAppStateChange);
   }
 
   _handleAppStateChange = (nextAppState) => {
     if (
       this.state.appState.match(/inactive|background/) &&
-      nextAppState === 'active'
+      nextAppState === "active"
     ) {
-      console.log('App has come to the foreground!');
+      console.log("App has come to the foreground!");
     }
     this.setState({appState: nextAppState});
   };
@@ -55,6 +105,8 @@ class AppStateExample extends Component {
 }
 ```
 
+<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.
 
 ---

From fcaa217aa2b4c3e9d2d20da541b6c6f97aca2d80 Mon Sep 17 00:00:00 2001
From: R Nabors <rachelnabors@users.noreply.github.com>
Date: Wed, 26 Feb 2020 18:37:53 +0000
Subject: [PATCH 2/2] Prettier-ed the code + added styling

---
 docs/appstate.md | 55 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/docs/appstate.md b/docs/appstate.md
index cad39a78335..1ce28c4b84b 100644
--- a/docs/appstate.md
+++ b/docs/appstate.md
@@ -35,10 +35,9 @@ To see the current state, you can check `AppState.currentState`, which will be k
 
 <block class="functional syntax" />
 
-```SnackPlayer name=Text Functional Component Example
-
+```SnackPlayer name=AppState%20Function%20Component%20Example
 import React, { useEffect, useState } from "react";
-import {AppState, Text} from "react-native";
+import { AppState, StyleSheet, Text, View } from "react-native";
 
 const AppStateExample = () => {
   const [appState, setAppState] = useState(AppState.currentState);
@@ -48,37 +47,43 @@ const AppStateExample = () => {
 
     return () => {
       AppState.removeEventListener("change", _handleAppStateChange);
-    }
+    };
   }, []);
 
-  const _handleAppStateChange = (nextAppState) => {
-    if (
-      appState.match(/inactive|background/) &&
-      nextAppState === "active"
-    ) {
+  const _handleAppStateChange = nextAppState => {
+    if (appState.match(/inactive|background/) && nextAppState === "active") {
       console.log("App has come to the foreground!");
     }
     setAppState(nextAppState);
   };
 
   return (
-    <Text>Current state is: {appState}</Text>
+    <View style={styles.container}>
+      <Text>Current state is: {appState}</Text>
+    </View>
   );
-}
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
 
 export default AppStateExample;
 ```
 
 <block class="classical syntax" />
 
-```SnackPlayer name=Text Class Component Example
-
-import React, {Component} from "react";
-import {AppState, Text} from "react-native";
+```SnackPlayer name=AppState%20Class%20Component%20Example
+import React, { Component } from "react";
+import { AppState, StyleSheet, Text, View } from "react-native";
 
 export default class AppStateExample extends Component {
   state = {
-    appState: AppState.currentState,
+    appState: AppState.currentState
   };
 
   componentDidMount() {
@@ -89,20 +94,32 @@ export default class AppStateExample extends Component {
     AppState.removeEventListener("change", this._handleAppStateChange);
   }
 
-  _handleAppStateChange = (nextAppState) => {
+  _handleAppStateChange = nextAppState => {
     if (
       this.state.appState.match(/inactive|background/) &&
       nextAppState === "active"
     ) {
       console.log("App has come to the foreground!");
     }
-    this.setState({appState: nextAppState});
+    this.setState({ appState: nextAppState });
   };
 
   render() {
-    return <Text>Current state is: {this.state.appState}</Text>;
+    return (
+      <View style={styles.container}>
+        <Text>Current state is: {this.state.appState}</Text>
+      </View>
+    );
   }
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
 ```
 
 <block class="endBlock syntax" />