✨ (back) add back support on Transitioners

Author: tpucci

jest/setup.js

@@ -18,3 +18,5 @@ jest.mock('react-native-reanimated/src/ReanimatedModule', () => ({
 }));
 jest.mock('react-native-reanimated/src/derived/evaluateOnce');
 jest.mock('react-native-reanimated/src/core/AnimatedProps');
+
+jest.useFakeTimers();

src/Navigation/BackHandlerDelegate.ts

@@ -1,6 +1,6 @@
 import { BackHandler } from 'react-native';
-import { fromEventPattern, Observable } from 'rxjs';
-import { share } from 'rxjs/operators';
+import { fromEventPattern, Observable, Subject } from 'rxjs';
+import { share, map, merge, tap } from 'rxjs/operators';
 
 export interface BackEvent {
   target: string | null;
@@ -16,21 +16,31 @@ export class BackHandlerDelegate {
    * See https://facebook.github.io/react-native/docs/backhandler.html.
    * @param handler
    */
-  private addEventListener = (handler: (event: BackEvent) => void) => {
+  private addEventListener = (handler: () => void) => {
     BackHandler.addEventListener('hardwareBackPress', () => {
-      handler({
-        target: null,
-      });
-      if (this.onBackCallback) {
-        this.onBackCallback();
-        this.onBackCallback = undefined;
-        return true;
-      }
-      return false;
+      handler();
+      return true;
     });
   };
 
-  private back$: Observable<BackEvent> = fromEventPattern<BackEvent>(this.addEventListener).pipe(
+  private softwareBack$ = new Subject<undefined>();
+
+  private back$: Observable<BackEvent> = fromEventPattern<undefined>(this.addEventListener).pipe(
+    merge(this.softwareBack$),
+    tap(() => {
+      // After the event has spread, we fire onBacks callbacks.
+      setTimeout(() => {
+        if (this.onBackCallback) {
+          this.onBackCallback();
+          this.onBackCallback = undefined;
+        } else {
+          BackHandler.exitApp();
+        }
+      }, 0);
+    }),
+    map(() => ({
+      target: null,
+    })),
     share()
   );
 
@@ -39,5 +49,9 @@ export class BackHandlerDelegate {
     this.onBackCallback = cb;
   };
 
+  back = () => {
+    this.softwareBack$.next();
+  };
+
   defaultBackContext = { back$: this.back$ };
 }

src/Navigation/Navigation.ts

@@ -16,4 +16,8 @@ export class Navigation {
   backHandlerDelegate = new BackHandlerDelegate();
 
   fullScreenDelegate = new FullScreenDelegate();
+
+  back = () => {
+    this.backHandlerDelegate.back();
+  };
 }

src/Navigation/__tests__/BackHandlerDelegate.test.tsx

@@ -15,12 +15,32 @@ describe('BackHandlerDelegate', () => {
     expect.assertions(1);
   });
 
-  it('fires the registered onBackCallback after the event has been handled', () => {
+  it('fires the registered onBackCallback after the hardware event has been handled', async () => {
     const spy = jest.fn();
     const backHandlerDelegate = new BackHandlerDelegate();
     backHandlerDelegate.setOnBackCallback(spy);
     backHandlerDelegate.defaultBackContext.back$.subscribe();
     BackHandler.mockPressBack();
+    jest.runAllTimers();
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('exposes a back method to emit a back event', () => {
+    const backHandlerDelegate = new BackHandlerDelegate();
+    backHandlerDelegate.defaultBackContext.back$.subscribe(event => {
+      expect(event).toStrictEqual({ target: null });
+    });
+    backHandlerDelegate.back();
+    expect.assertions(1);
+  });
+
+  it('fires the registered onBackCallback after the software event has been handled', async () => {
+    const spy = jest.fn();
+    const backHandlerDelegate = new BackHandlerDelegate();
+    backHandlerDelegate.setOnBackCallback(spy);
+    backHandlerDelegate.defaultBackContext.back$.subscribe();
+    backHandlerDelegate.back();
+    jest.runAllTimers();
     expect(spy).toHaveBeenCalled();
   });
 });

src/Navigation/__tests__/Navigation.test.tsx

@@ -0,0 +1,17 @@
+import { Navigation } from '../Navigation';
+
+describe('Navigation', () => {
+  it('exposes the same store instance if it accessed twice', () => {
+    const navigation = Navigation.instance;
+    const otherNavigation = Navigation.instance;
+    expect(otherNavigation).toBe(navigation);
+  });
+
+  it('exposes a back method to emit a back event', () => {
+    Navigation.instance.backHandlerDelegate.defaultBackContext.back$.subscribe(event => {
+      expect(event).toStrictEqual({ target: null });
+    });
+    Navigation.instance.back();
+    expect.assertions(1);
+  });
+});

src/Screen.tsx

@@ -16,7 +16,21 @@ export interface ScreenProps {
   visible: boolean;
 }
 
-class ScreenComponent extends ReactComponent<WithBackContext<ScreenProps>> {
+class ScreenComponent extends ReactComponent<WithBackContext<ScreenProps>, ScreenProps['props']> {
+  constructor(props: WithBackContext<ScreenProps>) {
+    super(props);
+    this.state = props.props;
+  }
+
+  state: ScreenProps['props'];
+  static getDerivedStateFromProps(
+    props: WithBackContext<ScreenProps>,
+    state: ScreenProps['props']
+  ) {
+    if (!props.visible) return state;
+    return props.props;
+  }
+
   static defaultProps = {
     isFullScreen: false,
     Transitioner: None,
@@ -46,7 +60,7 @@ class ScreenComponent extends ReactComponent<WithBackContext<ScreenProps>> {
   factory = createFactory(this.props.Component);
 
   render() {
-    const { Transitioner, onBack, props } = this.props;
+    const { Transitioner, onBack } = this.props;
     return (
       /**
        *  @todo Transitioner is always defined in static defaultProps.
@@ -58,11 +72,12 @@ class ScreenComponent extends ReactComponent<WithBackContext<ScreenProps>> {
             back$: this.back$,
           }}
         >
-          {this.factory({ navigation: { goBack: onBack }, ...props })}
+          {this.factory({ navigation: { goBack: onBack }, ...this.state })}
         </BackContext.Provider>
       </Transitioner>
     );
   }
 }
 
+// @ts-ignore
 export const Screen = withBackContext(ScreenComponent);