@applicaster/zapp-react-native-ui-components 16.0.0-rc.100 → 16.0.0-rc.102

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -404,10 +404,17 @@ const PlayerContainerComponent = (props: Props) => {
         const { eventType } = event;
 
         if (!isLanguageOverlayVisible && eventType === "menu") {
+          // First Back dismisses Play Next, the next one closes the player
+          if (playNextOverlayState) {
+            playNextOverlayState.handleUserCancelPlayNext();
+
+            return;
+          }
+
           close();
         }
       },
-    [close]
+    [close, playNextOverlayState]
   );
 
   // Effects

package/Components/Transitioner/Transitioner.tsx

@@ -129,8 +129,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
    * The last scene in the array is removed in the "backTransitionEnd" callback,
    * only after the animation is complete.
    */
-  backTransitionStart() {
-    const previousRoute = this.props.navigator?.currentRoute;
+  backTransitionStart(previousRoute: string) {
     const currentRoute = this.props.navigator?.currentRoute;
 
     const diffLengthRoutes =
@@ -242,7 +241,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           break;
 
         case NAV_ACTION_BACK: {
-          this.backTransitionStart();
+          this.backTransitionStart(previousRoute);
           break;
         }
 

package/Components/Transitioner/__tests__/transitioner.test.js

@@ -1,8 +1,13 @@
 import React from "react";
 import { Text, View } from "react-native";
 
-import { TransitionerComponent } from "../Transitioner";
-import { render } from "@testing-library/react-native";
+import { AnimationManager } from "../AnimationManager";
+import {
+  NAV_ACTION_BACK,
+  NAV_ACTION_PUSH,
+  TransitionerComponent,
+} from "../Transitioner";
+import { act, render } from "@testing-library/react-native";
 
 jest.mock("../Scene", () => {
   const View = jest.requireActual("react-native").View;
@@ -40,6 +45,27 @@ const transitionerComponentProps = {
 
 jest.mock("uuid");
 
+const sceneTransitionConfig = () => ({
+  push: {
+    duration: 0,
+    easing: jest.fn(),
+    from: { style: {} },
+    to: { style: {} },
+  },
+  back: {
+    duration: 0,
+    easing: jest.fn(),
+    from: { style: {} },
+    to: { style: {} },
+  },
+});
+
+const sceneFor = (route) => (
+  <View pathname={route}>
+    <Text>{route}</Text>
+  </View>
+);
+
 describe("<TransitionerComponent />", () => {
   it("renders correctly", () => {
     const wrapper = render(
@@ -50,4 +76,59 @@ describe("<TransitionerComponent />", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it("removes both intermediate scenes when backing out to the tab root", () => {
+    jest
+      .spyOn(AnimationManager.prototype, "animate")
+      .mockImplementation((_, done) => done());
+
+    const ref = React.createRef();
+    const root = "/river/root";
+    const child = `${root}/river/child`;
+    const grandchild = `${child}/river/grandchild`;
+
+    const propsFor = (route, previousAction) => ({
+      navigator: {
+        previousAction,
+        currentRoute: route,
+        screenData: {},
+      },
+      transitionConfig: sceneTransitionConfig,
+      layoutData: {
+        isTablet: false,
+        isTabletPortrait: false,
+      },
+      children: sceneFor(route),
+    });
+
+    const { rerender } = render(
+      <TransitionerComponent ref={ref} {...propsFor(root, "REPLACE")} />
+    );
+
+    act(() => {
+      rerender(
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(child, NAV_ACTION_PUSH)}
+        />
+      );
+    });
+
+    act(() => {
+      rerender(
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(grandchild, NAV_ACTION_PUSH)}
+        />
+      );
+    });
+
+    act(() => {
+      rerender(
+        <TransitionerComponent ref={ref} {...propsFor(root, NAV_ACTION_BACK)} />
+      );
+    });
+
+    expect(ref.current.state.scenes.map((scene) => scene.key)).toEqual([root]);
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.100",
+  "version": "16.0.0-rc.102",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.100",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.100",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.100",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.100",
+    "@applicaster/applicaster-types": "16.0.0-rc.102",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.102",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.102",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.102",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",