Exposing an event that can keep track of losing and gaining focus in app

samples/RXPTest/src/Tests/AppTest.tsx

@@ -40,21 +40,28 @@ interface AppState {
     activationState?: RX.Types.AppActivationState;
     activationHistory?: string;
 
+    focusState?: boolean;
+    focusHistory?: string;
+
     memoryWarningCount?: number;
 }
 
 class AppView extends RX.Component<RX.CommonProps, AppState> {
     private _appActivationEvent: RX.Types.SubscriptionToken;
+    private _appFocusChangedEvent: RX.Types.SubscriptionToken;
     private _memoryWarningEvent: RX.Types.SubscriptionToken;
 
     constructor(props: RX.CommonProps) {
         super(props);
 
         let curState = RX.App.getActivationState();
+        let focusState = RX.App.isAppFocused();
 
         this.state = {
             activationState: curState,
             activationHistory: this._activationStateToString(curState),
+            focusState,
+            focusHistory: this._focusStateToString(focusState),
             memoryWarningCount: 0
         };
     }
@@ -67,6 +74,13 @@ class AppView extends RX.Component<RX.CommonProps, AppState> {
             });
         });
 
+        this._appFocusChangedEvent = RX.App.appFocusChangedEvent.subscribe(state => {
+            this.setState({
+                focusState: state,
+                focusHistory: this.state.focusHistory + '\n' + this._focusStateToString(state)
+            });
+        });
+
         this._memoryWarningEvent = RX.App.memoryWarningEvent.subscribe(() => {
             this.setState({ memoryWarningCount: this.state.memoryWarningCount + 1 });
         });
@@ -102,6 +116,28 @@ class AppView extends RX.Component<RX.CommonProps, AppState> {
                     </RX.Text>
                 </RX.View>
 
+                <RX.View style={ _styles.textContainer } key={ 'explanation3' }>
+                    <RX.Text style={ _styles.explainText }>
+                        { 'Current app focus state:' }
+                    </RX.Text>
+                </RX.View>
+                <RX.View style={ _styles.labelContainer }>
+                    <RX.Text style={ _styles.labelText }>
+                        { this._focusStateToString(this.state.focusState) }
+                    </RX.Text>
+                </RX.View>
+
+                 <RX.View style={ _styles.textContainer } key={ 'explanation2' }>
+                    <RX.Text style={ _styles.explainText }>
+                        { 'Move app focus in and out of the app. The history is recorded here.' }
+                    </RX.Text>
+                </RX.View>
+                <RX.View style={ _styles.labelContainer }>
+                    <RX.Text style={ _styles.historyText }>
+                        { this.state.focusHistory }
+                    </RX.Text>
+                </RX.View>
+
                 <RX.View style={ _styles.textContainer } key={ 'explanation3' }>
                     <RX.Text style={ _styles.explainText }>
                         { 'Launch other apps to create memory pressure.' }
@@ -117,23 +153,12 @@ class AppView extends RX.Component<RX.CommonProps, AppState> {
     }
 
     private _activationStateToString(state: RX.Types.AppActivationState): string {
-        switch (state) {
-            case RX.Types.AppActivationState.Active:
-                return 'Active';
-
-            case RX.Types.AppActivationState.Background:
-                return 'Background';
-
-            case RX.Types.AppActivationState.Inactive:
-                return 'Inactive';
-
-            case RX.Types.AppActivationState.Extension:
-                return 'Extension';
-
-            default:
-                return 'Unknown';
-        }
+        return RX.Types.AppActivationState[state];
     }
+
+     private _focusStateToString(state: boolean): string {
+         return state ? 'Focused' : 'Blurred';
+     }
 }
 
 class AppTest implements Test {

src/common/Interfaces.ts

@@ -55,6 +55,9 @@ export abstract class App {
     abstract getActivationState(): Types.AppActivationState;
     activationStateChangedEvent = new SubscribableEvent<(state: Types.AppActivationState) => void>();
 
+    abstract isAppFocused(): boolean;
+    appFocusChangedEvent = new SubscribableEvent<(isFocused: boolean) => void>();
+
     // Memory Warnings
     memoryWarningEvent = new SubscribableEvent<() => void>();
 }

src/native-common/App.ts

@@ -57,6 +57,10 @@ export class App extends RX.App {
     protected getRootViewUsingPropsFactory(): RN.ComponentProvider {
         return () => RootViewUsingProps;
     }
+
+    isAppFocused() {
+        return this.getActivationState() === Types.AppActivationState.Active;
+    }
 }
 
 export default new App();

src/web/App.ts

@@ -18,6 +18,7 @@ if (typeof(document) !== 'undefined') {
 
 export class App extends RX.App {
     private _activationState: Types.AppActivationState;
+    private _isAppFocued = true;
 
     constructor() {
         super();
@@ -39,10 +40,24 @@ export class App extends RX.App {
                     this.activationStateChangedEvent.fire(this._activationState);
                 }
             });
+
+            window.addEventListener('focus', () => {
+                this._setAppFocusState(true);
+            });
+
+            window.addEventListener('blur', () => {
+                this._setAppFocusState(false);
+            });
         } else {
             this._activationState = Types.AppActivationState.Active;
         }
     }
+     private _setAppFocusState(currentFocusState: boolean) {
+        if (currentFocusState !== this._isAppFocued) {
+            this._isAppFocued = currentFocusState;
+            this.appFocusChangedEvent.fire(currentFocusState);            
+        }
+    }
 
     initialize(debug: boolean, development: boolean) {
         super.initialize(debug, development);
@@ -51,6 +66,10 @@ export class App extends RX.App {
     getActivationState(): Types.AppActivationState {
         return this._activationState;
     }
+
+    isAppFocused() {
+        return this._isAppFocued;
+    }
 }
 
 export default new App();

src/windows/AccessibilityAnnouncer.tsx

@@ -67,8 +67,7 @@ export class AccessibilityAnnouncer extends React.Component<{}, {}> {
 
     private _onViewRef = (view: RN.View|null): void => {
         this._viewElement = view;
-        if (view !== null)
-        {
+        if (view !== null) {
             this._tryDequeueAndAnnounce();
         }
     }
@@ -81,8 +80,7 @@ export class AccessibilityAnnouncer extends React.Component<{}, {}> {
 
     private _dequeueAndPostAnnouncement = () => {
         if (this._announcementQueue.length > 0) {
-            if (this._viewElement)
-            {
+            if (this._viewElement) {
                 const announcement = this._announcementQueue.shift();
                 // This hack was copied from android/Accessibility.ts in order to not increase variety of hacks in codebase.
                 //

src/windows/App.ts

@@ -6,20 +6,44 @@
 *
 * Windows implementation of App API namespace.
 */
+import RN = require('react-native');
 
 import { ComponentProvider } from 'react-native';
 import { RootView, RootViewUsingProps } from './RootView';
 import { App as AppCommon } from '../native-common/App';
 
 export class App extends AppCommon {
+    private _isAppFocued = false;
+    constructor() {
+        super();
 
+        RN.NativeAppEventEmitter.addListener('WindowDeactivatedEventName', () => {
+            this._setAppFocusState(false);
+        });
+
+        RN.NativeAppEventEmitter.addListener('WindowActivatedEventName', () => {
+            this._setAppFocusState(true);
+        });
+    }
+
+    private _setAppFocusState(currentFocusState: boolean) {
+        if (currentFocusState !== this._isAppFocued) {
+            this._isAppFocued = currentFocusState;
+            this.appFocusChangedEvent.fire(currentFocusState);            
+        }
+    }
+
     protected getRootViewFactory(): ComponentProvider {
         return () => RootView;
     }
 
     protected getRootViewUsingPropsFactory(): ComponentProvider {
         return () => RootViewUsingProps;
     }
+
+    isAppFocused() {
+        return this._isAppFocued;
+    }
 }
 
 export default new App();