@applicaster/zapp-react-native-ui-components 16.0.0-rc.37 → 16.0.0-rc.38

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { append, compose, identity, isNil, tail, take, update } from "ramda";
+import { append, compose, identity, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -10,6 +10,7 @@ import {
   shouldSkipAnimationForPreviousWebViewScene,
 } from "./utils";
 import { v4 as uuid_v4 } from "uuid";
+import { isScreenActiveForRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
 
 export const NAV_ACTION_PUSH = "PUSH";
 
@@ -50,16 +51,16 @@ function scenesForBackTransition(props: SceneProps, { scenes }) {
     : [prepareScene(props.children), scenes[0]];
 }
 
-const isModalClosed = (navigator) => {
-  return !!isNil(navigator?.modalData);
-};
-
 type Props = {
   transitionConfig: any;
   children: React.ReactNode;
   navigator: {
     previousAction: string;
     currentRoute: string;
+    videoModalState?: {
+      visible?: boolean;
+      mode?: string;
+    };
     screenData: {
       [key: string]: any;
     };
@@ -283,8 +284,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // so only a single scene should be rendered,
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
-    const { contentStyle } = this.props;
-    const screenData = this.props.children.props.screenData;
+    const { contentStyle, navigator, children } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
+    const screenData = children.props.screenData;
     const pathname = scenes[to.index].key;
 
     return (
@@ -293,7 +296,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
-            isActive={pathname === this.props.navigator.currentRoute}
+            isActive={isScreenActiveForRoute(
+              pathname,
+              currentRoute,
+              videoModalState
+            )}
             contentStyle={contentStyle}
             key={scenes[to.index].key}
             screenUniqueId={scenes[to.index].screenUniqueId}
@@ -311,16 +318,19 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // Looks redundant, but when written like this
   // we do not need to pass or generate keys.
   renderScenes({ scenes, from, to }) {
-    const { contentStyle } = this.props;
+    const { contentStyle, navigator } = this.props;
+
+    const { currentRoute, videoModalState } = navigator;
 
     const fromScene = scenes[from.index] && (
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
-        isActive={
-          scenes[from.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[from.index].key,
+          currentRoute,
+          videoModalState
+        )}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -336,10 +346,11 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
-        isActive={
-          scenes[to.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={isScreenActiveForRoute(
+          scenes[to.index].key,
+          currentRoute,
+          videoModalState
+        )}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}

package/package.json

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