@applicaster/zapp-react-native-ui-components 16.0.0-rc.1 → 16.0.0-rc.100

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

@@ -10,103 +10,129 @@ exports[`componentsMap renders renders components map correctly 1`] = `
 >
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
+    style={{}}
   >
     <RCTScrollView
       ListFooterComponent={
-        <Memo(RiverFooterComponent)
-          flatListHeight={null}
-          loadingState={
-            BehaviorSubject {
-              "_value": {
-                "done": false,
-                "index": -1,
-                "waitForAllComponents": false,
-              },
-              "closed": false,
-              "currentObservers": null,
-              "hasError": false,
-              "isStopped": false,
-              "observers": [
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
+        <React.Fragment>
+          <Memo(RiverFooterComponent)
+            flatListHeight={null}
+            loadingState={
+              BehaviorSubject {
+                "_value": {
+                  "done": false,
+                  "index": -1,
+                  "waitForAllComponents": false,
                 },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                "closed": false,
+                "currentObservers": null,
+                "hasError": false,
+                "isStopped": false,
+                "observers": [
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-                SafeSubscriber {
-                  "_finalizers": [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
+                    "initialTeardown": undefined,
+                    "isStopped": false,
+                  },
+                  SafeSubscriber {
+                    "_finalizers": [
+                      Subscription {
+                        "_finalizers": null,
+                        "_parentage": [Circular],
+                        "closed": false,
+                        "initialTeardown": [Function],
+                      },
+                    ],
+                    "_parentage": null,
+                    "closed": false,
+                    "destination": ConsumerObserver {
+                      "partialObserver": {
+                        "complete": undefined,
+                        "error": undefined,
+                        "next": [Function],
+                      },
                     },
+                    "initialTeardown": undefined,
+                    "isStopped": false,
                   },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-              ],
-              "thrownError": null,
+                ],
+                "thrownError": null,
+              }
+            }
+          />
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
+        </React.Fragment>
+      }
+      ListHeaderComponent={
+        <View
+          edges={
+            {
+              "top": "off",
+            }
+          }
+          mode="margin"
+          style={
+            {
+              "height": 0.5,
+              "paddingTop": undefined,
             }
           }
         />
       }
       contentContainerStyle={
         {
-          "paddingBottom": undefined,
           "paddingLeft": undefined,
           "paddingRight": undefined,
-          "paddingTop": undefined,
         }
       }
       data={
@@ -161,17 +187,32 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     >
       <View>
         <View
-          onFocusCapture={[Function]}
+          collapsable={false}
           onLayout={[Function]}
-          style={null}
         >
           <View
-            onLayout={[Function]}
+            edges={
+              {
+                "top": "off",
+              }
+            }
+            mode="margin"
             style={
               {
-                "flex": 1,
+                "height": 0.5,
+                "paddingTop": undefined,
               }
             }
+          />
+        </View>
+        <View
+          onFocusCapture={[Function]}
+          onLayout={[Function]}
+          style={null}
+        >
+          <View
+            onLayout={[Function]}
+            style={{}}
           >
             <View />
           </View>
@@ -183,11 +224,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
+            style={{}}
           />
         </View>
         <View
@@ -212,6 +249,20 @@ exports[`componentsMap renders renders components map correctly 1`] = `
               size="large"
             />
           </View>
+          <View
+            edges={
+              {
+                "bottom": "off",
+              }
+            }
+            mode="margin"
+            style={
+              {
+                "height": 0.5,
+                "paddingBottom": undefined,
+              }
+            }
+          />
         </View>
       </View>
     </RCTScrollView>

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

@@ -11,9 +11,14 @@ jest.mock(
   () => () => null
 );
 
-jest.mock("react-native-safe-area-context", () => ({
-  useSafeAreaInsets: () => ({ top: 50 }),
-}));
+jest.mock("react-native-safe-area-context", () => {
+  const { View } = jest.requireActual("react-native");
+
+  return {
+    SafeAreaView: View,
+    useSafeAreaInsets: () => ({ top: 50 }),
+  };
+});
 
 jest.mock("react-native", () => {
   const RN = jest.genMockFromModule("react-native");

package/Components/River/__tests__/resultCallback.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { RiverComponent } from "../River";
+
+const mockResolverProps: any[] = [];
+
+jest.mock("../../ScreenResolver", () => ({
+  ScreenResolver: (props: any) => {
+    mockResolverProps.push(props);
+
+    return null;
+  },
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const baseProps = {
+  river,
+  screenData: {},
+  groupId: "group-1",
+  scrollViewExtraProps: {},
+  setIsScreenWrappedInContainer: jest.fn(),
+  screenContext: { navBar: { setTitle: jest.fn(), setSummary: jest.fn() } },
+} as any;
+
+const resolved = () => mockResolverProps[mockResolverProps.length - 1];
+
+describe("RiverComponent", () => {
+  beforeEach(() => {
+    mockResolverProps.length = 0;
+  });
+
+  it("forwards resultCallback to the screen it resolves", () => {
+    const resultCallback = jest.fn();
+
+    render(<RiverComponent {...baseProps} resultCallback={resultCallback} />);
+
+    expect(resolved().resultCallback).toBe(resultCallback);
+  });
+
+  it("resolves the screen without a resultCallback when none was given", () => {
+    render(<RiverComponent {...baseProps} />);
+
+    expect(resolved().resultCallback).toBeUndefined();
+  });
+});

package/Components/Screen/TV/hooks/__tests__/useAfterPaint.test.ts

@@ -0,0 +1,60 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+import { useAfterPaint } from "../useAfterPaint";
+
+describe("useAfterPaint", () => {
+  let frameCallbacks: FrameRequestCallback[];
+  let originalRaf: typeof requestAnimationFrame;
+  let originalCancelRaf: typeof cancelAnimationFrame;
+
+  const flushFrame = () => {
+    const callbacks = frameCallbacks;
+    frameCallbacks = [];
+
+    act(() => {
+      callbacks.forEach((cb) => cb(0));
+    });
+  };
+
+  beforeEach(() => {
+    frameCallbacks = [];
+    originalRaf = global.requestAnimationFrame;
+    originalCancelRaf = global.cancelAnimationFrame;
+
+    global.requestAnimationFrame = jest.fn((cb: FrameRequestCallback) => {
+      frameCallbacks.push(cb);
+
+      return frameCallbacks.length;
+    }) as unknown as typeof requestAnimationFrame;
+
+    global.cancelAnimationFrame = jest.fn();
+  });
+
+  afterEach(() => {
+    global.requestAnimationFrame = originalRaf;
+    global.cancelAnimationFrame = originalCancelRaf;
+  });
+
+  it("returns false on the initial render", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    expect(result.current).toBe(false);
+  });
+
+  it("stays false after only one animation frame (before paint completes)", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    flushFrame();
+
+    expect(result.current).toBe(false);
+  });
+
+  it("returns true after two animation frames (a real post-paint boundary)", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    flushFrame();
+    flushFrame();
+
+    expect(result.current).toBe(true);
+  });
+});

package/Components/Screen/TV/hooks/index.ts

@@ -1 +1,3 @@
 export { useInitialFocus } from "./useInitialFocus";
+
+export { useAfterPaint } from "./useAfterPaint";

package/Components/Screen/TV/hooks/useAfterPaint.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export const useAfterPaint = (): boolean => {
+  const [painted, setPainted] = React.useState(false);
+
+  React.useEffect(() => {
+    let secondFrame: number | undefined;
+
+    const firstFrame = requestAnimationFrame(() => {
+      secondFrame = requestAnimationFrame(() => setPainted(true));
+    });
+
+    return () => {
+      cancelAnimationFrame(firstFrame);
+
+      if (secondFrame !== undefined) {
+        cancelAnimationFrame(secondFrame);
+      }
+    };
+  }, []);
+
+  return painted;
+};

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

@@ -21,7 +21,7 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { ScreenResolver } from "../../ScreenResolver";
-import { useInitialFocus } from "./hooks";
+import { useInitialFocus, useAfterPaint } from "./hooks";
 import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { FreezeWithCallback } from "../../FreezeWithCallback";
@@ -157,6 +157,13 @@ export const Screen = ({ route, Components }: Props) => {
 
   const isScreenActive = useIsScreenActive();
 
+  // We need to render menu first and then proceed with screen content,
+  // otherwise screen will stay black until everything is loaded and screen
+  // rendering put huge load the CPU pushing rendering even further.
+  // With this approach, menu will be rendered immediately and screen content
+  // will be rendered after paint, which makes it more responsive and prevents black screen.
+  const isContentReady = useAfterPaint();
+
   return (
     <FreezeWithCallback freeze={!isScreenActive} onRelease={onRelease}>
       <View style={[styles.container, { backgroundColor }]}>
@@ -167,12 +174,14 @@ export const Screen = ({ route, Components }: Props) => {
             navigationProps={navigationProps}
           />
         </NavBarContainer>
-        <ScreenResolver
-          screenType={screenType}
-          screenId={screenId}
-          screenData={screenData}
-          groupId={route}
-        />
+        {isContentReady ? (
+          <ScreenResolver
+            screenType={screenType}
+            screenId={screenId}
+            screenData={screenData}
+            groupId={route}
+          />
+        ) : null}
       </View>
     </FreezeWithCallback>
   );

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

@@ -141,6 +141,10 @@ const {
   useGetScreenOrientation,
 } = require("@applicaster/zapp-react-native-utils/appUtils/orientationHelper");
 
+const {
+  useIsScreenActive,
+} = require("@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive");
+
 const navigator = {};
 const navBarProps = { nav_items: [] };
 const screenData = {};
@@ -195,4 +199,24 @@ describe("<Screen Component />", () => {
       expect(toJSON()).toMatchSnapshot();
     });
   });
+
+  describe("when the screen is inactive", () => {
+    afterEach(() => {
+      useIsScreenActive.mockReturnValue(true);
+    });
+
+    it("hides the screen from VoiceOver (iOS) and TalkBack (Android)", () => {
+      useIsScreenActive.mockReturnValue(false);
+
+      const { UNSAFE_root } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
+      expect(UNSAFE_root.findByType(View).props).toMatchObject({
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+      });
+    });
+  });
 });

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

@@ -13,6 +13,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   }
 >
   <View
+    accessibilityElementsHidden={false}
     importantForAccessibility="yes"
     style={
       {
@@ -58,6 +59,7 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   }
 >
   <View
+    accessibilityElementsHidden={false}
     importantForAccessibility="yes"
     style={
       {

package/Components/Screen/index.tsx

@@ -18,10 +18,13 @@ import {
   useScreenData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
+import {
+  isValidColor,
+  isTransparentColor,
+} from "@applicaster/zapp-react-native-utils/colorUtils";
 
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
-import { isValidColor } from "./utils";
 import { useWaitForValidOrientation } from "./hooks";
 
 const screenStyles = {
@@ -82,9 +85,10 @@ export function Screen(_props: Props) {
   const style = React.useMemo(
     () => ({
       ...screenStyles,
-      backgroundColor: isValidColor(backgroundColor)
-        ? backgroundColor
-        : theme.app_background_color,
+      backgroundColor:
+        isValidColor(backgroundColor) && !isTransparentColor(backgroundColor)
+          ? backgroundColor
+          : theme.app_background_color,
     }),
     [theme.app_background_color, backgroundColor]
   );
@@ -117,6 +121,11 @@ export function Screen(_props: Props) {
       ref={ref}
       style={style}
       importantForAccessibility={!isActive ? "no-hide-descendants" : "yes"}
+      // `importantForAccessibility` only affects Android (see RN docs).
+      // Without the iOS counterpart below, VoiceOver keeps traversing and
+      // focusing elements on an inactive/underlying screen (e.g. Albums In
+      // Order) even after a new screen (e.g. an Album) is pushed on top.
+      accessibilityElementsHidden={!isActive}
     >
       {isReady ? (
         <>

package/Components/Screen/navigationHandler.ts

@@ -18,10 +18,9 @@ function shouldShowNavigation(route, screenData) {
     return false;
   }
 
-  if (
-    screenData.type === "qb_search_screen" ||
-    screenData?.targetScreen?.type === "qb_search_screen"
-  ) {
+  const currentScreenData = screenData?.targetScreen || screenData;
+
+  if (currentScreenData.type === "qb_search_screen") {
     return false;
   }
 
@@ -31,10 +30,11 @@ function shouldShowNavigation(route, screenData) {
     return hookPlugin?.showNavBar || hookPlugin?.presentFullScreen !== true;
   }
 
-  if (
-    screenData?.general?.allow_screen_plugin_presentation ||
-    screenData?.targetScreen?.general?.allow_screen_plugin_presentation
-  ) {
+  if (currentScreenData?.general?.hide_menu) {
+    return false;
+  }
+
+  if (currentScreenData?.general?.allow_screen_plugin_presentation) {
     return false;
   }
 

package/Components/ScreenFeedLoader/ScreenFeedLoader.tsx

@@ -8,9 +8,11 @@ import { componentsLogger } from "../../Helpers/logger";
 const logger = componentsLogger.addSubsystem("ScreenFeedLoader");
 
 /** Loads and provides `feedData` and store to  */
-export const ScreenFeedLoader: React.FC<
-  React.PropsWithChildren<{ id: string; feedData: any }>
-> = ({ id, feedData, children }) => {
+export const ScreenFeedLoader: React.FC<{
+  id: string;
+  feedData: any;
+  children: React.ReactElement | null;
+}> = ({ id, feedData, children }) => {
   const { source: feedUrl, mapping } = feedData;
 
   const { data, loading, error } = useFeedLoader({

package/Components/ScreenResolverFeedProvider/ScreenResolverFeedProvider.tsx

@@ -8,7 +8,7 @@ export const ScreenResolverFeedProvider = ({
   useFeedData,
 }: {
   id: string;
-  children: React.ReactNode;
+  children: React.ReactElement | null;
   useFeedData: (id: string) => Option<ZappDataSource>;
 }) => {
   const feedData = useFeedData(id);

package/Components/ScreenRevealManager/Overlay.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Animated, StyleSheet } from "react-native";
+
+import { BackgroundImage } from "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage";
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    position: "absolute",
+  },
+});
+
+export const Overlay = ({
+  opacity,
+  backgroundColor,
+}: {
+  opacity: Animated.Value;
+  backgroundColor: string;
+}) => {
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          opacity,
+          backgroundColor,
+        },
+      ]}
+      testID="animated-component"
+    >
+      <BackgroundImage />
+    </Animated.View>
+  );
+};