@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 15.1.0-rc.2

package/Components/VideoModal/utils.ts

@@ -1,35 +1,32 @@
 import { mergeRight } from "ramda";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-import {
-  useAppSelector,
-  useContentTypes,
-} from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } 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 = useRivers();
-  const contentTypes = useContentTypes();
+  const { rivers, contentTypes, pluginConfigurations } = usePickFromState([
+    "rivers",
+    "contentTypes",
+    "pluginConfigurations",
+  ]);
 
   const targetScreenId = contentTypes?.[item?.type?.value]?.screen_id;
   const targetScreenConfiguration = rivers?.[targetScreenId];
 
-  const { configuration_json } = useAppSelector((state) =>
-    selectPluginConfigurationsByPluginId(state, targetScreenConfiguration?.type)
-  );
+  const pluginConfiguration =
+    pluginConfigurations[targetScreenConfiguration?.type]?.configuration_json;
 
   const playerPluginConfig = playerManager.getPluginConfiguration();
 
   const config = mergeRight(playerPluginConfig, {
-    ...configuration_json,
+    ...pluginConfiguration,
     ...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-native";
+import { renderHook } from "@testing-library/react-hooks";
 import {
   ViewportEvents,
   useViewportEventsContext,

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -44,14 +45,15 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <View
+    <SafeAreaView
+      edges={["top", "left", "right"]}
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-Container"
+      testID="BarView-safeAreaView"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </View>
+    </SafeAreaView>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-Container").props.style).toContainEqual({
+    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/Components/ZappUIComponent/index.tsx

@@ -144,12 +144,23 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
       [props, parent]
     );
 
+    const hasError = !!zappPipesData?.error;
+
     React.useEffect(() => {
       if (!skipOnLoadFinished && !isLoading) {
         onLoadFinished();
       }
     }, [isLoading]);
 
+    React.useEffect(() => {
+      if (hasError) {
+        onLoadFailed?.({
+          error: zappPipesData.error,
+          index: componentIndex,
+        });
+      }
+    }, [hasError, componentIndex, onLoadFailed, zappPipesData?.error]);
+
     if (isDataSourceEmpty(props) && allowsEmptyDataSource) {
       return RenderComponent(Component, componentProps);
     }
@@ -158,12 +169,7 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
       return RenderComponent(LoadingComponent || Placeholder, componentProps);
     }
 
-    if (zappPipesData?.error) {
-      onLoadFailed?.({
-        error: zappPipesData.error,
-        index: componentIndex,
-      });
-
+    if (hasError) {
       return RenderComponent(ErrorComponent, componentProps);
     }
 

package/Components/index.js

@@ -10,7 +10,7 @@ export { ContentScreen } from "./ContentScreen";
 
 export { TextInputTv } from "./TextInputTv";
 
-export { HookRenderer } from "./HookRenderer";
+export { HookRenderer } from "./HookRenderer/HookRenderer";
 
 export { Touchable } from "./Touchable";
 

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

@@ -2,6 +2,32 @@ import { render } from "@testing-library/react-native";
 import { ScreenContext, ScreenContextProvider, withScreenContext } from "../";
 import React from "react";
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useCurrentScreenData: jest.fn(() => ({})),
+  useNavigation: jest.fn(() => ({
+    data: {},
+    modalData: null,
+    videoModalState: {},
+    canGoBack: jest.fn(() => false),
+  })),
+  useRoute: jest.fn(() => ({ screenData: null })),
+  isNavBarVisible: jest.fn(() => true),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext",
+  () => ({
+    useModalNavigationContext: jest.fn(() => false),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext",
+  () => ({
+    useNestedNavigationContext: jest.fn(() => false),
+  })
+);
+
 describe("ScreenContext", () => {
   describe("ScreneContext context", () => {
     it("should return the context", () => {
@@ -13,6 +39,37 @@ describe("ScreenContext", () => {
     it("should return the provider", () => {
       expect(ScreenContextProvider).toBeDefined();
     });
+
+    it("recreates _feedStore when pathname changes", () => {
+      const contexts = [];
+
+      const CaptureContext = () => {
+        const context = React.useContext(ScreenContext);
+        contexts.push(context);
+
+        return null;
+      };
+
+      const { rerender } = render(
+        <ScreenContextProvider pathname="/screen-a">
+          <CaptureContext />
+        </ScreenContextProvider>
+      );
+
+      const first = contexts[contexts.length - 1];
+      first._feedStore.setState({ screenFeed: "screen-a" });
+
+      rerender(
+        <ScreenContextProvider pathname="/screen-b">
+          <CaptureContext />
+        </ScreenContextProvider>
+      );
+
+      const second = contexts[contexts.length - 1];
+
+      expect(second._feedStore).not.toBe(first._feedStore);
+      expect(second._feedStore.getState()).toEqual({});
+    });
   });
 
   describe("withScreenContext", () => {

package/Contexts/ScreenContext/index.tsx

@@ -16,7 +16,6 @@ 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 {
@@ -30,8 +29,6 @@ interface NavBarStoreState {
   scrollState: number;
   contentPosition: string;
   scrollYAnimated: Animated.Value;
-  hideOnScrollAnimated: Animated.Value;
-  hideOnScroll: boolean;
 }
 
 interface NavBarState {
@@ -65,39 +62,58 @@ const createStateStore = () =>
   );
 
 const createStore = () =>
-  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 });
-      },
-    }))
-  );
+  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 });
+    },
+  }));
+
+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: "",
@@ -107,6 +123,7 @@ export const ScreenContext = createContext<ScreenContextType>({
     setSummary: (_subtitle) => void 0,
   },
   legacyFormatScreenData: {} as LegacyNavigationScreenData,
+  _componentStateStore: createScreenComponentsStore(),
 });
 
 export function ScreenContextProvider({
@@ -138,6 +155,10 @@ export function ScreenContextProvider({
     null
   );
 
+  const screenFeedStoreRef = useRef<null | ReturnType<typeof createFeedStore>>(
+    null
+  );
+
   const getScreenState = useCallback(() => {
     if (screenStateRef.current !== null) {
       return screenStateRef.current;
@@ -160,6 +181,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,
@@ -210,10 +246,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-native";
+import { renderHook } from "@testing-library/react-hooks";
 import {
   useScreenTrackedViewPositionsContext,
   ScreenTrackedViewPositionsContext,

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/Decorators/Analytics/index.tsx

@@ -1,6 +1,7 @@
 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: {
@@ -20,13 +21,11 @@ type ComponentProps = {
 
 function withAnalytics(Component) {
   return function WithAnalytics(props: ComponentProps) {
+    const { appData } = usePickFromState(["appData"]);
+
     const analyticsFunctions = React.useMemo(
-      () =>
-        getAnalyticsFunctions({
-          component: props.component,
-          zappPipesData: props.zappPipesData,
-        } as any),
-      [props.component, props.zappPipesData]
+      () => getAnalyticsFunctions({ props, appData }),
+      [props, appData]
     );
 
     return (

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

@@ -88,7 +88,6 @@ 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,5 +208,4 @@ 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);
 }