@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4757075613 → 12.0.0-alpha.4796013211

package/Components/Screen/index.tsx

@@ -1,13 +1,19 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
-import * as R from "ramda";
 import { View } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  isOrientationCompatible,
+  useGetScreenOrientation,
+} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { getNavigationPropsV2 } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  shouldNavBarDisplayMenu,
+  getNavBarProps,
+  getScreenId,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
   useDimensions,
   useRoute,
@@ -18,45 +24,24 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
-import { useScreenOrientationHandler } from "./orientationHandler";
-
-const getScreenId = (
-  screenData: LegacyNavigationScreenData,
-  fallbackRiver: ZappRiver
-) => {
-  return screenData?.targetScreen
-    ? screenData?.targetScreen?.id ?? fallbackRiver.id
-    : "screen_id" in screenData
-    ? screenData.screen_id
-    : fallbackRiver.id;
+import { isValidColor } from "./utils";
+
+const screenStyles = {
+  flex: 1,
+  paddingTop: 0,
+  // paddingBottom: insets.bottom, // Should be applied directly by UI plugin
+  // paddingLeft: insets.left, // Should be applied directly by UI plugin
+  // paddingRight: insets.right, // Should be applied directly by UI plugin
 };
 
-function colorIsNotTransparent(color) {
-  const layers = R.compose(
-    R.map(R.trim),
-    R.split(","),
-    R.replace(")", ""),
-    R.replace("rgba(", "")
-  )(color);
-
-  const alpha = Number(layers?.[3]);
-
-  return alpha > 0;
-}
-
-function isValidColor(string) {
-  return string && string !== "transparent" && colorIsNotTransparent(string);
-}
-
 type Props = {
-  setToggleMenu: () => void;
-  setCloseMenu: () => void;
+  pathname: unknown;
+  screenData: unknown;
 };
 
-export function Screen({ setToggleMenu, setCloseMenu }: Props) {
+export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
@@ -64,31 +49,35 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   // Gets the data for the current screen configuration
   const currentScreenData = useCurrentScreenData();
   const { backgroundColor } = useScreenConfiguration(currentScreenData.id);
-  const insets = useSafeAreaInsets();
 
-  const { width: screenWidth } = useDimensions("screen", {
+  const {
+    width: screenWidth,
+    height,
+    deviceInfo,
+  } = useDimensions("screen", {
     fullDimensions: true,
   });
 
-  const routeData = useRoute();
+  const { screenData, pathname } = useRoute();
 
   const currentRiver = useScreenData(
-    getScreenId(routeData.screenData, navigation.activeRiver)
+    getScreenId(screenData, navigation.activeRiver)
   );
 
   const { title } = useNavbarState();
 
-  const navBarProps = React.useMemo(
-    () => ({
-      ...getNavigationPropsV2({
-        currentRiver,
-        title,
-        category: "nav_bar",
-      }),
-      setToggleMenu,
-      setCloseMenu,
-    }),
-    [currentRiver, setCloseMenu, setToggleMenu]
+  const isTablet = deviceInfo?.isTablet;
+
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
+
+  const layoutData = { isTablet, isTabletPortrait, width: screenWidth, height };
+
+  const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
+
+  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
+    getNavBarProps(currentRiver, pathname, title),
+    [currentRiver, pathname]
   );
 
   const NavBar = React.useMemo(
@@ -97,12 +86,10 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
         "nav_bar",
         currentRiver,
         plugins
-      ) as React.ComponentType<MobileNavBarPluginProps>,
+      ) as React.ComponentType<MobileNavBarPluginProps & { hasMenu: boolean }>,
     []
   );
 
-  const { screenData, pathname } = routeData;
-
   const offlinePlugin = getComponentModule({
     plugins,
     components: {},
@@ -113,35 +100,38 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
 
   const style = React.useMemo(
     () => ({
-      flex: 1,
+      ...screenStyles,
       backgroundColor: isValidColor(backgroundColor)
         ? backgroundColor
         : theme.app_background_color,
-      paddingTop: 0,
-      // paddingBottom: insets.bottom, // Should be applied directly by UI plugin
-      // paddingLeft: insets.left, // Should be applied directly by UI plugin
-      // paddingRight: insets.right, // Should be applied directly by UI plugin
     }),
-    [insets, screenWidth, theme.app_background_color, backgroundColor]
+    [theme.app_background_color, backgroundColor]
   );
 
   const targetScreenData =
     currentScreenData || (screenData as any)?.targetScreen || screenData;
 
-  useScreenOrientationHandler({ screenData: targetScreenData });
+  const orientation = useGetScreenOrientation(targetScreenData);
+
+  // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
+  // This saves unnecessary re-renders and user will not see distorted aspect screen.
+  if (
+    !isOrientationCompatible({
+      orientation,
+      layoutData,
+    })
+  ) {
+    return <View style={style} />;
+  }
 
   return (
-    <ScreenContextProvider pathname={pathname}>
-      <View style={style}>
-        <NavBar
-          {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
-        />
-
-        <OfflineFallbackScreen screenData={targetScreenData}>
-          {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
-          <RouteManager pathname={pathname} screenData={screenData} />
-        </OfflineFallbackScreen>
-      </View>
-    </ScreenContextProvider>
+    <View style={style}>
+      {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
+
+      <OfflineFallbackScreen screenData={targetScreenData}>
+        {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
+        <RouteManager pathname={pathname} screenData={screenData} />
+      </OfflineFallbackScreen>
+    </View>
   );
 }

package/Components/Screen/navigationHandler.ts

@@ -5,6 +5,11 @@
  * is similar to the navbar, except that it covers scenarios where only the navbar (and not)
  * the menu, will be hidden
  *
+ * - playable screens
+ * - qb_search_screen
+ * - screen hooks that specify showNavBar or presentFullScreen
+ * - screens or nested screens that have allow_screen_plugin_presentation set to true
+ *
  * @param {String} route current route of the screen
  * @param {Object} screenData payload associated with the currently presented screen
  * @returns {Boolean}
@@ -21,9 +26,7 @@ export function isMenuVisible(route, screenData) {
   if (screenData?.hookPlugin) {
     const hookPlugin = screenData?.hookPlugin?.module;
 
-    return (
-      hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true || false
-    );
+    return hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true;
   }
 
   if (

package/Components/Screen/orientationHandler.ts

@@ -1,14 +1,16 @@
 import React, { useLayoutEffect } from "react";
+
 import {
   allowedOrientationsForScreen,
   ORIENTATIONS,
   getOrientation,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
-
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+
 import { ZappHookModalContext } from "../../Contexts";
 import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
 
@@ -79,14 +81,23 @@ export function useNewOrientationForScreenData({
         screenOrientation;
 }
 
-export function useScreenOrientationHandler({
-  screenData,
-}: OrientationHookArgs) {
+type Props = {
+  screenData: {
+    screen: {};
+  };
+  isActive: boolean;
+};
+
+export function useScreenOrientationHandler({ screenData, isActive }: Props) {
   const { isHooksExecutionInProgress } = React.useContext<HookModalContextT>(
     ZappHookModalContext.ReactContext
   );
 
-  const newOrientation = useNewOrientationForScreenData({ screenData });
+  const prevIsActive = usePrevious(isActive);
+
+  const newOrientation = useNewOrientationForScreenData({
+    screenData: screenData.screen,
+  });
 
   useLayoutEffect(() => {
     // Null means screen does not have orientation preference, so we can skip rotate
@@ -100,12 +111,12 @@ export function useScreenOrientationHandler({
       return;
     }
 
-    if (newOrientation !== current) {
+    if (!prevIsActive && isActive && newOrientation !== current) {
       current = newOrientation;
 
       setOrientation(newOrientation);
     }
-  }, [newOrientation, isHooksExecutionInProgress]);
+  }, [newOrientation, isHooksExecutionInProgress, prevIsActive, isActive]);
 }
 
 export function useOrientationHandler({ screenData }: OrientationHookArgs) {

package/Components/Screen/utils.ts

@@ -0,0 +1,16 @@
+import { map, split, replace, compose, trim } from "ramda";
+
+function colorIsNotTransparent(color) {
+  const layers = compose(
+    map(trim),
+    split(","),
+    replace(")", ""),
+    replace("rgba(", "")
+  )(color);
+
+  return Number(layers?.[3]) > 0;
+}
+
+export function isValidColor(string) {
+  return string && string !== "transparent" && colorIsNotTransparent(string);
+}

package/Components/ScreenResolver/index.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
-import { useDispatch } from "react-redux";
+import { path, prop } from "ramda";
 import {
   findPluginByType,
   findPluginByIdentifier,
@@ -15,7 +14,6 @@ import { componentsLogger } from "../../Helpers/logger";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
-import { setAppStateHasFinishedTransitioning } from "@applicaster/zapp-react-native-redux/appState";
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -32,12 +30,13 @@ type Props = {
     nextFocusLeft?: React.Ref<any>;
     nextFocusUp?: React.Ref<any>;
   };
+  groupId?: string;
 };
 
 export function ScreenResolverComponent(props: Props) {
   useScreenAnalytics(props);
 
-  const { screenType, screenId, screenData } = props;
+  const { screenType, screenId, screenData, groupId } = props;
 
   const { hookPlugin } = screenData || {};
 
@@ -53,11 +52,8 @@ export function ScreenResolverComponent(props: Props) {
 
   const [, setScreenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const dispatch = useDispatch();
-
   React.useEffect(() => {
     setScreenContext(rivers[screenId]);
-    dispatch(setAppStateHasFinishedTransitioning());
   }, [screenId]);
 
   const ScreenPlugin =
@@ -81,6 +77,7 @@ export function ScreenResolverComponent(props: Props) {
         item={screenData}
         mode={mode === "PIP" ? "PIP" : "FULLSCREEN"}
         isModal={false}
+        groupId={groupId}
       />
     );
   }
@@ -98,14 +95,14 @@ export function ScreenResolverComponent(props: Props) {
   }
 
   const ScreenComponent =
-    R.path(["module", "Component"], ScreenPlugin) ||
-    R.prop("module", ScreenPlugin) ||
-    R.prop("Component", ScreenPlugin) ||
+    path(["module", "Component"], ScreenPlugin) ||
+    prop("module", ScreenPlugin) ||
+    prop("Component", ScreenPlugin) ||
     ScreenPlugin;
 
   const configuration =
-    R.prop("configuration", ScreenPlugin) ||
-    R.prop("__plugin_configuration", ScreenComponent);
+    prop("configuration", ScreenPlugin) ||
+    prop("__plugin_configuration", ScreenComponent);
 
   if (ScreenComponent) {
     return (

package/Components/Transitioner/Scene.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import {
-  Animated,
-  useWindowDimensions,
-  ViewProps,
-  ViewStyle,
-} from "react-native";
+import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
+
+import { useScreenOrientationHandler } from "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler";
+
 import { PathnameContext } from "../../Contexts/PathnameContext";
+import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
 type Props = {
   children: any;
@@ -16,6 +16,8 @@ type Props = {
   animating: boolean;
   contentStyle: ViewStyle;
   pathname: string;
+  isActive: boolean;
+  screenData: NavigationScreenData;
 };
 
 /**
@@ -38,34 +40,45 @@ export function Scene({
   animating,
   contentStyle,
   pathname,
+  isActive = false,
+  screenData,
 }: Props) {
+  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
+
+  useScreenOrientationHandler({
+    screenData,
+    isActive,
+  });
+
+  React.useLayoutEffect(() => {
+    if (isActive) {
+      setInitialScreenData(screenData);
+    }
+  }, [screenData, isActive]);
+
   const frame = useSafeAreaFrame();
-  const { height, width } = useWindowDimensions();
+  const isAnimating = animating && overlayStyle;
 
-  if (overlayStyle && animating) {
-    // Safe frame takes too long to update,
-    // so we can not rely on it there, and use height and width instead.
-    return (
-      <Animated.View
-        pointerEvents={pointerEvents}
-        style={[style, contentStyle, { height, width }]}
-      >
-        <PathnameContext.Provider value={pathname}>
-          {children}
-        </PathnameContext.Provider>
-        <Animated.View style={overlayStyle} />
-      </Animated.View>
-    );
-  }
+  const dimensions = isAnimating
+    ? {
+        width: "100%",
+        height: "100%",
+      }
+    : frame;
 
   return (
     <Animated.View
       pointerEvents={pointerEvents}
-      style={[style, contentStyle, frame]}
+      style={[style, contentStyle, dimensions]}
     >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
+      <ScreenDataContext.Provider value={initialScreenData}>
+        <PathnameContext.Provider value={pathname}>
+          <ScreenContextProvider pathname={pathname}>
+            {children}
+          </ScreenContextProvider>
+        </PathnameContext.Provider>
+      </ScreenDataContext.Provider>
+      {isAnimating && <Animated.View style={overlayStyle} />}
     </Animated.View>
   );
 }

package/Components/Transitioner/Transitioner.tsx

@@ -1,13 +1,10 @@
 import * as React from "react";
 import { View } from "react-native";
-import * as R from "ramda";
+import { update, compose, tail, append, take, identity } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
-import {
-  getScreenOrientation,
-  isOrientationCompatible,
-} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+
 import {
   getSceneByRoute,
   shouldSkipAnimationForPreviousWebViewScene,
@@ -49,7 +46,7 @@ function prepareScene(children) {
  */
 function scenesForBackTransition(props: SceneProps, { scenes }) {
   return scenes.length > 1
-    ? R.identity(scenes)
+    ? identity(scenes)
     : [prepareScene(props.children), scenes[0]];
 }
 
@@ -113,7 +110,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   pushTransitionStart() {
     this.setState(
       {
-        scenes: R.append(prepareScene(this.props.children), this.state.scenes),
+        scenes: append(prepareScene(this.props.children), this.state.scenes),
         ...this.animationManager.stateForAction(this.state, NAV_ACTION_PUSH),
       },
       () => {
@@ -169,21 +166,23 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
   transitionWithoutAnimation(resetState) {
     const { scenes } = this.state;
-
-    const newState = resetState
-      ? {
-          scenes: [prepareScene(this.props.children)],
-          to: {
-            index: 0,
-          },
-        }
-      : {
-          scenes: R.update(
-            scenes.length - 1,
-            prepareScene(this.props.children),
-            scenes
-          ),
-        };
+    const newScene = prepareScene(this.props.children);
+    const isLastSceneHook = scenes[scenes.length - 1].key.startsWith("/hook");
+
+    let newState;
+
+    if (resetState) {
+      newState = {
+        scenes: [newScene],
+        to: { index: 0 },
+      };
+    } else if (isLastSceneHook || scenes.length === 1) {
+      newState = { scenes: update(scenes.length - 1, newScene, scenes) };
+    } else {
+      newState = {
+        scenes: compose(tail, append(newScene))(scenes),
+      };
+    }
 
     this.setState(newState);
   }
@@ -226,7 +225,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
         this.shouldSkipAnimationForRoute(previousRoute) ||
         this.shouldSkipAnimationForRoute(currentRoute)
       ) {
-        return this.transitionWithoutAnimation();
+        // we are going back, in this case we need to have only one scene using resetState
+        const resetState = isGoingBack ? true : undefined;
+
+        return this.transitionWithoutAnimation(resetState);
       }
 
       switch (this.props.navigator.previousAction) {
@@ -269,7 +271,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   backTransitionEnd(stepsBack) {
     this.setState({
       animating: false,
-      scenes: R.take(this.state.scenes.length - stepsBack, this.state.scenes),
+      scenes: take(this.state.scenes.length - stepsBack, this.state.scenes),
     });
   }
 
@@ -277,33 +279,25 @@ 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, layoutData } = this.props;
-    const screenData = scenes[to.index]?.children?.props?.screenData;
-
-    const orientation = getScreenOrientation({
-      screenData,
-      layoutData,
-    });
+    const { contentStyle } = this.props;
+    const screenData = this.props.children.props.screenData;
+    const pathname = scenes[to.index].key;
 
-    // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
-    // This saves unnecessary re-renders and user will not see distorted aspect screen.
     return (
       <View style={styles.container}>
-        {scenes[to.index] &&
-          isOrientationCompatible({
-            orientation,
-            layoutData,
-          }) && (
-            <Scene
-              {...{ style: to.style }}
-              pathname={scenes[to.index].key}
-              contentStyle={contentStyle}
-              key={scenes[to.index].key}
-              screenUniqueId={scenes[to.index].screenUniqueId}
-            >
-              {scenes[to.index].children}
-            </Scene>
-          )}
+        {scenes[to.index] && (
+          <Scene
+            {...{ style: to?.style || {} }}
+            pathname={pathname}
+            isActive={pathname === this.props.navigator.currentRoute}
+            contentStyle={contentStyle}
+            key={scenes[to.index].key}
+            screenUniqueId={scenes[to.index].screenUniqueId}
+            screenData={screenData}
+          >
+            {scenes[to.index].children}
+          </Scene>
+        )}
       </View>
     );
   }
@@ -319,12 +313,14 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
+        isActive={scenes[from.index].key === this.props.navigator.currentRoute}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[from.index].screenUniqueId}
+        screenData={scenes[from.index].children.props.screenData}
       >
         {scenes[from.index].children}
       </Scene>
@@ -333,12 +329,14 @@ 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}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[to.index].screenUniqueId}
+        screenData={this.props.children.props.screenData}
       >
         {scenes[to.index].children}
       </Scene>

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

@@ -16,6 +16,13 @@ jest.mock("react-native-safe-area-context", () => ({
   })),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler",
+  () => ({
+    useScreenOrientationHandler: jest.fn(),
+  })
+);
+
 const { Scene } = require("../Scene");
 
 const wrapper = shallow(