@applicaster/zapp-react-native-ui-components 15.0.0-alpha.3564377339 → 15.0.0-alpha.3564837831

package/Components/Focusable/Focusable.tsx

@@ -8,6 +8,8 @@ import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withF
 import { StyleSheet, ViewStyle } from "react-native";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
+import { isSearchInputId } from "@applicaster/zapp-react-native-utils/searchUtils";
+
 type Props = {
   initialFocus?: boolean;
   id: string;
@@ -106,7 +108,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -120,7 +122,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,8 +10,12 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-function noop() {}
+import {
+  emitDidFocused,
+  emitNativeRegistered,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   id: string;
@@ -54,6 +58,7 @@ export class Focusable extends BaseFocusable<Props> {
     this.nextFocusableReactTags = {};
     this.preferredFocus = this.preferredFocus.bind(this);
     this.measureView = this.measureView.bind(this);
+    this.onRegistered = this.onRegistered.bind(this);
   }
 
   /**
@@ -85,6 +90,9 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
+    const id: string = nativeEvent.itemID;
+    emitDidFocused(id);
+
     onFocus(nativeEvent);
   }
 
@@ -170,6 +178,13 @@ export class Focusable extends BaseFocusable<Props> {
     });
   }
 
+  onRegistered({ nativeEvent }) {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: false });
+  }
+
   render() {
     const {
       children,
@@ -204,6 +219,7 @@ export class Focusable extends BaseFocusable<Props> {
         focusable={isFocusable}
         {...this.nextFocusableReactTags}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>

package/Components/Focusable/__tests__/__snapshots__/FocusableTvOS.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`FocusableTvOS should render correctly 1`] = `
   groupId={null}
   itemId={null}
   onLayout={[Function]}
+  onRegistered={[Function]}
   onViewBlur={[Function]}
   onViewFocus={[Function]}
   onViewPress={[Function]}

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -1,7 +1,15 @@
 import * as React from "react";
+import { compose } from "@applicaster/zapp-react-native-utils/utils";
 import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-components/Components/NativeFocusables";
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/LayoutContext";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
+import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+import { withAboveTabsScreenContextConsumer } from "@applicaster/zapp-react-native-ui-components/Contexts/AboveTabsScreenContext";
+
+import { useIsFocusEnabled } from "./hooks";
 
 const { log_verbose } = createLogger({
   subsystem: "General",
@@ -33,9 +41,16 @@ type Props = {
   screenData: { screenId: string; parentScreenId: string };
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroupComponent extends BaseFocusable<Props> {
   public readonly isGroup: boolean = true;
 
+  onRegistered = ({ nativeEvent }) => {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: true });
+  };
+
   render() {
     const {
       children,
@@ -68,9 +83,46 @@ export class FocusableGroup extends BaseFocusable<Props> {
         onGroupBlur={onGroupBlur}
         style={style}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {children}
       </FocusableGroupNative>
     );
   }
 }
+
+export const withFocusDisabledHOC = (Component) => {
+  return function WithFocusDisabledHOC(props) {
+    // @ts-ignore
+    const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
+
+    const { pathname } = useRoute();
+
+    const isPlayerPresented = isScreenPlayable(pathname);
+
+    const blockScreenFocus = isPlayerPresented === false && screenFocusBlocked;
+
+    return (
+      <Component
+        {...props}
+        isFocusDisabled={blockScreenFocus || props.isFocusDisabled}
+      />
+    );
+  };
+};
+
+const withAboveTabsScreenHOC = (Component) => {
+  return function WithAboveTabsScreenHOC(props) {
+    const { aboveTabsScreen } = props;
+
+    const isFocusEnabled = useIsFocusEnabled(aboveTabsScreen);
+
+    return <Component {...props} isFocusDisabled={!isFocusEnabled} />;
+  };
+};
+
+export const FocusableGroup = compose(
+  withAboveTabsScreenContextConsumer,
+  withAboveTabsScreenHOC,
+  withFocusDisabledHOC
+)(FocusableGroupComponent);

package/Components/FocusableGroup/hooks/__tests__/useIsFocusEnabled.test.ts

@@ -0,0 +1,113 @@
+import { act, renderHook } from "@testing-library/react-native";
+
+import { useIsFocusEnabled } from "../useIsFocusEnabled";
+
+// ----------------- MOCKS -----------------
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios",
+  () => ({
+    focusManager: {
+      isFocusOnMenu: jest.fn(),
+      isFocusOnTabsScreen: jest.fn(),
+    },
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios",
+  () => {
+    const { Subject } = require("rxjs");
+
+    return {
+      willFocused$: new Subject<void>(),
+      didFocused$: new Subject<void>(),
+      TabsScreenScreenSelectorContainerRegistry: {
+        observable$: new Subject<string>(),
+      },
+    };
+  }
+);
+
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
+import {
+  willFocused$,
+  didFocused$,
+  TabsScreenScreenSelectorContainerRegistry,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+
+// ----------------- TESTS -----------------
+describe("useIsFocusEnabled", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns true by default", () => {
+    const { result } = renderHook(() => useIsFocusEnabled(true));
+
+    expect(result.current).toBe(true);
+  });
+
+  it("disables focus when focus moves to menu", () => {
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+
+    const { result } = renderHook(() => useIsFocusEnabled(true));
+
+    act(() => {
+      willFocused$.next();
+      didFocused$.next();
+    });
+
+    expect(result.current).toBe(false);
+  });
+
+  it("re-enables focus when focus lands on tabs screen", () => {
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+    (focusManager.isFocusOnTabsScreen as jest.Mock).mockReturnValue(true);
+
+    const { result } = renderHook(() => useIsFocusEnabled(true));
+
+    // Disable focus first
+    act(() => {
+      willFocused$.next();
+      didFocused$.next();
+    });
+
+    expect(result.current).toBe(false);
+
+    // Enable focus again
+    act(() => {
+      didFocused$.next();
+      TabsScreenScreenSelectorContainerRegistry.observable$.next("tabs-id");
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it("does nothing when not above tabs screen", () => {
+    const { result } = renderHook(() => useIsFocusEnabled(false));
+
+    act(() => {
+      willFocused$.next();
+      didFocused$.next();
+      TabsScreenScreenSelectorContainerRegistry.observable$.next("id");
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it("cleans up subscriptions on unmount", () => {
+    (focusManager.isFocusOnMenu as jest.Mock).mockReturnValue(true);
+
+    const { unmount, result } = renderHook(() => useIsFocusEnabled(true));
+
+    unmount();
+
+    act(() => {
+      willFocused$.next();
+      didFocused$.next();
+    });
+
+    // State should not change after unmount
+    expect(result.current).toBe(true);
+  });
+});

package/Components/FocusableGroup/hooks/index.ts

@@ -0,0 +1 @@
+export { useIsFocusEnabled } from "./useIsFocusEnabled";

package/Components/FocusableGroup/hooks/useIsFocusEnabled.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { switchMap, first, filter, repeat } from "rxjs/operators";
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
+
+import {
+  willFocused$,
+  didFocused$,
+  TabsScreenScreenSelectorContainerRegistry,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+
+export const useIsFocusEnabled = (isAboveTabsScreen: boolean): boolean => {
+  const [isFocusEnabled, setIsFocusedEnabled] = React.useState(true);
+
+  const enableFocus = React.useCallback(() => {
+    setIsFocusedEnabled(true);
+  }, []);
+
+  const disableFocus = React.useCallback(() => {
+    setIsFocusedEnabled(false);
+  }, []);
+
+  React.useEffect(() => {
+    const subscription = didFocused$
+      .pipe(
+        filter(() => isAboveTabsScreen && !isFocusEnabled),
+
+        switchMap(() => TabsScreenScreenSelectorContainerRegistry.observable$),
+        filter((id) => id && focusManager.isFocusOnTabsScreen(id)),
+
+        // run only once, then re-subscribe on didFocused$ again
+        first(),
+        repeat()
+      )
+      .subscribe(() => {
+        enableFocus();
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [enableFocus, isFocusEnabled, isAboveTabsScreen]);
+
+  React.useEffect(() => {
+    const subscription = willFocused$
+      .pipe(
+        filter(() => isAboveTabsScreen && isFocusEnabled),
+
+        // start waiting onFocus event
+        switchMap(() => didFocused$),
+
+        // focus is landed on top-menu
+        filter(() => focusManager.isFocusOnMenu()),
+
+        // run only once, then re-subscribe on willFocused$ again
+        first(),
+        repeat()
+      )
+      .subscribe(() => {
+        disableFocus();
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [disableFocus, isFocusEnabled, isAboveTabsScreen]);
+
+  return isFocusEnabled;
+};

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,4 +1,4 @@
-import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
+import { all, equals, isEmpty, path, pluck, prop, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
 
@@ -24,6 +24,7 @@ import {
 
 import { produce } from "immer";
 import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
+
 // types reference
 
 declare interface CurationEntry {
@@ -36,6 +37,7 @@ type Feeds = Record<string, ZappPipesData>;
 type LayoutPresets = PresetsMapping["presets_mappings"];
 
 const TABS_SCREEN_TYPE = "tabs_screen";
+const QB_TABS_SCREEN_TYPE = "quick-brick-tabs";
 const SMART_COMPONENT_TYPE = "quick-brick-smart-component";
 const SOURCE_PATH = ["data", "source"];
 const MAPPING_PATH = ["data", "mapping"];
@@ -54,7 +56,10 @@ export const getTransformedPreset = (
   const presetComponent = layoutPresets?.[preset?.preset_name];
 
   if (!presetComponent) {
-    logger.log_error("Preset missing or wrong data format", { entry: preset });
+    logger.log_error(
+      `Preset "${preset?.preset_name}" missing or wrong data format`,
+      { entry: preset }
+    );
 
     return;
   }
@@ -135,7 +140,11 @@ export const useCurationAPI = (
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const isNestedScreen = screenContext?.type === TABS_SCREEN_TYPE;
+  const screenContextType = screenContext?.type;
+
+  const isNestedScreen =
+    screenContextType === TABS_SCREEN_TYPE ||
+    screenContextType === QB_TABS_SCREEN_TYPE;
 
   const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
     pathname,

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -61,6 +61,7 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
+import { useRestrictMobilePlayback } from "./useRestrictMobilePlayback";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -264,7 +265,21 @@ const PlayerContainerComponent = (props: Props) => {
 
     showNavBar(true);
     navigator.goBack();
-  }, [isModal, navigator.goBack, state.playerId, showNavBar]);
+  }, [isModal, state.playerId, showNavBar, navigator]);
+
+  const pluginConfiguration = React.useMemo(() => {
+    return (
+      playerManager.getPluginConfiguration() ||
+      R.prop("__plugin_configuration", Player)
+    );
+  }, [playerManager.isRegistered()]);
+
+  const { isRestricted } = useRestrictMobilePlayback({
+    player,
+    entry: item,
+    pluginConfiguration,
+    close,
+  });
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -456,13 +471,6 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, []);
 
-  const pluginConfiguration = React.useMemo(() => {
-    return (
-      playerManager.getPluginConfiguration() ||
-      R.prop("__plugin_configuration", Player)
-    );
-  }, [playerManager.isRegistered()]);
-
   const disableMiniPlayer = React.useMemo(() => {
     return pluginConfiguration?.disable_mini_player_when_inline;
   }, [pluginConfiguration]);
@@ -662,36 +670,38 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      <Player
-                        source={{
-                          uri,
-                          entry: item,
-                        }}
-                        focused={isInlineTV ? true : undefined}
-                        autoplay={true}
-                        controls={false}
-                        disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
-                        entry={item}
-                        fullscreen={mode === VideoModalMode.FULLSCREEN}
-                        inline={inline}
-                        isModal={isModal}
-                        isTabletPortrait={isTabletPortrait}
-                        muted={false}
-                        playableItem={item}
-                        playerEvent={playerEvent}
-                        playerId={state.playerId}
-                        pluginConfiguration={pluginConfiguration}
-                        ref={playerRef}
-                        toggleFullscreen={toggleFullscreen}
-                        style={videoStyle}
-                        playNextData={playNextData}
-                        setNextVideoPreloadThresholdPercentage={
-                          setNextVideoPreloadThresholdPercentage
-                        }
-                      >
-                        {renderApplePlayer(applePlayerProps)}
-                      </Player>
+                      {isRestricted ? null : (
+                        <Player
+                          source={{
+                            uri,
+                            entry: item,
+                          }}
+                          focused={isInlineTV ? true : undefined}
+                          autoplay={true}
+                          controls={false}
+                          disableCastAction={disableCastAction}
+                          docked={navigator.isVideoModalDocked()}
+                          entry={item}
+                          fullscreen={mode === VideoModalMode.FULLSCREEN}
+                          inline={inline}
+                          isModal={isModal}
+                          isTabletPortrait={isTabletPortrait}
+                          muted={false}
+                          playableItem={item}
+                          playerEvent={playerEvent}
+                          playerId={state.playerId}
+                          pluginConfiguration={pluginConfiguration}
+                          ref={playerRef}
+                          toggleFullscreen={toggleFullscreen}
+                          style={videoStyle}
+                          playNextData={playNextData}
+                          setNextVideoPreloadThresholdPercentage={
+                            setNextVideoPreloadThresholdPercentage
+                          }
+                        >
+                          {renderApplePlayer(applePlayerProps)}
+                        </Player>
+                      )}
                     </PlayerFocusableWrapperView>
 
                     {state.error ? <ErrorDisplay error={state.error} /> : null}

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -0,0 +1,101 @@
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import NetInfo from "@react-native-community/netinfo";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { log_info } from "./logger";
+
+type RestrictMobilePlaybackProps = {
+  player?: Player;
+  entry?: ZappEntry;
+  pluginConfiguration?: Record<string, string>;
+  close: () => void;
+};
+
+export const useRestrictMobilePlayback = ({
+  player,
+  entry,
+  pluginConfiguration,
+  close,
+}: RestrictMobilePlaybackProps): { isRestricted: boolean } => {
+  const dialogVisibleRef = useRef<boolean>(false);
+  const theme = useTheme();
+
+  useEffect(() => {
+    return () => {
+      if (isTV()) {
+        return;
+      }
+
+      dialogVisibleRef.current = false;
+    };
+  }, []);
+
+  const isConnectionRestricted = useMemo(() => {
+    if (isTV()) {
+      return false;
+    }
+
+    return player && entry?.extensions?.connection_restricted;
+  }, [player, entry]);
+
+  const [isRestricted, setIsRestricted] = useState<boolean>(
+    isConnectionRestricted
+  );
+
+  useEffect(() => {
+    if (!isConnectionRestricted) {
+      return;
+    }
+
+    const stopPlayer = () => {
+      log_info(
+        "Stopping player due to mobile restriction, connection_restricted: true"
+      );
+
+      player?.close();
+
+      dialogVisibleRef.current = true;
+
+      showAlertDialog({
+        title:
+          pluginConfiguration?.mobile_connection_restricted_alert_title ||
+          "Restricted Connection Type",
+        message:
+          pluginConfiguration?.mobile_connection_restricted_alert_message ||
+          "This content can only be viewed over a Wi-Fi or LAN network.",
+        okButtonText: theme.ok_button || "OK",
+        completion: () => {
+          dialogVisibleRef.current = false;
+
+          close();
+        },
+      });
+    };
+
+    return NetInfo.addEventListener((state) => {
+      if (state.type === "cellular") {
+        setIsRestricted(true);
+
+        if (dialogVisibleRef.current) {
+          return;
+        }
+
+        stopPlayer();
+      } else {
+        setIsRestricted(false);
+      }
+    });
+  }, [
+    close,
+    entry?.extensions?.connection_restricted,
+    pluginConfiguration,
+    player,
+    theme.ok_button,
+    isConnectionRestricted,
+  ]);
+
+  return { isRestricted };
+};

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/Contexts/AboveTabsScreenContext/index.tsx

@@ -0,0 +1,33 @@
+import React, { useMemo } from "react";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
+export const AboveTabsScreenContext = React.createContext({
+  aboveTabsScreen: false,
+});
+
+export const withAboveTabsScreenContext = (Component) =>
+  function AbovetabsScreenContextProviderWrapper(props) {
+    const aboveTabsScreen = toBooleanWithDefaultFalse(
+      props?.item?.above_tabs_screen
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        aboveTabsScreen,
+      }),
+      [aboveTabsScreen]
+    );
+
+    return (
+      <AboveTabsScreenContext.Provider value={contextValue}>
+        <Component {...props} />
+      </AboveTabsScreenContext.Provider>
+    );
+  };
+
+export const withAboveTabsScreenContextConsumer = (Component) =>
+  function AboveTabsScreenContextConsumerWrapper(props) {
+    const { aboveTabsScreen } = React.useContext(AboveTabsScreenContext);
+
+    return <Component {...props} aboveTabsScreen={aboveTabsScreen} />;
+  };

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/__tests__/zappPipesDataConnector.test.js

@@ -3,7 +3,7 @@ import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUt
 
 import * as zappPipesRedux from "@applicaster/zapp-react-native-redux/ZappPipes";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 import { zappPipesDataConnector } from "../index";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.3564377339",
+  "version": "15.0.0-alpha.3564837831",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.3564377339",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.3564377339",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.3564377339",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.3564377339",
+    "@applicaster/applicaster-types": "15.0.0-alpha.3564837831",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.3564837831",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.3564837831",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.3564837831",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/River/TV/withTVEventHandler.tsx

@@ -1,27 +0,0 @@
-/* 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";
-
-export const withTvEventHandler = (Component) => {
-  return function WithTVEventHandler(props) {
-    const navigator = useNavigation();
-
-    const remoteHandler = (event) => {
-      const { eventType } = event;
-
-      const canGoBack = navigator.canGoBack();
-
-      if (eventType === "menu" && canGoBack) {
-        navigator.goBack();
-      }
-    };
-
-    return (
-      <TVEventHandlerComponent tvEventHandler={remoteHandler}>
-        <Component {...props} />
-      </TVEventHandlerComponent>
-    );
-  };
-};