@applicaster/zapp-react-native-ui-components 15.0.0-rc.98 → 15.1.0-rc.1

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -23,6 +23,7 @@ import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useShallow } from "zustand/react/shallow";
+import { emitScrollEndReached } from "@applicaster/zapp-react-native-ui-components/events";
 
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { ComponentsMapHeightContext } from "./ContextProviders/ComponentsMapHeightContext";
@@ -73,6 +74,7 @@ function ComponentsMapComponent(props: Props) {
 
   const flatListRef = React.useRef<FlatList | null>(null);
   const flatListWrapperRef = React.useRef<View | null>(null);
+  const hasUserScrolledRef = React.useRef(false);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -236,6 +238,8 @@ function ComponentsMapComponent(props: Props) {
   }, []);
 
   const onScroll = React.useCallback((event) => {
+    hasUserScrolledRef.current = true;
+
     const {
       nativeEvent: {
         contentOffset: { y },
@@ -308,6 +312,17 @@ function ComponentsMapComponent(props: Props) {
                 onScrollEndDrag={_onScrollEndDrag}
                 scrollEventThrottle={16}
                 {...scrollViewExtraProps}
+                /* When wrapped in a parent ScrollView (e.g. tabs),
+                this FlatList doesn't scroll so onEndReached can fire repeatedly;
+                skip it here and let the parent ScrollView emit scroll-end instead. */
+                onEndReached={
+                  isScreenWrappedInContainer
+                    ? undefined
+                    : () => {
+                        if (!hasUserScrolledRef.current) return;
+                        emitScrollEndReached();
+                      }
+                }
               />
             </ViewportTracker>
           </ScreenLoadingMeasurements>

package/Components/River/ComponentsMap/hooks/__tests__/useLoadingState.test.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-native";
+import { renderHook, act } from "@testing-library/react-hooks";
 import { BehaviorSubject } from "rxjs";
 import { useLoadingState } from "../useLoadingState";
 

package/Components/River/RefreshControl.tsx

@@ -5,6 +5,8 @@ import {
   StyleSheet,
 } from "react-native";
 import * as R from "ramda";
+import { path } from "@applicaster/zapp-react-native-utils/utils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
@@ -62,9 +64,13 @@ export const usePullToRefresh = (
 
   const [refreshing, setRefreshing] = React.useState(false);
 
-  const feeds: string[] =
-    riverComponents?.map(R.path(["data", "source"])).filter((feed) => !!feed) ??
-    [];
+  const feeds: string[] = React.useMemo(
+    () =>
+      (riverComponents || [])
+        .map((riverComponent) => path(["data", "source"], riverComponent))
+        .filter((feed) => !isNilOrEmpty(feed)),
+    [riverComponents]
+  );
 
   const feedsLength = feeds.length;
 

package/Components/River/RiverItem.tsx

@@ -14,6 +14,7 @@ import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import type { BehaviorSubject } from "rxjs";
 import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -112,33 +113,38 @@ function RiverItemComponent(props: RiverItemType) {
     CellRenderer = undefined;
   }
 
-  React.useEffect(() => {
-    riverLogger.log({
-      message: "mounting component",
-      data: { item, feedUrl, Component, CellRenderer },
-      jsOnly: true,
-    });
+  const isComponentMissing = isNilOrEmpty(Component);
 
-    if (!CellRenderer && !isGroup(item)) {
+  /**
+   * TODO: Move this plugin existence check further up the stack (before ComponentsMap).
+   * Filtering items at the list-rendering or data-processing level would prevent
+   * mounting RiverItem entirely for missing components.
+   */
+  React.useEffect(() => {
+    if (isComponentMissing) {
       riverLogger.warning({
-        message: "Cell Renderer is null - will fallback to default cell",
-        data: { item, CellRenderer },
+        message: `Component ${item.component_type} is null - skipping rendering`,
+      });
+
+      onLoadFinished(index);
+    } else {
+      riverLogger.log({
+        message: "mounting component",
+        data: { item, feedUrl, Component, CellRenderer },
         jsOnly: true,
       });
+
+      if (!CellRenderer && !isGroup(item)) {
+        riverLogger.warning({
+          message: "Cell Renderer is null - will fallback to default cell",
+          data: { item, CellRenderer },
+          jsOnly: true,
+        });
+      }
     }
   }, []);
 
-  if (!readyToBeDisplayed) {
-    return null;
-  }
-
-  if (Component === null || typeof Component === "undefined") {
-    riverLogger.warning({
-      message: `Component ${item.component_type} is null - skipping rendering`,
-    });
-
-    onLoadFinished(index);
-
+  if (!readyToBeDisplayed || isComponentMissing) {
     return null;
   }
 

package/Components/River/TV/River.tsx

@@ -2,8 +2,7 @@
 
 import * as React from "react";
 import { Text } from "react-native";
-
-import { mergeRight } from "@applicaster/zapp-react-native-utils/utils";
+import * as R from "ramda";
 
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
@@ -14,8 +13,6 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
-import { toStringOrEmpty } from "./utils";
-
 type Props = {
   screenId: string;
   screenData: ZappRiver | ZappEntry;
@@ -27,7 +24,6 @@ type Props = {
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
   river?: ZappRiver | ZappEntry;
-  groupId: string;
 };
 
 export const River = (props: Props) => {
@@ -39,7 +35,6 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
-    groupId,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -56,41 +51,28 @@ export const River = (props: Props) => {
     [screenId]
   );
 
-  const screenResolverData = React.useMemo(() => {
-    const extraData = mergeRight(extraProps, screenResolverExtraProps);
-
-    return {
-      extraData,
-      screenData: mergeRight(river, { groupId: extraData?.groupId }),
-      componentsMapExtraProps: mergeRight(componentsMapExtraProps, { groupId }),
-    };
-  }, [
-    extraProps,
-    screenResolverExtraProps,
-    river,
-    componentsMapExtraProps,
-    groupId,
-  ]);
+  const stringOrEmpty = (value: string | number | undefined): string =>
+    R.isNil(value) ? "" : String(value);
 
   React.useEffect(() => {
     if (!isInsideContainer) {
-      setScreenTitle(toStringOrEmpty(screenData?.title));
-      setScreenSummary(toStringOrEmpty(screenData?.summary));
+      setScreenTitle(stringOrEmpty(screenData?.title));
+      setScreenSummary(stringOrEmpty(screenData?.summary));
     }
   }, [screenData.id]);
 
   React.useEffect(() => {
     if (feedData && !isInsideContainer) {
       if (feedData.title && feedData.title !== screenTitle) {
-        setScreenTitle(toStringOrEmpty(feedData.title));
+        setScreenTitle(stringOrEmpty(feedData.title));
       }
 
       if (feedData.summary && feedData.summary !== screenSummary) {
-        setScreenSummary(toStringOrEmpty(feedData.summary));
+        setScreenSummary(stringOrEmpty(feedData.summary));
       }
     } else {
-      setScreenTitle(toStringOrEmpty(screenData?.title));
-      setScreenSummary(toStringOrEmpty(screenData?.summary));
+      setScreenTitle(stringOrEmpty(screenData?.title));
+      setScreenSummary(stringOrEmpty(screenData?.summary));
     }
   }, [feedData, screenData, screenTitle, screenSummary]);
 
@@ -104,13 +86,15 @@ export const River = (props: Props) => {
   }
 
   if (river.type !== "general_content") {
+    const extraData = { ...R.mergeRight(extraProps, screenResolverExtraProps) };
+
     return (
       <ScreenResolver
         screenType={river.type}
         screenId={screenId}
-        screenData={screenResolverData.screenData}
-        componentsMapExtraProps={screenResolverData.componentsMapExtraProps}
-        {...screenResolverData.extraData}
+        screenData={R.merge(river, { groupId: extraData?.groupId })}
+        componentsMapExtraProps={componentsMapExtraProps}
+        {...extraData}
       />
     );
   }
@@ -122,7 +106,6 @@ export const River = (props: Props) => {
       isScreenWrappedInContainer={isInsideContainer}
       extraAnchorPointYOffset={extraAnchorPointYOffset}
       componentsMapExtraProps={componentsMapExtraProps}
-      groupId={groupId}
     />
   );
 };

package/Components/River/TV/index.tsx

@@ -1,15 +1,11 @@
-import { compose, identity } from "@applicaster/zapp-react-native-utils/utils";
-import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-
+import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
+import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 import { withRiverDataLoader } from "./withRiverDataLoader";
-import { withFocusableGroupForContent } from "./withFocusableGroupForContent";
-
-const isTVOS = isTvOSPlatform();
 
 export const River = compose(
+  withTvEventHandler,
   withComponentsMapOffsetContext,
-  withRiverDataLoader,
-  isTVOS ? withFocusableGroupForContent : identity
+  withRiverDataLoader
 )(RiverComponent);

package/Components/River/TV/withTVEventHandler.tsx

@@ -0,0 +1,36 @@
+/* eslint max-len: off */
+
+import React from "react";
+import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsStandaloneFullscreen } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+
+export const withTvEventHandler = (Component) => {
+  return function WithTVEventHandler(props) {
+    const navigator = useNavigation();
+
+    const isStandaloneFullscreen = useIsStandaloneFullscreen();
+
+    const remoteHandler = (event) => {
+      const { eventType } = event;
+
+      const canGoBack = navigator.canGoBack();
+
+      if (eventType === "menu" && isStandaloneFullscreen) {
+        navigator.goHome();
+
+        return;
+      }
+
+      if (eventType === "menu" && canGoBack) {
+        navigator.goBack();
+      }
+    };
+
+    return (
+      <TVEventHandlerComponent tvEventHandler={remoteHandler}>
+        <Component {...props} />
+      </TVEventHandlerComponent>
+    );
+  };
+};

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -137,6 +137,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       keyExtractor={[Function]}
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
+      onEndReached={[Function]}
       onLayout={[Function]}
       onMomentumScrollBegin={[Function]}
       onMomentumScrollEnd={[Function]}

package/Components/Screen/TV/index.web.tsx

@@ -9,10 +9,9 @@ import {
 import {
   useIsScreenActive,
   useNavigation,
-  useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useNavbarState,
   useScreenBackgroundColor,
@@ -103,8 +102,7 @@ export const Screen = ({ route, Components }: Props) => {
   }
 
   const navigator = useNavigation();
-  const plugins = usePlugins();
-  const rivers = useRivers();
+  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
 
   const pathAttributes = getPathAttributes({ pathname: route });
   const routeState = navigator.getStackForPathname(route);

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,16 +1,20 @@
 import * as React from "react";
 import { View } from "react-native";
-import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { render } from "@testing-library/react-native";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
 ));
 
+const mock_navBarVisibleFlag = true;
+
+const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
+
 const mockIsOrientationCompatible = jest.fn(() => true);
 
 jest.mock("react-native-safe-area-context", () => ({
-  ...jest.requireActual("react-native-safe-area-context"),
   useSafeAreaInsets: () => ({ top: 44 }),
+  useSafeAreaFrame: () => ({ x: 0, y: 0, width: 375, height: 812 }),
 }));
 
 jest.mock("../../RouteManager", () => ({
@@ -32,14 +36,12 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-utils/analyticsUtils"),
   useAnalytics: jest.fn(() => ({
     sendScreenEvent: jest.fn(),
   })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-utils/theme"),
   useTheme: jest.fn(() => ({
     app_background_color: "blue",
   })),
@@ -76,44 +78,21 @@ jest.mock(
   })
 );
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
-  () => ({
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
-    ),
-    useNavigation: jest.fn(() => ({
-      canGoBack: () => false,
-      currentRoute: "/river/testId",
-      activeRiver: { id: "testId" },
-      screenData: { id: "testId" },
-      data: { screen: { id: "testId" } },
-    })),
-  })
-);
-
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
-  () => ({
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive"
-    ),
-    useIsScreenActive: jest.fn().mockReturnValue(true),
-  })
-);
-
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
-  () => ({
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute"
-    ),
-    useRoute: jest.fn(() => ({
-      pathname: "/river/testId",
-      screenData: { id: "testId" },
-    })),
-  })
-);
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  isNavBarVisible: mockIsNavBarVisible,
+  useIsScreenActive: jest.fn().mockReturnValue(true),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
+    data: { screen: { id: "testId" } },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
+}));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
@@ -134,6 +113,26 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
+  const View = jest.requireActual("react-native").View;
+
+  return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
+    usePickFromState: () => ({
+      plugins: [
+        {
+          name: "Offline Plugin",
+          identifier: "offline-experience",
+          type: "general",
+          module: {
+            OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
+          },
+        },
+      ],
+    }),
+  };
+});
+
 const {
   allowedOrientationsForScreen,
   getOrientation,
@@ -153,19 +152,6 @@ const screenProps = {
 
 const { Screen } = require("..");
 
-const store = {
-  plugins: [
-    {
-      name: "Offline Plugin",
-      identifier: "offline-experience",
-      type: "general",
-      module: {
-        OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
-      },
-    },
-  ],
-};
-
 describe("<Screen Component />", () => {
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
@@ -175,22 +161,14 @@ describe("<Screen Component />", () => {
 
   describe("when the navbar should show", () => {
     it("renders correctly", () => {
-      const { toJSON } = renderWithProviders(
-        <Screen {...screenProps} />,
-        store
-      );
-
+      const { toJSON } = render(<Screen {...screenProps} />);
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
     it("renders correctly", () => {
-      const { toJSON } = renderWithProviders(
-        <Screen {...screenProps} />,
-        store
-      );
-
+      const { toJSON } = render(<Screen {...screenProps} />);
       expect(toJSON()).toMatchSnapshot();
     });
   });

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -1,91 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Screen Component /> when the navbar should be hidden renders correctly 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
+<View
+  importantForAccessibility="yes"
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "backgroundColor": "blue",
+      "flex": 1,
+      "paddingTop": 0,
+    }
   }
 >
   <View
-    importantForAccessibility="yes"
-    style={
-      {
-        "backgroundColor": "blue",
-        "flex": 1,
-        "paddingTop": 0,
-      }
-    }
-  >
+    hasMenu={false}
+    id="/river/testId"
+    pathname="/river/testId"
+    selected="testId"
+    testID="navBar"
+    title="Test Title"
+  />
+  <View>
     <View
-      hasMenu={false}
-      id="/river/testId"
       pathname="/river/testId"
-      selected="testId"
-      testID="navBar"
-      title="Test Title"
-    />
-    <View>
-      <View
-        pathname="/river/testId"
-        screenData={
-          {
-            "id": "testId",
-          }
+      screenData={
+        {
+          "id": "testId",
         }
-        testID="routeManager"
-      />
-    </View>
+      }
+      testID="routeManager"
+    />
   </View>
-</RNCSafeAreaProvider>
+</View>
 `;
 
 exports[`<Screen Component /> when the navbar should show renders correctly 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
+<View
+  importantForAccessibility="yes"
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "backgroundColor": "blue",
+      "flex": 1,
+      "paddingTop": 0,
+    }
   }
 >
   <View
-    importantForAccessibility="yes"
-    style={
-      {
-        "backgroundColor": "blue",
-        "flex": 1,
-        "paddingTop": 0,
-      }
-    }
-  >
+    hasMenu={false}
+    id="/river/testId"
+    pathname="/river/testId"
+    selected="testId"
+    testID="navBar"
+    title="Test Title"
+  />
+  <View>
     <View
-      hasMenu={false}
-      id="/river/testId"
       pathname="/river/testId"
-      selected="testId"
-      testID="navBar"
-      title="Test Title"
-    />
-    <View>
-      <View
-        pathname="/river/testId"
-        screenData={
-          {
-            "id": "testId",
-          }
+      screenData={
+        {
+          "id": "testId",
         }
-        testID="routeManager"
-      />
-    </View>
+      }
+      testID="routeManager"
+    />
   </View>
-</RNCSafeAreaProvider>
+</View>
 `;