@applicaster/zapp-react-native-ui-components 15.0.0-rc.13 → 15.0.0-rc.132

package/Components/River/TV/River.tsx

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

package/Components/River/TV/index.tsx

@@ -1,11 +1,15 @@
-import { compose } from "ramda";
+import { compose, identity } from "@applicaster/zapp-react-native-utils/utils";
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 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
+  withRiverDataLoader,
+  isTVOS ? withFocusableGroupForContent : identity
 )(RiverComponent);

package/Components/River/TV/utils/__tests__/toStringOrEmpty.test.ts

@@ -0,0 +1,30 @@
+import { toStringOrEmpty } from "..";
+
+describe("toStringOrEmpty", () => {
+  test("returns empty string for undefined", () => {
+    expect(toStringOrEmpty(undefined)).toBe("");
+  });
+
+  test("returns empty string for null", () => {
+    expect(toStringOrEmpty(null)).toBe("");
+  });
+
+  test("converts number to string", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+    expect(toStringOrEmpty(123)).toBe("123");
+    expect(toStringOrEmpty(-42)).toBe("-42");
+  });
+
+  test("returns string as is", () => {
+    expect(toStringOrEmpty("hello")).toBe("hello");
+    expect(toStringOrEmpty("")).toBe("");
+  });
+
+  test("works with numeric strings", () => {
+    expect(toStringOrEmpty("123")).toBe("123");
+  });
+
+  test("does not throw on falsy values like 0", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+  });
+});

package/Components/River/TV/utils/index.ts

@@ -0,0 +1,4 @@
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+
+export const toStringOrEmpty = (value: unknown): string =>
+  isNil(value) ? "" : String(value);

package/Components/River/TV/withFocusableGroupForContent.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { riverFocusManager } from "@applicaster/zapp-react-native-utils/appUtils/RiverFocusManager";
+
+import { topMenuLayoutChange$ } from "@applicaster/zapp-react-native-tvos-app/Layout/topMenu";
+
+const styles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+  },
+});
+
+export const withFocusableGroupForContent = (Component) => {
+  return function WithFocusableGroupForContent(props) {
+    const { screenId, isInsideContainer } = props;
+
+    const [topMenuHeight, setTopMenuHeight] = React.useState(0);
+
+    React.useEffect(() => {
+      const subscription = topMenuLayoutChange$.subscribe((layout) => {
+        setTopMenuHeight(layout.height);
+      });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, []);
+
+    const focusableId = React.useMemo(
+      () =>
+        riverFocusManager.screenFocusableGroupId({
+          screenId,
+          isInsideContainer,
+        }),
+      [screenId, isInsideContainer]
+    );
+
+    if (isInsideContainer) {
+      return <Component {...props} />;
+    }
+
+    return (
+      <FocusableGroup
+        key={focusableId}
+        id={focusableId}
+        // The top menu is rendered in its own FocusableGroup, anchored at the top of the screen.
+        // When the "content" FocusableGroup starts at y = 0 as well, the two groups visually overlap.
+        // On TvOS platform this overlap can confuse the focus engine, because the focusable bounds of
+        // the top-menu group and the content group intersect, leading to erratic navigation between
+        // the menu and the content (e.g. unexpected jumps or focus getting "stuck").
+        //
+        // To avoid this, we shift the entire content FocusableGroup down by the dynamic top menu
+        // height (marginTop: topMenuHeight). This separates the focus regions of the two groups in
+        // focus space, so they no longer intersect.
+        //
+        // The inner <View> below then applies the inverse margin (marginTop: -topMenuHeight) so that
+        // the actual visual position of the content on screen does not change; only the focusable
+        // bounds of the outer group are offset.
+        style={[styles.flexOne, { marginTop: topMenuHeight }]}
+        // this group does not have parent
+        groupId={undefined}
+      >
+        <View style={[styles.flexOne, { marginTop: -1 * topMenuHeight }]}>
+          <Component {...props} groupId={focusableId} />
+        </View>
+      </FocusableGroup>
+    );
+  };
+};

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]}
@@ -154,6 +155,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         }
       }
       stickyHeaderIndices={[]}
+      testID="components-map-flat-list"
       viewabilityConfigCallbackPairs={[]}
       windowSize={12}
     >

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

@@ -139,7 +139,13 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-ui-components/events", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-ui-components/events"),
+  emitScrollEndReached: jest.fn(),
+}));
+
 const { View } = require("react-native");
+const events = require("@applicaster/zapp-react-native-ui-components/events");
 const { ComponentsMap } = require("../ComponentsMap/ComponentsMap");
 const theme = require("./theme-mock.json");
 
@@ -190,4 +196,36 @@ describe("componentsMap", () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("calls emitScrollEndReached when onScroll was called and isScreenWrappedInContainer is false", () => {
+    themeSpy = jest
+      .spyOn(themeUtils, "useTheme")
+      .mockImplementation(() => () => theme);
+
+    events.emitScrollEndReached.mockClear();
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ComponentsMap
+          {...props}
+          isScreenWrappedInContainer={false}
+          feed={{ entry: [] }}
+        />
+      </Provider>
+    );
+
+    const flatList = getByTestId("components-map-flat-list");
+
+    flatList.props.onScroll({
+      nativeEvent: {
+        contentOffset: { y: 0 },
+        layoutMeasurement: { height: 100 },
+        contentSize: { height: 200 },
+      },
+    });
+
+    flatList.props.onEndReached();
+
+    expect(events.emitScrollEndReached).toHaveBeenCalledTimes(1);
+  });
 });

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

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

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

@@ -1,19 +1,17 @@
 import * as React from "react";
 import { View } from "react-native";
-import { render } from "@testing-library/react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 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", () => ({
@@ -35,12 +33,14 @@ 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",
   })),
@@ -77,21 +77,44 @@ jest.mock(
   })
 );
 
-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/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", () => ({
   ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
@@ -112,26 +135,6 @@ 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,
@@ -151,6 +154,19 @@ 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();
@@ -160,14 +176,22 @@ describe("<Screen Component />", () => {
 
   describe("when the navbar should show", () => {
     it("renders correctly", () => {
-      const { toJSON } = render(<Screen {...screenProps} />);
+      const { toJSON } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
     it("renders correctly", () => {
-      const { toJSON } = render(<Screen {...screenProps} />);
+      const { toJSON } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
       expect(toJSON()).toMatchSnapshot();
     });
   });

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

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