@applicaster/zapp-react-native-ui-components 15.0.0-alpha.8621453569 → 15.0.0-alpha.9300744523

package/Components/Screen/index.tsx

@@ -1,8 +1,7 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
 import { AccessibilityInfo, findNodeHandle, View } from "react-native";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
@@ -41,7 +40,7 @@ type Props = {
 export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
-  const { plugins } = usePickFromState(["plugins"]);
+  const plugins = usePlugins();
 
   // Gets the data for the current screen configuration
   const currentScreenData = useCurrentScreenData();

package/Components/Screen/navigationHandler.ts

@@ -1,35 +1,19 @@
 import { resolveNavigationPlugin } from "@applicaster/zapp-react-native-utils/navigationUtils";
 
-/**
- * This function helps to decide wether the menu should be presented on the screen
- * based on route and / or screen Data
- *
- * 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}
- */
-export function isMenuVisible(route, screenData, plugins) {
-  const plugin = resolveNavigationPlugin({
+export const BOTTOM_TABS_PLUGIN_ID = "quick-brick-bottom-tabs";
+
+export const SIDE_MENU_PLUGIN_ID = "quick_brick_side_menu";
+
+export function getMenuPlugin(screenData, plugins) {
+  return resolveNavigationPlugin({
     category: "menu",
     navigations:
       screenData?.navigations || screenData?.targetScreen?.navigations,
     plugins,
   });
+}
 
-  const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
-
-  if (!isBottomTabsPlugin) {
-    return false;
-  }
-
+function shouldShowNavigation(route, screenData) {
   if (route.includes("playable")) {
     return false;
   }
@@ -56,3 +40,44 @@ export function isMenuVisible(route, screenData, plugins) {
 
   return true;
 }
+
+/**
+ * This function helps to decide whether the menu should be presented on the screen
+ * based on route and / or screen Data
+ *
+ * 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}
+ */
+export function isMenuVisible(route, screenData, plugins) {
+  const plugin = getMenuPlugin(screenData, plugins);
+
+  const isBottomTabsPlugin = plugin?.identifier === BOTTOM_TABS_PLUGIN_ID;
+  const isSideMenuPlugin = plugin?.identifier === SIDE_MENU_PLUGIN_ID;
+
+  if (!isBottomTabsPlugin && !isSideMenuPlugin) {
+    return false;
+  }
+
+  return shouldShowNavigation(route, screenData);
+}
+
+export function isBottomTabVisible(route, screenData, plugins) {
+  const plugin = getMenuPlugin(screenData, plugins);
+
+  const isBottomTabsPlugin = plugin?.identifier === BOTTOM_TABS_PLUGIN_ID;
+
+  if (!isBottomTabsPlugin) {
+    return false;
+  }
+
+  return shouldShowNavigation(route, screenData);
+}

package/Components/Screen/orientationHandler.ts

@@ -7,7 +7,7 @@ import {
   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 { usePlugins, useAppData } from "@applicaster/zapp-react-native-redux";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
@@ -65,8 +65,8 @@ export function useNewOrientationForScreenData({
 }: OrientationHookArgs) {
   const isTablet = useIsTablet();
 
-  const { appData, plugins } = usePickFromState(["appData", "plugins"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const plugins = usePlugins();
+  const { isTabletPortrait } = useAppData();
   const isLandscapeTablet = isTablet && !isTabletPortrait;
 
   const screenOrientation = useGetScreenOrientation(screenData);

package/Components/ScreenResolver/index.tsx

@@ -11,12 +11,19 @@ import { LinkHandler } from "../LinkHandler";
 import { Favorites } from "../Favorites";
 import { ZappPipesScreenContext } from "../../Contexts";
 import { componentsLogger } from "../../Helpers/logger";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  useAppSelector,
+  usePlugins,
+} from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useNavigation,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 
 import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
 import { ScreenResultCallback } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/callbackNavigationAction";
+import { selectComponents } from "@applicaster/zapp-react-native-redux";
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -49,11 +56,10 @@ export function ScreenResolverComponent(props: Props) {
 
   const { hookPlugin } = screenData || {};
 
-  const { components, plugins, rivers } = usePickFromState([
-    "components",
-    "plugins",
-    "rivers",
-  ]);
+  const plugins = usePlugins();
+  const rivers = useRivers();
+
+  const components = useAppSelector(selectComponents);
 
   const {
     videoModalState: { mode },

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -1,6 +1,11 @@
 import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { once } from "ramda";
+import { race, Subject, Subscription } from "rxjs";
+import { first } from "rxjs/operators";
+
+import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD = 2000; // 2 seconds
 
 const INITIAL_NUMBER_TO_LOAD = 3;
 
@@ -34,7 +39,8 @@ const getNumberOfComponentsWaitToLoadBeforePresent = (
 export class ScreenRevealManager {
   public numberOfComponentsWaitToLoadBeforePresent: number;
   private renderingState: Array<ComponentLoadingState>;
-  private callback: Callback;
+  private subject$ = new Subject<void>();
+  private subscription: Subscription;
 
   constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
     this.numberOfComponentsWaitToLoadBeforePresent =
@@ -45,32 +51,58 @@ export class ScreenRevealManager {
       this.numberOfComponentsWaitToLoadBeforePresent
     );
 
-    this.callback = once(callback);
+    this.subscription = race(
+      withTimeout$(MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD),
+      this.subject$
+    )
+      .pipe(first())
+      .subscribe(callback);
   }
 
   onLoadFinished = (index: number): void => {
+    const currentState = this.renderingState[index];
+
+    if (
+      COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
+      COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
+    ) {
+      return;
+    }
+
     this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS;
 
     if (
       getNumberOfLoaded(this.renderingState) >=
       this.numberOfComponentsWaitToLoadBeforePresent
     ) {
-      this.setIsReadyToShow();
+      this.subject$.next();
+      this.subject$.complete();
     }
   };
 
   onLoadFailed = (index: number): void => {
+    const currentState = this.renderingState[index];
+
+    if (
+      COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
+      COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
+    ) {
+      return;
+    }
+
     this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE;
 
     if (
       getNumberOfLoaded(this.renderingState) >=
       this.numberOfComponentsWaitToLoadBeforePresent
     ) {
-      this.setIsReadyToShow();
+      this.subject$.next();
+      this.subject$.complete();
     }
   };
 
-  setIsReadyToShow = (): void => {
-    this.callback();
-  };
+  dispose(): void {
+    this.subscription?.unsubscribe();
+    this.subject$.complete();
+  }
 }

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -2,106 +2,123 @@ import {
   ScreenRevealManager,
   COMPONENT_LOADING_STATE,
 } from "../ScreenRevealManager";
+import { Subject } from "rxjs";
+
+jest.mock("@applicaster/zapp-react-native-utils/arrayUtils", () => ({
+  makeListOf: jest.fn((value: any, length: number) =>
+    Array(length).fill(value)
+  ),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/componentsUtils", () => ({
+  isFirstComponentGallery: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
+  withTimeout$: jest.fn(),
+}));
+
+import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 describe("ScreenRevealManager", () => {
-  const mockCallback = jest.fn();
+  let mockCallback: jest.Mock;
+  let timeout$: Subject<void>;
 
   beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should initialize with the correct number of components to wait for", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+    jest.useFakeTimers();
+    mockCallback = jest.fn();
+    timeout$ = new Subject();
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    (withTimeout$ as jest.Mock).mockReturnValue(timeout$);
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
 
-    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+    (makeListOf as jest.Mock).mockImplementation((value, length) =>
+      Array(length).fill(value)
+    );
+  });
 
-    expect(manager.renderingState).toEqual([
-      COMPONENT_LOADING_STATE.UNKNOWN,
-      COMPONENT_LOADING_STATE.UNKNOWN,
-      COMPONENT_LOADING_STATE.UNKNOWN,
-    ]);
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+    jest.resetAllMocks();
   });
 
-  it("should call the callback when the required number of components are loaded successfully", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should initialize with correct number of components and UNKNOWN state", () => {
+    const components = new Array(5).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+    expect(makeListOf).toHaveBeenCalledWith(COMPONENT_LOADING_STATE.UNKNOWN, 3);
+  });
 
-    manager.onLoadFinished(0);
-    manager.onLoadFinished(1);
-    manager.onLoadFinished(2);
+  // ────────────────────────────────────────────────
+  it("should set numberOfComponentsWaitToLoadBeforePresent to 1 if first component is gallery", () => {
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(true);
 
-    expect(mockCallback).toHaveBeenCalledTimes(1);
+    const components = new Array(5).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
+
+    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(1);
   });
 
-  it("should call the callback when the required number of components fail to load", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should trigger callback after all components load successfully", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    mgr.onLoadFinished(0);
+    expect(mockCallback).not.toHaveBeenCalled();
 
-    manager.onLoadFailed(0);
-    manager.onLoadFailed(1);
-    manager.onLoadFailed(2);
+    mgr.onLoadFinished(1);
+    expect(mockCallback).not.toHaveBeenCalled();
 
+    mgr.onLoadFinished(2);
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("should call the callback when a mix of successful and failed loads meet the required number", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
-
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+  // ────────────────────────────────────────────────
+  it("should trigger callback after some components fail to load but all finished", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    manager.onLoadFinished(0);
-    manager.onLoadFailed(1);
-    manager.onLoadFinished(2);
+    mgr.onLoadFinished(0);
+    mgr.onLoadFailed(1);
+    mgr.onLoadFailed(2);
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("should not call the callback if the required number of components are not loaded", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
-
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+  // ────────────────────────────────────────────────
+  it("should not trigger callback twice when same component finishes twice", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    manager.onLoadFinished(0);
-    manager.onLoadFailed(1);
+    mgr.onLoadFinished(0);
+    mgr.onLoadFinished(0); // duplicate
+    mgr.onLoadFinished(1);
+    mgr.onLoadFinished(2);
 
-    expect(mockCallback).not.toHaveBeenCalled();
+    expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("should call the callback when the when first component is gallery and it was loaded successfully", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "gallery-qb" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should trigger callback when timeout$ emits before all loaded", () => {
+    const components = new Array(3).fill({});
+    new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
-
-    manager.onLoadFinished(0);
+    timeout$.next(); // simulate timeout event from withTimeout$
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
+
+  // ────────────────────────────────────────────────
+  it("should not call callback if nothing loads and no timeout emitted", () => {
+    const components = new Array(3).fill({});
+    new ScreenRevealManager(components, mockCallback);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
 });

package/Components/Transitioner/Scene.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
@@ -95,9 +95,22 @@ function SceneComponent({
   });
 
   const frame = useSafeAreaFrame();
+
+  const [memoFrame, setMemoFrame] = React.useState(frame);
+
+  useEffect(() => {
+    if (isActive) {
+      setMemoFrame((oldFrame) =>
+        oldFrame.width === frame.width && oldFrame.height === frame.height
+          ? oldFrame
+          : frame
+      );
+    }
+  }, [isActive, frame.width, frame.height]);
+
   const isAnimating = animating && overlayStyle;
 
-  const dimensions = isAnimating ? fullWidthDimensions : frame;
+  const dimensions = isAnimating ? fullWidthDimensions : memoFrame;
 
   return (
     <Animated.View

package/Components/Transitioner/index.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } from "@applicaster/zapp-react-native-redux";
+
 import { TransitionerComponent } from "./Transitioner";
 
 export const Transitioner = (props) => {
@@ -16,8 +17,7 @@ export const Transitioner = (props) => {
     deviceInfo: true,
   });
 
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const { isTabletPortrait } = useAppData();
 
   return (
     <TransitionerComponent

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -4,8 +4,11 @@ import { Animated, Dimensions } from "react-native";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 
 import { useConfiguration } from "../utils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
-import { isMenuVisible } from "../../Screen/navigationHandler";
+import {
+  useAppData,
+  usePlugins,
+} from "@applicaster/zapp-react-native-redux/hooks";
+import { isBottomTabVisible } from "../../Screen/navigationHandler";
 
 import {
   useSafeAreaFrame,
@@ -18,7 +21,6 @@ import {
 import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
 import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useIsTablet as getIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useAppSelector } from "@applicaster/zapp-react-native-redux";
 
 export type ModalAnimationContextT = {
   yTranslate: React.MutableRefObject<Animated.AnimatedInterpolation<number>>;
@@ -64,13 +66,15 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     screenData,
   } = useNavigation();
 
-  const isTabletPortrait = useAppSelector(
-    (state) => state.appData.isTabletPortrait
-  );
+  const { isTabletPortrait } = useAppData();
 
   const plugins = usePlugins();
 
-  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+  const bottomTabsVisible = isBottomTabVisible(
+    currentRoute,
+    screenData,
+    plugins
+  );
 
   const frame = useSafeAreaFrame();
   const insets = useSafeAreaInsets();
@@ -115,7 +119,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   React.useEffect(() => {
     const collapsedHeight =
       minimisedHeight +
-      (menuVisible ? bottomTabBarHeight : 0) +
+      (bottomTabsVisible ? bottomTabBarHeight : 0) +
       (isOldAndroidDevice ? 0 : insets.bottom) + // insets.bottom is added to properly display docked modal
       PROGRESS_BAR_HEIGHT;
 
@@ -136,7 +140,7 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
       setHeightAboveMinimised(heightAboveMinimised);
       offset.current = heightAboveMinimised;
     }
-  }, [frame.height, insets.bottom, menuVisible, minimisedHeight]);
+  }, [frame.height, insets.bottom, bottomTabsVisible, minimisedHeight]);
 
   return (
     <ReactContext.Provider

package/Components/VideoModal/utils.ts

@@ -1,32 +1,35 @@
 import { mergeRight } from "ramda";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useAppSelector,
+  useContentTypes,
+} from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { create } from "zustand";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { selectPluginConfigurationsByPluginId } from "@applicaster/zapp-react-native-redux";
 
 export const useConfiguration = () => {
   const {
     videoModalState: { item },
   } = useNavigation();
 
-  const { rivers, contentTypes, pluginConfigurations } = usePickFromState([
-    "rivers",
-    "contentTypes",
-    "pluginConfigurations",
-  ]);
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
 
   const targetScreenId = contentTypes?.[item?.type?.value]?.screen_id;
   const targetScreenConfiguration = rivers?.[targetScreenId];
 
-  const pluginConfiguration =
-    pluginConfigurations[targetScreenConfiguration?.type]?.configuration_json;
+  const { configuration_json } = useAppSelector((state) =>
+    selectPluginConfigurationsByPluginId(state, targetScreenConfiguration?.type)
+  );
 
   const playerPluginConfig = playerManager.getPluginConfiguration();
 
   const config = mergeRight(playerPluginConfig, {
-    ...pluginConfiguration,
+    ...configuration_json,
     ...targetScreenConfiguration?.general,
     ...targetScreenConfiguration?.styles,
   });

package/Decorators/Analytics/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { getAnalyticsFunctions } from "@applicaster/zapp-react-native-utils/analyticsUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 type ComponentProps = {
   component: {
@@ -21,11 +20,13 @@ type ComponentProps = {
 
 function withAnalytics(Component) {
   return function WithAnalytics(props: ComponentProps) {
-    const { appData } = usePickFromState(["appData"]);
-
     const analyticsFunctions = React.useMemo(
-      () => getAnalyticsFunctions({ props, appData }),
-      [props, appData]
+      () =>
+        getAnalyticsFunctions({
+          component: props.component,
+          zappPipesData: props.zappPipesData,
+        } as any),
+      [props.component, props.zappPipesData]
     );
 
     return (

package/Decorators/ConfigurationWrapper/__tests__/__snapshots__/withConfigurationProvider.test.tsx.snap

@@ -88,6 +88,7 @@ exports[`withConfigurationProvider correctly passes all the configuration keys c
   tab_cell_padding_right={10}
   tab_cell_padding_top={14}
   tablet_theme={false}
+  tabs_screen_background_color="transparent"
   target={false}
   target_screen_switch={false}
   text_label_active_font_color="rgba(239, 239, 239, 0.5)"

package/Decorators/ConfigurationWrapper/const.ts

@@ -208,4 +208,5 @@ export const keysMap: Record<string, Function> = {
   tab_bar_item_margin_right: castOrDefaultValue(Number, 0),
   tab_bar_item_margin_bottom: castOrDefaultValue(Number, 0),
   tab_bar_item_margin_left: castOrDefaultValue(Number, 0),
+  tabs_screen_background_color: castOrDefaultValue(R.identity, "transparent"),
 };

package/Decorators/ZappPipesDataConnector/__tests__/zappPipesDataConnector.test.js

@@ -3,7 +3,7 @@ import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUt
 
 import * as zappPipesRedux from "@applicaster/zapp-react-native-redux/ZappPipes";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 import { zappPipesDataConnector } from "../index";