@applicaster/zapp-react-native-ui-components 16.0.0-rc.108 → 16.0.0-rc.109

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -6,7 +6,7 @@
  * Green (configurable): background, image, nowPlayingAsset, nowPlayingLabel,
  *   textLabel1, textLabel2
  * White (hardcoded): container padding/gutters, nowPlaying container layout,
- *   button sizes/padding/assets
+ *   button sizes/padding. Play/pause icons use plugin assets when set.
  *
  * Variants (VARIANT_*) are preset configuration bundles — not passed as a field.
  */
@@ -94,6 +94,10 @@ export type ActionButtonAssetsConfiguration = {
   removeAsset?: string;
   /** Trailing drag handle on Edit Order / queue rows. */
   dragAsset?: string;
+  /** Shown on the Now Playing row while the track is paused. */
+  playAsset?: string;
+  /** Shown on the Now Playing row while the track is playing. */
+  pauseAsset?: string;
 };
 
 export type ItemConfiguration = {
@@ -504,6 +508,23 @@ function ItemButton({
   const renderIcon = () => {
     switch (action) {
       case "playPause": {
+        const playbackAsset = isSelected
+          ? actionButtonAssets?.pauseAsset
+          : actionButtonAssets?.playAsset;
+
+        if (playbackAsset) {
+          return (
+            <Image
+              source={{ uri: playbackAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
         const iconSize = layout.assetWidth;
         const iconRadius = iconSize / 2;
 

package/Components/ModalComponent/AudioPlayer/Components/__tests__/Item.test.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import { Pressable } from "react-native";
+import { Image, Pressable } from "react-native";
 import { fireEvent, render, screen } from "@testing-library/react-native";
+import { ModalBlocksStyleContext } from "../../../ModalBlocksStyleContext";
 import {
   AudioPlayerTrackItem,
+  VARIANT_NOW_PLAYING,
   VARIANT_PLAYLIST_ITEM,
   mapMenuItemToNowPlayingData,
 } from "../Item";
@@ -101,6 +103,55 @@ describe("mapMenuItemToNowPlayingData", () => {
     expect(data.textLabel2).toBe("Artist Name");
   });
 
+  it("uses the plugin play asset while paused and the pause asset while playing", () => {
+    const menuItem = {
+      id: "item_1",
+      title: "Track Title",
+      summary: "Artist Name",
+    };
+
+    const style = {
+      nowPlayingItem: {
+        actionButtons: {
+          default: {
+            playAsset: "https://example.com/play.png",
+            pauseAsset: "https://example.com/pause.png",
+          },
+        },
+      },
+    };
+
+    const { UNSAFE_getAllByType, rerender } = render(
+      <ModalBlocksStyleContext.Provider value={style}>
+        <AudioPlayerTrackItem
+          configuration={VARIANT_NOW_PLAYING}
+          data={mapMenuItemToNowPlayingData(menuItem as any, true)}
+        />
+      </ModalBlocksStyleContext.Provider>
+    );
+
+    expect(
+      UNSAFE_getAllByType(Image).some(
+        (node) => node.props.source?.uri === "https://example.com/play.png"
+      )
+    ).toBe(true);
+
+    rerender(
+      <ModalBlocksStyleContext.Provider value={style}>
+        <AudioPlayerTrackItem
+          configuration={VARIANT_NOW_PLAYING}
+          data={mapMenuItemToNowPlayingData(menuItem as any, false)}
+        />
+      </ModalBlocksStyleContext.Provider>
+    );
+
+    expect(
+      UNSAFE_getAllByType(Image).some(
+        (node) => node.props.source?.uri === "https://example.com/pause.png"
+      )
+    ).toBe(true);
+  });
+
   it("uses custom nowPlayingLabel when provided", () => {
     const data = mapMenuItemToNowPlayingData(
       item as any,

package/Components/ModalComponent/AudioPlayer/utils/__tests__/mergeStyles.test.ts

@@ -131,6 +131,43 @@ describe("mergeItemConfiguration background", () => {
       "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH"
     );
   });
+
+  it("applies a text label font family and ignores a non-string font family", () => {
+    const withFont = mergeItemConfiguration(base as any, {
+      textLabel1: { default: { fontFamily: "Roboto-Bold" } },
+    });
+
+    expect(withFont.textLabel1.iosFontFamily).toBe("Roboto-Bold");
+    expect(withFont.textLabel1.androidFontFamily).toBe("Roboto-Bold");
+
+    const withEmpty = mergeItemConfiguration(base as any, {
+      textLabel1: {
+        default: { fontFamily: {}, iosFontFamily: "SFProText-Semibold" },
+      },
+    });
+
+    expect(withEmpty.textLabel1.iosFontFamily).toBe("SFProText-Semibold");
+    expect(withEmpty.textLabel1.androidFontFamily).toBeUndefined();
+  });
+
+  it("applies play and pause assets onto actionButtonAssets", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      actionButtons: {
+        default: {
+          playAsset: "https://example.com/play.png",
+          pauseAsset: "https://example.com/pause.png",
+        },
+      },
+    });
+
+    expect(merged.actionButtonAssets?.playAsset).toBe(
+      "https://example.com/play.png"
+    );
+
+    expect(merged.actionButtonAssets?.pauseAsset).toBe(
+      "https://example.com/pause.png"
+    );
+  });
 });
 
 describe("mergeButtonConfiguration background", () => {

package/Components/ModalComponent/AudioPlayer/utils/mergeStyles.ts

@@ -82,7 +82,7 @@ function mergeItemLabel(
     ...(override.lineHeight !== undefined
       ? { lineHeight: override.lineHeight }
       : {}),
-    ...(override.fontFamily
+    ...(typeof override.fontFamily === "string" && override.fontFamily
       ? {
           iosFontFamily: override.fontFamily,
           androidFontFamily: override.fontFamily,
@@ -147,6 +147,8 @@ function mergeItemActionButtonAssets(
     ...base,
     ...(override.removeAsset ? { removeAsset: override.removeAsset } : {}),
     ...(override.dragAsset ? { dragAsset: override.dragAsset } : {}),
+    ...(override.playAsset ? { playAsset: override.playAsset } : {}),
+    ...(override.pauseAsset ? { pauseAsset: override.pauseAsset } : {}),
   };
 }
 

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -115,7 +115,6 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     iconPlacement,
     contentComponent: ContentComponent,
     contentComponentProps = {},
-    styleOverrides: propStyleOverrides,
     measurementPhase = false,
     emptyMessage,
   } = props;
@@ -157,78 +156,10 @@ function _BottomSheetModalContent(props: ModalComponentProps) {
     const configuration =
       plugin?.configuration || (plugin as any)?.configuration_json;
 
-    const parsed =
-      configuration && themePluginId
-        ? parseModalBlocksConfiguration(configuration, themePluginId)
-        : null;
-
-    if (!propStyleOverrides) {
-      return parsed;
-    }
-
-    // hydrate(QueueStyles) only emits sectionHeader after the plugin class
-    // includes it. Until then, Studio/local keys in configuration_json still
-    // apply via the parser.
-    const hydratedSection = propStyleOverrides.sectionHeader;
-
-    const hasTitleStyle = (style?: Record<string, any>) =>
-      Boolean(
-        style &&
-          (style.fontColor ||
-            style.fontSize !== undefined ||
-            style.lineHeight !== undefined ||
-            style.fontFamily ||
-            style.iosFontFamily ||
-            style.androidFontFamily ||
-            style.letterSpacing !== undefined ||
-            style.iosLetterSpacing !== undefined ||
-            style.androidLetterSpacing !== undefined ||
-            style.textTransform ||
-            style.alignment)
-      );
-
-    const hasActionStyle = (style?: Record<string, any>) =>
-      Boolean(
-        style &&
-          (style.backgroundColor ||
-            style.fontColor ||
-            style.fontSize !== undefined ||
-            style.lineHeight !== undefined ||
-            style.fontFamily ||
-            style.iosFontFamily ||
-            style.androidFontFamily ||
-            style.letterSpacing !== undefined ||
-            style.iosLetterSpacing !== undefined ||
-            style.androidLetterSpacing !== undefined ||
-            style.textTransform ||
-            style.borderRadius !== undefined ||
-            style.cornerRadius !== undefined ||
-            style.paddingTop !== undefined ||
-            style.paddingRight !== undefined ||
-            style.paddingBottom !== undefined ||
-            style.paddingLeft !== undefined)
-      );
-
-    const actionNode = hydratedSection?.actionButtons;
-
-    // An empty `default: {}` is truthy and would hide fields set on the flat
-    // object or on the focused bucket.
-    const hasHydratedSection =
-      hasTitleStyle(hydratedSection?.title?.default) ||
-      hasTitleStyle(hydratedSection?.title) ||
-      hasActionStyle(actionNode?.default) ||
-      hasActionStyle(actionNode?.focused) ||
-      hasActionStyle(actionNode?.focus) ||
-      hasActionStyle(actionNode);
-
-    return {
-      ...parsed,
-      ...propStyleOverrides,
-      sectionHeader: hasHydratedSection
-        ? hydratedSection
-        : parsed?.sectionHeader,
-    };
-  }, [propStyleOverrides, plugin, themePluginId]);
+    return configuration && themePluginId
+      ? parseModalBlocksConfiguration(configuration, themePluginId)
+      : null;
+  }, [plugin, themePluginId]);
 
   const pluginLocalizations = useLocalizedStrings({
     localizations:

package/Components/Transitioner/AnimationManager.js

@@ -66,7 +66,7 @@ export class AnimationManager {
    *
    * @param {object} to contains style to animate and scenes index
    * @param {string} action push|back
-   * @param {number} stepsBack number of steps back
+   * @param {number} [stepsBack] number of steps back, used by the back action only
    */
   stateForAction({ to, scenes }, action, stepsBack) {
     let rootIndex = to.index;

package/Components/Transitioner/Scene.tsx

@@ -17,13 +17,14 @@ const fullWidthDimensions = {
 type Props = {
   children: any;
   style: any;
-  pointerEvents: ViewProps["pointerEvents"];
-  overlayStyle: ViewStyle;
-  animating: boolean;
+  pointerEvents?: ViewProps["pointerEvents"];
+  overlayStyle?: ViewStyle;
+  animating?: boolean;
   contentStyle: ViewStyle;
   pathname: string;
   isActive: boolean;
   screenData: NavigationScreenData;
+  screenUniqueId?: string;
 };
 
 export function CurrentScreenContextProvider({

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { append, compose, identity, tail, take, update } from "ramda";
+import { append, compose, identity, tail, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -18,11 +18,23 @@ export const NAV_ACTION_REPLACE = "REPLACE";
 
 export const NAV_ACTION_BACK = "POP";
 
-type SceneProps = {
-  children: React.ReactNode;
-  overlayStyle: any;
-  style: any;
-  animating: boolean;
+const RIVER_SEGMENT_REGEX = /river\//g;
+
+// Number of "river/" segments in the route, i.e. its depth in the navigation stack
+function countRiverSegments(route?: string): number {
+  return (route?.match(RIVER_SEGMENT_REGEX) || []).length;
+}
+
+// The screen element rendered for the current route
+type SceneChild = React.ReactElement<{
+  pathname: string;
+  screenData: NavigationScreenData;
+}>;
+
+type TransitionerScene = {
+  children: SceneChild;
+  key: string;
+  screenUniqueId: string;
 };
 
 /**
@@ -31,7 +43,7 @@ type SceneProps = {
  * @param {Object} children
  * @returns { children: Object, key: string }
  */
-function prepareScene(children) {
+function prepareScene(children: SceneChild): TransitionerScene {
   return {
     children,
     key: children.props.pathname,
@@ -45,7 +57,10 @@ function prepareScene(children) {
  * @param {any} props Component's props
  * @param {any} state Component's state
  */
-function scenesForBackTransition(props: SceneProps, { scenes }) {
+function scenesForBackTransition(
+  props: Pick<Props, "children">,
+  { scenes }: Pick<State, "scenes">
+): TransitionerScene[] {
   return scenes.length > 1
     ? identity(scenes)
     : [prepareScene(props.children), scenes[0]];
@@ -53,7 +68,8 @@ function scenesForBackTransition(props: SceneProps, { scenes }) {
 
 type Props = {
   transitionConfig: any;
-  children: React.ReactNode;
+  isRTL?: boolean;
+  children: SceneChild;
   navigator: {
     previousAction: string;
     currentRoute: string;
@@ -78,13 +94,12 @@ type Props = {
 };
 
 type State = {
-  animatedValue: any;
   animating: boolean;
   duration: number;
   easing: any;
   from: any;
   to: any;
-  scenes: any;
+  scenes: TransitionerScene[];
 };
 
 const styles = {
@@ -92,11 +107,18 @@ const styles = {
 } as const;
 
 export class TransitionerComponent extends React.PureComponent<Props, State> {
+  private animationManager: AnimationManager;
+
+  private transitionId: number;
+
   constructor(props: Props) {
     super(props);
 
     this.animationManager = new AnimationManager(props);
 
+    // Bumped by every animated transition; end callbacks of older ones are ignored
+    this.transitionId = 0;
+
     this.state = {
       scenes: [prepareScene(props.children)], // starting with index: 0
       ...this.animationManager.initialState(),
@@ -113,28 +135,36 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
    * and trigger push animation with callbacks.
    */
   pushTransitionStart() {
+    const transitionId = ++this.transitionId;
+
     this.setState(
       {
-        scenes: append(prepareScene(this.props.children), this.state.scenes),
+        // Append right after the visible scene: stateForAction(PUSH) animates to.index + 1
+        scenes: [
+          ...this.state.scenes.slice(0, this.state.to.index + 1),
+          prepareScene(this.props.children),
+        ],
         ...this.animationManager.stateForAction(this.state, NAV_ACTION_PUSH),
       },
       () => {
-        this.animationManager.animate(this.state, this.pushTransitionEnd);
+        this.animationManager.animate(this.state, () =>
+          this.pushTransitionEnd(transitionId)
+        );
       }
     );
   }
 
   /**
    * Trigger back animation.
-   * The last scene in the array is removed in the "backTransitionEnd" callback,
+   * The scenes after the target one are removed in the "backTransitionEnd" callback,
    * only after the animation is complete.
    */
   backTransitionStart(previousRoute: string) {
+    const transitionId = ++this.transitionId;
     const currentRoute = this.props.navigator?.currentRoute;
 
     const diffLengthRoutes =
-      (previousRoute?.match(/river\//g) || []).length -
-      (currentRoute?.match(/river\//g) || []).length;
+      countRiverSegments(previousRoute) - countRiverSegments(currentRoute);
 
     const stepsBack =
       diffLengthRoutes && diffLengthRoutes > 0 ? diffLengthRoutes : 1;
@@ -150,30 +180,32 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       },
       () => {
         this.animationManager.animate(this.state, () =>
-          this.backTransitionEnd(stepsBack)
+          this.backTransitionEnd(transitionId)
         );
       }
     );
   }
 
-  shouldSkipAnimationForRoute(route) {
+  shouldSkipAnimationForRoute(route: string) {
     // We are skipping animations for some routes, likes hooks & the player mainly
 
     return route.includes("/playable") || route.includes("/hook");
   }
 
-  shouldResetStateForRoute(route) {
+  shouldResetStateForRoute(route: string) {
     // We are resetting the transitioner state for root routes
 
-    return (route?.match(/river\//g) || []).length === 1;
+    return countRiverSegments(route) === 1;
   }
 
-  transitionWithoutAnimation(resetState) {
-    const { scenes } = this.state;
+  transitionWithoutAnimation(resetState?: boolean) {
+    // Scenes after the visible one are only leaving (back animation in flight),
+    // so the new scene replaces the one being backed to
+    const scenes = this.state.scenes.slice(0, this.state.to.index + 1);
     const newScene = prepareScene(this.props.children);
     const isLastSceneHook = scenes[scenes.length - 1].key.startsWith("/hook");
 
-    let newState;
+    let newState: Pick<State, "scenes"> | Pick<State, "scenes" | "to">;
 
     if (resetState) {
       newState = {
@@ -263,20 +295,27 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     }
   }
 
-  // Sets state.animating to false
-  pushTransitionEnd() {
+  // Sets state.animating to false,
+  // unless a newer transition has started since this one
+  pushTransitionEnd(transitionId: number) {
+    if (transitionId !== this.transitionId) return;
+
     this.setState({
       animating: false,
     });
   }
 
   // Sets state.animating to false
-  // and remove last scene from scenes stack
-  backTransitionEnd(stepsBack) {
-    this.setState({
+  // and drops every scene after the target one. Reads the latest state,
+  // so it's correct however many backs were merged into this animation.
+  // Ignored if a newer transition has started since this one
+  backTransitionEnd(transitionId: number) {
+    if (transitionId !== this.transitionId) return;
+
+    this.setState(({ scenes, to }) => ({
       animating: false,
-      scenes: take(this.state.scenes.length - stepsBack, this.state.scenes),
-    });
+      scenes: scenes.slice(0, to.index + 1),
+    }));
   }
 
   // On initial state, both "to" and "from" point to a single scene

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

@@ -1,10 +1,12 @@
 import React from "react";
-import { Text, View } from "react-native";
+import { Animated, Text, View } from "react-native";
+import { v4 as uuidV4 } from "uuid";
 
 import { AnimationManager } from "../AnimationManager";
 import {
   NAV_ACTION_BACK,
   NAV_ACTION_PUSH,
+  NAV_ACTION_REPLACE,
   TransitionerComponent,
 } from "../Transitioner";
 import { act, render } from "@testing-library/react-native";
@@ -66,6 +68,26 @@ const sceneFor = (route) => (
   </View>
 );
 
+const root = "/river/root";
+const child = `${root}/river/child`;
+const grandchild = `${child}/river/grandchild`;
+
+const propsFor = (route, previousAction, children = sceneFor(route)) => ({
+  navigator: {
+    previousAction,
+    currentRoute: route,
+    screenData: {},
+  },
+  transitionConfig: sceneTransitionConfig,
+  layoutData: {
+    isTablet: false,
+    isTabletPortrait: false,
+  },
+  children,
+});
+
+const sceneKeys = (ref) => ref.current.state.scenes.map((scene) => scene.key);
+
 describe("<TransitionerComponent />", () => {
   it("renders correctly", () => {
     const wrapper = render(
@@ -83,26 +105,12 @@ describe("<TransitionerComponent />", () => {
       .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")} />
+      <TransitionerComponent
+        ref={ref}
+        {...propsFor(root, NAV_ACTION_REPLACE)}
+      />
     );
 
     act(() => {
@@ -129,6 +137,286 @@ describe("<TransitionerComponent />", () => {
       );
     });
 
-    expect(ref.current.state.scenes.map((scene) => scene.key)).toEqual([root]);
+    expect(sceneKeys(ref)).toEqual([root]);
+  });
+
+  describe("with interruptible animations", () => {
+    // End callback of the animation that is currently "running"
+    let runningAnimationEnd = null;
+
+    const finishAnimation = () => {
+      act(() => {
+        const done = runningAnimationEnd;
+        runningAnimationEnd = null;
+        done?.();
+      });
+    };
+
+    const mountTransitioner = ({
+      initialRoute = root,
+      renderScene = sceneFor,
+    } = {}) => {
+      const ref = React.createRef();
+
+      const transitioner = (route, action) => (
+        <TransitionerComponent
+          ref={ref}
+          {...propsFor(route, action, renderScene(route))}
+        />
+      );
+
+      const { rerender } = render(
+        transitioner(initialRoute, NAV_ACTION_REPLACE)
+      );
+
+      const navigate = (route, action) => {
+        act(() => {
+          rerender(transitioner(route, action));
+        });
+      };
+
+      return { ref, navigate };
+    };
+
+    beforeEach(() => {
+      let sceneCount = 0;
+      uuidV4.mockImplementation(() => `scene-${++sceneCount}`);
+
+      jest
+        .spyOn(AnimationManager.prototype, "animate")
+        .mockImplementation((_, done) => {
+          runningAnimationEnd = done;
+        });
+
+      const setValue = Animated.Value.prototype.setValue;
+
+      // RN 0.77: setValue() stops the running animation, which calls
+      // its end callback synchronously with { finished: false }
+      jest
+        .spyOn(Animated.Value.prototype, "setValue")
+        .mockImplementation(function (value) {
+          const interrupted = runningAnimationEnd;
+          runningAnimationEnd = null;
+          interrupted?.();
+
+          return setValue.call(this, value);
+        });
+    });
+
+    afterEach(() => {
+      runningAnimationEnd = null;
+      jest.restoreAllMocks();
+      uuidV4.mockReset();
+    });
+
+    it("drops interrupted scenes when going back twice during a back animation", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+      navigate(grandchild, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      navigate(child, NAV_ACTION_BACK);
+      navigate(root, NAV_ACTION_BACK);
+
+      expect(ref.current.state.animating).toBe(true);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([root]);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("remounts the screen when revisiting it after a quick double back", () => {
+      const mounts = {};
+
+      const MountProbe = ({ pathname }) => {
+        React.useEffect(() => {
+          mounts[pathname] = (mounts[pathname] || 0) + 1;
+        }, [pathname]);
+
+        return <Text>{pathname}</Text>;
+      };
+
+      const { ref, navigate } = mountTransitioner({
+        renderScene: (route) => <MountProbe pathname={route} />,
+      });
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const originalChildId = ref.current.state.scenes[1].screenUniqueId;
+
+      navigate(grandchild, NAV_ACTION_PUSH);
+      finishAnimation();
+      navigate(child, NAV_ACTION_BACK);
+      navigate(root, NAV_ACTION_BACK);
+      finishAnimation();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const { scenes, to } = ref.current.state;
+
+      expect(scenes).toHaveLength(2);
+      expect(to.index).toBe(1);
+      expect(scenes[1].screenUniqueId).not.toBe(originalChildId);
+      expect(mounts[child]).toBe(2);
+    });
+
+    it("keeps a single scene when going back from the first scene", () => {
+      const { ref, navigate } = mountTransitioner({ initialRoute: child });
+
+      navigate(root, NAV_ACTION_BACK);
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([root]);
+      expect(ref.current.state.to.index).toBe(0);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("pushes a fresh scene after a completed single back", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const originalChildId = ref.current.state.scenes[1].screenUniqueId;
+
+      navigate(root, NAV_ACTION_BACK);
+      finishAnimation();
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const { scenes, to } = ref.current.state;
+
+      expect(sceneKeys(ref)).toEqual([root, child]);
+      expect(to.index).toBe(1);
+      expect(scenes[1].screenUniqueId).not.toBe(originalChildId);
+    });
+
+    it("ignores the end of a back animation that a newer back superseded", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+      navigate(grandchild, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      navigate(child, NAV_ACTION_BACK);
+
+      const supersededEnd = runningAnimationEnd;
+
+      // Deliver the interrupted animation's end late, after the newer one started
+      Animated.Value.prototype.setValue.mockImplementation(() => {});
+
+      navigate(root, NAV_ACTION_BACK);
+
+      act(() => {
+        supersededEnd();
+      });
+
+      expect(ref.current.state.animating).toBe(true);
+      expect(sceneKeys(ref)).toEqual([root, child, grandchild]);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([root]);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("drops the pushed scene when going back before its push animation ends", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      navigate(root, NAV_ACTION_BACK);
+
+      expect(ref.current.state.animating).toBe(true);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([root]);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("pushes right after the visible scene even when stale scenes are left behind", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      // Leftover past to.index, as some other path could leave behind
+      act(() => {
+        ref.current.setState(({ scenes }) => ({
+          scenes: [
+            ...scenes,
+            {
+              ...scenes[1],
+              key: `${root}/river/stale`,
+              screenUniqueId: "stale",
+            },
+          ],
+        }));
+      });
+
+      navigate(grandchild, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      const { scenes, to } = ref.current.state;
+
+      expect(sceneKeys(ref)).toEqual([root, child, grandchild]);
+      expect(scenes[to.index].key).toBe(grandchild);
+    });
+
+    it("shows the replaced screen when going home during a back animation", () => {
+      const home = "/river/home";
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      navigate(root, NAV_ACTION_BACK);
+      navigate(home, NAV_ACTION_REPLACE);
+
+      const { scenes, to } = ref.current.state;
+
+      expect(scenes[to.index].key).toBe(home);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).toEqual([home]);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("shows the pushed screen when pushing during a back animation", () => {
+      const sibling = `${root}/river/sibling`;
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      finishAnimation();
+
+      navigate(root, NAV_ACTION_BACK);
+      navigate(sibling, NAV_ACTION_PUSH);
+
+      const { scenes, to } = ref.current.state;
+
+      expect(scenes[to.index].key).toBe(sibling);
+
+      finishAnimation();
+
+      expect(sceneKeys(ref)).not.toContain(child);
+      expect(ref.current.state.animating).toBe(false);
+    });
+
+    it("keeps both scenes when pushing during a push animation", () => {
+      const { ref, navigate } = mountTransitioner();
+
+      navigate(child, NAV_ACTION_PUSH);
+      navigate(grandchild, NAV_ACTION_PUSH);
+
+      expect(sceneKeys(ref)).toEqual([child, grandchild]);
+      expect(ref.current.state.to.index).toBe(1);
+    });
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.108",
+  "version": "16.0.0-rc.109",
   "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.108",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.108",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.108",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.108",
+    "@applicaster/applicaster-types": "16.0.0-rc.109",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.109",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.109",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.109",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",