@applicaster/zapp-react-native-ui-components 15.0.0-alpha.4153840309 → 15.0.0-alpha.4200413542

package/Components/Screen/orientationHandler.ts

@@ -1,18 +1,16 @@
-import React, { useLayoutEffect } from "react";
+import { useLayoutEffect } from "react";
 
 import {
   allowedOrientationsForScreen,
-  ORIENTATIONS,
   getOrientation,
+  ORIENTATIONS,
   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";
-
-import { ZappHookModalContext } from "../../Contexts";
-import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
+import { zappHookModalStore } from "../../Contexts/ZappHookModalContext";
 
 /**
  * This function calls the native module needed to set orientation
@@ -65,8 +63,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);
@@ -89,10 +87,6 @@ type Props = {
 };
 
 export function useScreenOrientationHandler({ screenData, isActive }: Props) {
-  const { isHooksExecutionInProgress } = React.useContext<HookModalContextT>(
-    ZappHookModalContext.ReactContext
-  );
-
   const prevIsActive = usePrevious(isActive);
 
   const newOrientation = useNewOrientationForScreenData({
@@ -105,6 +99,9 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
       return;
     }
 
+    // TODO: make sure it can be static getter and subscription is not needed
+    const { isHooksExecutionInProgress } = zappHookModalStore.getState();
+
     // If modal hook presented we need to skip
     // Change orientation for presenter screen
     if (isHooksExecutionInProgress) {
@@ -116,7 +113,7 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
 
       setOrientation(newOrientation);
     }
-  }, [newOrientation, isHooksExecutionInProgress, prevIsActive, isActive]);
+  }, [newOrientation, prevIsActive, isActive]);
 }
 
 export function useOrientationHandler({ screenData }: OrientationHookArgs) {

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/Tabs/TabContent.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { View, ViewStyle } from "react-native";
+import { View, StyleSheet } from "react-native";
 
 import { River } from "@applicaster/zapp-react-native-ui-components/Components";
 import { withNestedNavigationContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
 
 type Props = {
-  styles: Record<string, ViewStyle>;
   minHeight: number;
   changingTab: boolean;
   feedUrl: string;
@@ -14,9 +13,14 @@ type Props = {
   backgroundColor: string;
 };
 
+const styles = StyleSheet.create({
+  riverWrapper: {
+    flex: 1,
+  },
+});
+
 function TabContentComponent(props: Props) {
   const {
-    styles,
     minHeight,
     backgroundColor,
     changingTab,
@@ -29,7 +33,6 @@ function TabContentComponent(props: Props) {
     <View
       style={[
         styles.riverWrapper,
-
         {
           backgroundColor,
           minHeight,

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/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { act, renderHook, waitFor } from "@testing-library/react-native";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
@@ -13,16 +13,20 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return false initially, that changes after 1 second", () => {
+  it("should return false initially, that changes after 1 second", async () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
     expect(result.current).toBe(false);
 
-    jest.advanceTimersByTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 
   it("should return false when isPip is true", () => {
@@ -41,7 +45,7 @@ describe("useDelayedPlayerDetails", () => {
     expect(result.current).toBe(false);
   });
 
-  it("should return true for tablet regardless of other flags", () => {
+  it("should return true for tablet regardless of other flags", async () => {
     (useIsTablet as jest.Mock).mockReturnValue(true);
 
     const { result } = renderHook(() =>
@@ -52,8 +56,12 @@ describe("useDelayedPlayerDetails", () => {
       })
     );
 
-    jest.advanceTimersByTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 });

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/Components/Viewport/ViewportEvents/__tests__/viewportEvents.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   ViewportEvents,
   useViewportEventsContext,

package/Contexts/ScreenContext/index.tsx

@@ -16,6 +16,7 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
+
 import { Animated } from "react-native";
 
 interface NavBarStoreState {
@@ -29,6 +30,8 @@ interface NavBarStoreState {
   scrollState: number;
   contentPosition: string;
   scrollYAnimated: Animated.Value;
+  hideOnScrollAnimated: Animated.Value;
+  hideOnScroll: boolean;
 }
 
 interface NavBarState {
@@ -62,24 +65,28 @@ const createStateStore = () =>
   );
 
 const createStore = () =>
-  create<NavBarStoreState>((set) => ({
-    title: "",
-    summary: "",
-    visible: true,
-    height: 0,
-    scrollState: 0,
-    contentPosition: "",
-    scrollYAnimated: new Animated.Value(0),
-    setTitle(title) {
-      set({ title });
-    },
-    setSummary(summary) {
-      set({ summary });
-    },
-    setVisible(visible) {
-      set({ visible });
-    },
-  }));
+  create(
+    subscribeWithSelector<NavBarStoreState>((set) => ({
+      title: "",
+      summary: "",
+      visible: true,
+      height: 0,
+      scrollState: 0,
+      contentPosition: "",
+      scrollYAnimated: new Animated.Value(0),
+      hideOnScrollAnimated: new Animated.Value(0),
+      hideOnScroll: false,
+      setTitle(title) {
+        set({ title });
+      },
+      setSummary(summary) {
+        set({ summary });
+      },
+      setVisible(visible) {
+        set({ visible });
+      },
+    }))
+  );
 
 type ScreenContextType = {
   _navBarStore: ReturnType<typeof createStore>;

package/Contexts/ScreenTrackedViewPositionsContext/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   useScreenTrackedViewPositionsContext,
   ScreenTrackedViewPositionsContext,

package/Contexts/ZappHookModalContext/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { create } from "zustand";
 
 type HookModalState = {
   path: string;
@@ -10,11 +10,12 @@ export type HookModalContextT = {
   setIsHooksExecutionInProgress: (hookExecutionState?: boolean) => void;
   isRunningInBackground: boolean;
   isPresentationFullScreen: boolean;
-  setIsRunningInBackground: (hookBackgroundProcessState?: boolean) => void;
-  setIsPresentingFullScreen: (hookBackgroundProcessState?: boolean) => void;
+  setIsRunningInBackground: () => void;
+  setIsPresentingFullScreen: () => void;
   state: HookModalState;
   setState: (state: HookModalState) => void;
   resetState: () => void;
+  hookPresentationMode: HookPresentationMode;
 };
 
 const initialState = {
@@ -24,68 +25,43 @@ const initialState = {
 
 type HookPresentationMode = "background" | "fullScreen";
 
-const ReactContext = React.createContext<HookModalContextT>({
-  isHooksExecutionInProgress: false,
-  setIsHooksExecutionInProgress: () => {},
-  isRunningInBackground: null,
-  setIsRunningInBackground: () => {},
-  setIsPresentingFullScreen: () => {},
-  isPresentationFullScreen: null,
+// Use useZappHookModalStore() in React components (hooks)
+// Use zappHookModalStore.getState() in non-React functions (utility functions, etc.)
+export const useZappHookModalStore = create<HookModalContextT>()((set) => ({
   state: initialState,
-  setState: () => null,
-  resetState: () => null,
-});
-
-const Provider = ({ children }: { children: React.ReactNode }) => {
-  const [state, setState] = React.useState<HookModalState>(initialState);
-
-  const [hookPresentationMode, setHookPresentationMode] =
-    React.useState<HookPresentationMode>(null);
-
-  const resetState = useCallback(() => {
-    setState(initialState);
-  }, [setState]);
-
-  const [isHooksExecutionInProgress, setIsHooksExecutionInProgress] =
-    React.useState(false);
+  isHooksExecutionInProgress: false,
+  hookPresentationMode: null as HookPresentationMode,
+  isRunningInBackground: false,
+  isPresentationFullScreen: false,
 
-  const setIsRunningInBackground = () => {
-    setHookPresentationMode("background");
-  };
+  setState: (newState: HookModalState) => {
+    set({ state: newState });
+  },
 
-  const setIsPresentingFullScreen = () => {
-    setHookPresentationMode("fullScreen");
-  };
+  setIsHooksExecutionInProgress: (hookExecutionState?: boolean) => {
+    set({ isHooksExecutionInProgress: hookExecutionState ?? false });
+  },
 
-  return (
-    <ReactContext.Provider
-      value={{
-        isRunningInBackground: hookPresentationMode === "background",
-        setIsRunningInBackground,
-        setIsPresentingFullScreen,
-        isPresentationFullScreen: hookPresentationMode === "fullScreen",
-        isHooksExecutionInProgress,
-        setIsHooksExecutionInProgress,
-        state,
-        setState,
-        resetState,
-      }}
-    >
-      {children}
-    </ReactContext.Provider>
-  );
-};
+  setIsRunningInBackground: () => {
+    set({
+      hookPresentationMode: "background",
+      isRunningInBackground: true,
+      isPresentationFullScreen: false,
+    });
+  },
 
-const withProvider = (Component) => {
-  const WithProvider = (props) => {
-    return (
-      <Provider>
-        <Component {...props} />
-      </Provider>
-    );
-  };
+  setIsPresentingFullScreen: () => {
+    set({
+      hookPresentationMode: "fullScreen",
+      isRunningInBackground: false,
+      isPresentationFullScreen: true,
+    });
+  },
 
-  return WithProvider;
-};
+  resetState: () => {
+    set({ state: initialState });
+  },
+}));
 
-export const ZappHookModalContext = { withProvider, ReactContext };
+// Export an alias for clearer non-React usage (utility functions, etc.)
+export const zappHookModalStore = useZappHookModalStore;

package/Contexts/index.ts

@@ -12,8 +12,6 @@ export { HorizontalScrollContext } from "./HorizontalScrollContext";
 
 export { RiverOffsetContext } from "./RiverOffsetContext";
 
-export { ZappHookModalContext } from "./ZappHookModalContext";
-
 export { MeasurementContext } from "./MeasurementContext";
 
 export * from "./ZappPipesContext";

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";
 

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -2,7 +2,7 @@
 /// <reference types="@applicaster/zapp-react-native-ui-components" />
 import React from "react";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { ResolverSelector } from "./ResolverSelector";
@@ -23,7 +23,7 @@ export function zappPipesDataConnector(
 ) {
   return function WrappedWithZappPipesData(props: Props) {
     const { screenData } = useRoute();
-    const { plugins } = usePickFromState(["plugins"]);
+    const plugins = usePlugins();
     const screenContextData = useScreenContext();
 
     const {

package/Decorators/ZappPipesDataConnector/resolvers/StaticFeedResolver.tsx

@@ -76,7 +76,7 @@ export function StaticFeedResolver({
 
   const zappPipesDataProps = useMemo(
     () => ({
-      zappPipesData: { url, loading, data, error },
+      zappPipesData: { url, loading, data, error }, // todo: add applyItemLimit
       reloadData,
       loadNextData: undefined, // Static resolver doesn't support pagination
     }),