@applicaster/zapp-react-native-ui-components 15.0.0-rc.14 → 15.0.0-rc.140

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,35 +65,62 @@ 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 });
+      },
+    }))
+  );
+
+const createScreenComponentsStore = () =>
+  create(subscribeWithSelector<Record<string, unknown>>((_) => ({})));
+
+const createFeedStore = () =>
+  create(subscribeWithSelector<Record<string, unknown>>((_) => ({})));
 
 type ScreenContextType = {
   _navBarStore: ReturnType<typeof createStore>;
   _stateStore: ReturnType<typeof createStateStore>;
+  _feedStore: ReturnType<typeof createFeedStore>;
   navBar: NavBarState;
   legacyFormatScreenData: LegacyNavigationScreenData | null;
+  /**
+   * Zustand store for component-level state within a screen.
+   *
+   * **Purpose:** Persists state across component mount/unmount cycles (e.g., during virtualization)
+   * and enables state sharing between components using the same key within the same screen.
+   *
+   * **Lifecycle:** Tied to the screen/route — recreated on each route change.
+   *
+   * @example
+   * // Used by useComponentScreenState hook:
+   * const store = useScreenContextV2()._componentStateStore;
+   * store.setState({ 'my-key': value });
+   * const value = store.getState()['my-key'];
+   */
+  _componentStateStore: ReturnType<typeof createScreenComponentsStore>;
 };
 
 export const ScreenContext = createContext<ScreenContextType>({
   _stateStore: createStateStore(),
   _navBarStore: createStore(),
+  _feedStore: createFeedStore(),
   navBar: {
     visible: true,
     title: "",
@@ -100,6 +130,7 @@ export const ScreenContext = createContext<ScreenContextType>({
     setSummary: (_subtitle) => void 0,
   },
   legacyFormatScreenData: {} as LegacyNavigationScreenData,
+  _componentStateStore: createScreenComponentsStore(),
 });
 
 export function ScreenContextProvider({
@@ -131,6 +162,10 @@ export function ScreenContextProvider({
     null
   );
 
+  const screenFeedStoreRef = useRef<null | ReturnType<typeof createFeedStore>>(
+    null
+  );
+
   const getScreenState = useCallback(() => {
     if (screenStateRef.current !== null) {
       return screenStateRef.current;
@@ -153,6 +188,21 @@ export function ScreenContextProvider({
     return navBarState;
   }, []);
 
+  // Assign feed store to ref to persist it across re-renders, but recreate on pathname change
+  const screenFeedStore = useMemo(() => createFeedStore(), [pathname]);
+
+  if (screenFeedStoreRef.current !== screenFeedStore) {
+    screenFeedStoreRef.current = screenFeedStore;
+  }
+
+  // Component state store - recreated when pathname changes (route change).
+  // Unlike _navBarStore and _stateStore (cached via refs), this store
+  // resets only when pathname changes to provide a clean state for the new route.
+  const componentStateStore = useMemo(
+    () => createScreenComponentsStore(),
+    [pathname]
+  );
+
   const screenNavBarState = getScreenNavBarState()(
     useShallow((state) => ({
       visible: state.visible,
@@ -203,10 +253,12 @@ export function ScreenContextProvider({
         () => ({
           _navBarStore: getScreenNavBarState(),
           _stateStore: getScreenState(),
+          _feedStore: screenFeedStoreRef.current,
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
+          _componentStateStore: componentStateStore,
         }),
-        [navBarState, screenData, routeScreenData]
+        [navBarState, screenData, routeScreenData, componentStateStore]
       )}
     >
       {children}

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/ZappPipesContext/ZappPipesContextFactory.tsx

@@ -5,10 +5,10 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import * as R from "ramda";
 
-type ProviderProps = {
+type ProviderProps<S> = {
   children: React.ReactChild;
+  initialContextValue?: S;
 };
 
 type ContextType<T> = {
@@ -27,21 +27,29 @@ export function createZappPipesContext<T, S = T>(
 ) {
   const Context = createContext<ContextType<S>>(initialContext);
 
-  const { selector = R.identity, prepareContext = R.identity } = options || {};
+  const defaultSelector = (c: any) => c;
+  const defaultPrepareContext = (n: any) => n;
+  const joinArgs = (args: any[]) => args.join("-");
+
+  const { selector = defaultSelector, prepareContext = defaultPrepareContext } =
+    options || {};
 
   function useZappPipesContext(...hookArgs: any[]): [T, (T) => void] {
     const { context, setContext } = useContext(Context);
+    const joinedArgs = joinArgs(hookArgs);
 
     const contextValue = useMemo(
       () => selector(context, ...hookArgs),
-      [context, R.join("-", hookArgs)]
+      // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+      [context, joinedArgs]
     );
 
     const contextSetter = useCallback(
       (newContext: T) => {
         setContext(prepareContext(newContext, context, ...hookArgs));
       },
-      [context, setContext, R.join("-", hookArgs)]
+      // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+      [context, joinedArgs]
     );
 
     return useMemo(
@@ -50,8 +58,11 @@ export function createZappPipesContext<T, S = T>(
     );
   }
 
-  function Provider({ children }: ProviderProps) {
-    const [context, setContext] = useState<S>(initialContext.context);
+  /** Provider accepts `initialContextValue` prop to set the initial context value */
+  function Provider({ children, initialContextValue }: ProviderProps<S>) {
+    const [context, setContext] = useState<S>(
+      initialContextValue ?? initialContext.context
+    );
 
     return (
       <Context.Provider value={{ context, setContext }}>

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/ResolverSelector.tsx

@@ -1,4 +1,3 @@
-// ResolverSelector.tsx
 import React from "react";
 import { ComponentDataSourceContext, ZappPipesDataProps } from "./types";
 import { StaticFeedResolver } from "./resolvers/StaticFeedResolver";
@@ -12,14 +11,33 @@ type ResolverSelectorProps = ComponentDataSourceContext & {
 export function ResolverSelector(props: ResolverSelectorProps) {
   const { getStaticComponentFeed, component, feedUrl, children } = props;
 
-  // Determine which resolver to use
+  const renderDefaultResolver = (
+    fallbackChildren: (dataProps: ZappPipesDataProps) => React.ReactNode
+  ) => {
+    if (feedUrl || component?.data?.source) {
+      return <UrlFeedResolver {...props}>{fallbackChildren}</UrlFeedResolver>;
+    }
+
+    return <NullFeedResolver>{fallbackChildren}</NullFeedResolver>;
+  };
+
   if (getStaticComponentFeed) {
-    return <StaticFeedResolver {...props}>{children}</StaticFeedResolver>;
-  }
+    return (
+      <StaticFeedResolver {...props}>
+        {(zappPipesDataProps) => {
+          const { data, loading, error } = zappPipesDataProps.zappPipesData;
+
+          const shouldFallback = !loading && data === null && !error;
+
+          if (shouldFallback) {
+            return renderDefaultResolver(children);
+          }
 
-  if (feedUrl || component?.data?.source) {
-    return <UrlFeedResolver {...props}>{children}</UrlFeedResolver>;
+          return children(zappPipesDataProps);
+        }}
+      </StaticFeedResolver>
+    );
   }
 
-  return <NullFeedResolver>{children}</NullFeedResolver>;
+  return renderDefaultResolver(children);
 }

package/Decorators/ZappPipesDataConnector/__tests__/ResolverSelector.test.tsx

@@ -7,15 +7,30 @@ import { UrlFeedResolver } from "../resolvers/UrlFeedResolver";
 import { NullFeedResolver } from "../resolvers/NullFeedResolver";
 
 jest.mock("../resolvers/StaticFeedResolver", () => ({
-  StaticFeedResolver: jest.fn(() => null),
+  StaticFeedResolver: jest.fn(({ children }) =>
+    children({
+      zappPipesData: { loading: true, data: null, error: null },
+      reloadData: jest.fn(),
+    })
+  ),
 }));
 
 jest.mock("../resolvers/UrlFeedResolver", () => ({
-  UrlFeedResolver: jest.fn(() => null),
+  UrlFeedResolver: jest.fn(({ children }) =>
+    children({
+      zappPipesData: { loading: true, data: null, error: null },
+      reloadData: jest.fn(),
+    })
+  ),
 }));
 
 jest.mock("../resolvers/NullFeedResolver", () => ({
-  NullFeedResolver: jest.fn(() => null),
+  NullFeedResolver: jest.fn(({ children }) =>
+    children({
+      zappPipesData: { loading: false, data: null, error: null },
+      reloadData: jest.fn(),
+    })
+  ),
 }));
 
 const testPlugin = {
@@ -52,7 +67,7 @@ describe("ResolverSelector", () => {
       expect.objectContaining({
         getStaticComponentFeed: props.getStaticComponentFeed,
         component: mockComponent,
-        children: mockChildren,
+        children: expect.any(Function),
       }),
       expect.anything()
     );
@@ -151,7 +166,10 @@ describe("ResolverSelector", () => {
     render(<ResolverSelector {...props} />);
 
     expect(StaticFeedResolver).toHaveBeenCalledWith(
-      expect.objectContaining(props),
+      expect.objectContaining({
+        ...props,
+        children: expect.any(Function),
+      }),
       expect.anything()
     );
   });
@@ -202,4 +220,193 @@ describe("ResolverSelector", () => {
     expect(UrlFeedResolver).not.toHaveBeenCalled();
     expect(NullFeedResolver).not.toHaveBeenCalled();
   });
+
+  describe("Fallback Logic", () => {
+    it("should fallback to UrlFeedResolver when StaticFeedResolver returns null and feedUrl is present", () => {
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+
+      expect(UrlFeedResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          feedUrl: props.feedUrl,
+          component: mockComponent,
+          children: mockChildren,
+        }),
+        expect.anything()
+      );
+    });
+
+    it("should fallback to UrlFeedResolver when StaticFeedResolver returns null and component.data.source is present", () => {
+      const componentWithSource = {
+        ...mockComponent,
+        data: {
+          source: "data-source",
+        },
+      };
+
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        component: componentWithSource,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+
+      expect(UrlFeedResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          component: componentWithSource,
+          children: mockChildren,
+        }),
+        expect.anything()
+      );
+    });
+
+    it("should fallback to NullFeedResolver when StaticFeedResolver returns null and no feedUrl/source is present", () => {
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(NullFeedResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          children: mockChildren,
+        }),
+        expect.anything()
+      );
+    });
+
+    it("should NOT fallback and call children with static data when StaticFeedResolver returns data", () => {
+      const staticData = { entry: [{ id: "1" }] };
+
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: staticData, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(mockChildren).toHaveBeenCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            data: staticData,
+          }),
+        })
+      );
+    });
+
+    it("should NOT fallback and call children with loading state when StaticFeedResolver is loading", () => {
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: true, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(mockChildren).toHaveBeenCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: true,
+          }),
+        })
+      );
+    });
+
+    it("should NOT fallback and call children with error when StaticFeedResolver returns error", () => {
+      const error = new Error("Static error");
+
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(mockChildren).toHaveBeenCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            error,
+          }),
+        })
+      );
+    });
+  });
 });