From a4a517a09d78ae1f9b11c8efb8dff186ec126f95 Mon Sep 17 00:00:00 2001
From: Su Min Kim <kims622@gmail.com>
Date: Wed, 2 Dec 2020 08:59:57 -0800
Subject: [PATCH] Add example for focus and blur events to AppStateExample
 (#30381)

Summary:
Added an example to test focus and blur events in AppState (Android only)

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Added] - Add example for focus and blur events to AppStateExample

Pull Request resolved: https://github.com/facebook/react-native/pull/30381

Test Plan: ![Example](http://g.recordit.co/6FGnSzKQaG.gif)

Reviewed By: cpojer

Differential Revision: D25245334

Pulled By: rickhanlonii

fbshipit-source-id: 916f18a74140cc43e0d513eb4073cbcc44e41427
---
 .../js/examples/AppState/AppStateExample.js   | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/rn-tester/js/examples/AppState/AppStateExample.js b/packages/rn-tester/js/examples/AppState/AppStateExample.js
index 54d83415780..ebdfa0e4281 100644
--- a/packages/rn-tester/js/examples/AppState/AppStateExample.js
+++ b/packages/rn-tester/js/examples/AppState/AppStateExample.js
@@ -12,7 +12,7 @@
 
 const React = require('react');
 
-const {AppState, Text, View} = require('react-native');
+const {AppState, Text, View, Platform} = require('react-native');
 
 class AppStateSubscription extends React.Component<
   $FlowFixMeProps,
@@ -22,22 +22,43 @@ class AppStateSubscription extends React.Component<
     appState: AppState.currentState,
     previousAppStates: [],
     memoryWarnings: 0,
+    eventsDetected: [],
   };
 
   componentDidMount() {
     AppState.addEventListener('change', this._handleAppStateChange);
     AppState.addEventListener('memoryWarning', this._handleMemoryWarning);
+    if (Platform.OS === 'android') {
+      AppState.addEventListener('focus', this._handleFocus);
+      AppState.addEventListener('blur', this._handleBlur);
+    }
   }
 
   componentWillUnmount() {
     AppState.removeEventListener('change', this._handleAppStateChange);
     AppState.removeEventListener('memoryWarning', this._handleMemoryWarning);
+    if (Platform.OS === 'android') {
+      AppState.removeEventListener('focus', this._handleFocus);
+      AppState.removeEventListener('blur', this._handleBlur);
+    }
   }
 
   _handleMemoryWarning = () => {
     this.setState({memoryWarnings: this.state.memoryWarnings + 1});
   };
 
+  _handleBlur = () => {
+    const eventsDetected = this.state.eventsDetected.slice();
+    eventsDetected.push('blur');
+    this.setState({eventsDetected});
+  };
+
+  _handleFocus = () => {
+    const eventsDetected = this.state.eventsDetected.slice();
+    eventsDetected.push('focus');
+    this.setState({eventsDetected});
+  };
+
   _handleAppStateChange = appState => {
     const previousAppStates = this.state.previousAppStates.slice();
     previousAppStates.push(this.state.appState);
@@ -62,6 +83,13 @@ class AppStateSubscription extends React.Component<
         </View>
       );
     }
+    if (this.props.detectEvents) {
+      return (
+        <View>
+          <Text>{JSON.stringify(this.state.eventsDetected)}</Text>
+        </View>
+      );
+    }
     return (
       <View>
         <Text>{JSON.stringify(this.state.previousAppStates)}</Text>
@@ -105,4 +133,13 @@ exports.examples = [
       return <AppStateSubscription showMemoryWarnings={true} />;
     },
   },
+  {
+    platform: 'android',
+    title: 'Focus/Blur Events',
+    description:
+      'In the Android simulator, toggle the notification drawer to fire events.',
+    render(): React.Element<any> {
+      return <AppStateSubscription detectEvents={true} />;
+    },
+  },
 ];