@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4837064762 → 12.0.0-alpha.4945500007

package/Components/BaseFocusable/index.tsx

@@ -73,7 +73,7 @@ export class BaseFocusable<
   getId(props?: { id: string; groupId: string }) {
     const { id, groupId = null } = props || this.props;
 
-    return groupId ? `groupId:${groupId}___${id}` : id;
+    return groupId ? `${groupId}-${id}` : id;
   }
 
   getRect() {

package/Components/Cell/Cell.tsx

@@ -207,11 +207,7 @@ export class CellComponent extends React.Component<Props> {
 
     const { id } = item;
 
-    const focusableId = R.join("-", [
-      `componentId:${component?.id}`,
-      `id:${id}`,
-      `index:${index}`,
-    ]);
+    const focusableId = R.join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;

package/Components/Cell/CellWithFocusable.tsx

@@ -6,20 +6,12 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
 
-const useCellFocusedState = (
-  skipFocusManagerRegistration: boolean,
-  groupId: string,
-  id: string
-) => {
+const useCellFocusedState = (groupId: string, id: string) => {
   const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
 
   React.useEffect(() => {
-    const isGroupItemFocused = () => {
-      if (!skipFocusManagerRegistration) {
-        const isFocused = focusManager.isGroupItemFocused(groupId, id);
-        setCurrentCellFocused(isFocused);
-      }
-    };
+    const isGroupItemFocused = () =>
+      setCurrentCellFocused(focusManager.isGroupItemFocused(groupId, id));
 
     const handler = () => {
       // tvOS hack for properly checking focus
@@ -37,7 +29,7 @@ const useCellFocusedState = (
     return () => {
       focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
     };
-  }, [groupId, skipFocusManagerRegistration]);
+  }, [groupId]);
 
   return currentCellFocused;
 };
@@ -73,11 +65,7 @@ export function CellWithFocusable(props: Props) {
     selected,
   } = props;
 
-  const isFocused = useCellFocusedState(
-    skipFocusManagerRegistration,
-    groupId,
-    id
-  );
+  const isFocused = useCellFocusedState(groupId, id);
 
   const state = useCellState({
     id: item.id,

package/Components/FocusableGroup/index.tsx

@@ -26,7 +26,6 @@ type Props = {
   nextFocusLeft?: any;
   nextFocusRight?: any;
   onLayout?: any;
-  excludeFromFocusSearching?: boolean;
 };
 
 export class FocusableGroup extends BaseFocusable<Props> {

package/Components/GeneralContentScreen/utils/__tests__/useCurationAPI.test.js

@@ -50,7 +50,11 @@ describe("getTransformedPreset should return the passed components if smartCompo
       );
 
       expect(transformed_preset).toBeDefined();
-      expect(transformed_preset.id).toEqual("comp10"); // id was transformed
+
+      expect(transformed_preset.id).toEqual(
+        `${mockComp.id}-${mockPreset.feed_url}-0`
+      ); // id was transformed
+
       expect(transformed_preset.data.source).toEqual(mockPreset.feed_url); // source was replaced with preset feed_url.
     });
   });
@@ -117,7 +121,10 @@ describe("getTransformedPreset should return the passed components if smartCompo
 
       expect(Array.isArray(result)).toBe(true);
       expect(result).toHaveLength(2);
-      expect(result[0].id).toEqual("smart10");
+
+      expect(result[0].id).toEqual(
+        `${mockSmartComp.id}-${mockFeeds.preset_source.data.entry[0].feed_url}-0`
+      );
 
       expect(result[0].data.source).toEqual(
         mockFeeds.preset_source.data.entry[0].feed_url
@@ -287,7 +294,7 @@ describe("getTransformedPreset should return the passed components if smartCompo
         mockComponents[0],
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[1].id + 1,
+          id: `${mockComponents[1].id}-${mockPresetEntry[0].feed_url}-1`,
           data: { source: mockPresetEntry[0].feed_url },
         },
       ];
@@ -344,12 +351,12 @@ describe("getTransformedPreset should return the passed components if smartCompo
       const mockTransformedComponents = [
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[0].id + 0,
+          id: `${mockComponents[0].id}-${mockPresetEntry1[0].feed_url}-0`,
           data: { source: mockPresetEntry1[0].feed_url },
         },
         {
           ...mockLayoutPresets.preset_one,
-          id: mockComponents[1].id + 1,
+          id: `${mockComponents[1].id}-${mockPresetEntry2[0].feed_url}-1`,
           data: { source: mockPresetEntry2[0].feed_url },
         },
       ];
@@ -412,7 +419,7 @@ describe("getTransformedPreset should return the passed components if smartCompo
     const mockTransformedComponents = mockPresetEntry.map((preset, i) => {
       return {
         ...mockLayoutPresets[preset.preset_name],
-        id: mockComponents[0].id + i,
+        id: `${mockComponents[0].id}-${preset.feed_url}-${i}`,
         data: { source: preset.feed_url },
       };
     });

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -41,7 +41,7 @@ export const getTransformedPreset = (
   }
 
   const updatedPresetComponent = produce(presetComponent, (draft) => {
-    draft.id = `${componentId}${index}`;
+    draft.id = `${componentId}-${preset?.feed_url}-${index}`;
     draft.data.source = preset?.feed_url;
 
     if (draft.ui_components) {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -19,7 +19,6 @@ type Props = {
   modalHeight?: number;
   modalWidth?: number;
   mode: VideoModalMode;
-  groupId?: string;
 };
 
 const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
@@ -94,7 +93,6 @@ export function HandlePlayable({
   modalHeight,
   modalWidth,
   mode,
-  groupId,
 }: Props): React.ReactElement | null {
   const state = usePickFromState();
 
@@ -169,7 +167,6 @@ export function HandlePlayable({
         isModal={isModal}
         mode={mode}
         disableCastAction={playerModuleProperties?.disableCastAction}
-        groupId={groupId}
       />
     );
   }

package/Components/Layout/TV/ScreenLayoutContextProvider.tsx

@@ -60,7 +60,7 @@ export function ScreenLayoutContextProvider(props: {
     initialState
   );
 
-  const screenLayoutValue = React.useMemo(
+  const screeenLayoutValue = React.useMemo(
     () => ({
       ...screenLayout,
       setScreenLayout,
@@ -69,7 +69,7 @@ export function ScreenLayoutContextProvider(props: {
   );
 
   return (
-    <ScreenLayoutContext.Provider value={screenLayoutValue}>
+    <ScreenLayoutContext.Provider value={screeenLayoutValue}>
       {props.children}
     </ScreenLayoutContext.Provider>
   );

package/Components/Layout/TV/index.tsx

@@ -1,15 +1,11 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import {
   getNavigationProps,
-  getPathAttributes,
   resolveNavigationPlugin,
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
@@ -21,25 +17,9 @@ import { ScreenContainer } from "./ScreenContainer";
 import { TransitionOverlay } from "./TransitionOverlay";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
-
-import { FocusableGroup } from "../../FocusableGroup";
-import { Screen } from "../../Screen/TV/index.web";
-
-export const ScreenDataContext = React.createContext(null);
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    width: 1920,
-    height: 1080,
-    backgroundColor: "black",
-    // opacity: 0.5,
-
-    borderWidth: 4,
-    borderColor: "magenta",
-  },
-});
+import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -47,73 +27,16 @@ type Components = {
 };
 
 type ComponentsExtraProps = {
-  NavBar?: Record<string, any>;
   Background?: Record<string, any>;
+  NavBar?: Record<string, any>;
 };
 
 type Props = {
   Components: Components;
-  componentsExtraProps?: ComponentsExtraProps;
-};
-
-const StackNavigator = ({ Components }: Props) => {
-  // @ts-ignore
-  const { mainStack, currentRoute } = useNavigation();
-
-  // console.log("debug_2", "DEBUG", { mainStack });
-
-  const renderScreen = ({ route, action, key, state }, index) => {
-    const pathAttributes = getPathAttributes({ pathname: route });
-
-    if (R.isEmpty(pathAttributes)) {
-      return null;
-    }
-
-    // console.log("debug_2", "StackNavigator - renderScreen", {
-    //   index,
-    //   route,
-    //   state,
-    //   key,
-    //   action,
-    // });
-
-    const id = `${route}`;
-
-    return (
-      <FocusableGroup
-        id={id}
-        preferredFocus={route === currentRoute}
-        excludeFromFocusSearching
-        key={id}
-      >
-        <View style={styles.container}>
-          <ScreenDataContext.Provider value={state}>
-            <PathnameContext.Provider value={route}>
-              <Screen route={route} Components={Components} />
-            </PathnameContext.Provider>
-          </ScreenDataContext.Provider>
-        </View>
-      </FocusableGroup>
-    );
-  };
-
-  return mainStack.map(renderScreen);
-};
-
-const TransitionerTV = ({ componentsExtraProps, Components }: Props) => {
-  return (
-    <>
-      <ScreenLayoutContextProvider>
-        <StackNavigator
-          componentsExtraProps={componentsExtraProps}
-          Components={Components}
-        />
-      </ScreenLayoutContextProvider>
-    </>
-  );
+  ComponentsExtraProps?: ComponentsExtraProps;
+  children: React.ReactNode;
 };
 
-// @ts-ignore
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
   const theme = useTheme();
@@ -175,54 +98,32 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   }
 
   return (
-    // @ts-ignore
-    <TransitionerTV
-      componentsExtraProps={ComponentsExtraProps}
-      Components={Components}
-    >
-      <LayoutContainer>
-        <ScreenLayoutContextProvider>
-          <Components.Background
-            backgroundColor={backgroundColor}
-            backgroundImageUrl={backgroundImageUrl}
-            {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-          >
-            {!isTVOS ? navBarContainer : null}
-            {navBarReady ? (
-              /**
+    <LayoutContainer>
+      <ScreenLayoutContextProvider>
+        <Components.Background
+          backgroundColor={backgroundColor}
+          backgroundImageUrl={backgroundImageUrl}
+          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
+        >
+          {!isTVOS ? navBarContainer : null}
+          {navBarReady ? (
+            /**
              Need to re-mount this component on each navigation event
              It's a hack to work around the fact that we don't support
              correct screen rendering in our navigator (shared currentRoute state)
              **/
-              <PathnameContext.Provider value={navigator.currentRoute}>
-                <ScreenContainer>{children}</ScreenContainer>
-              </PathnameContext.Provider>
-            ) : null}
-            {/** Render NavBarContainer over ScreenContainer to let tvOS native
+            <PathnameContext.Provider value={navigator.currentRoute}>
+              <ScreenContainer>{children}</ScreenContainer>
+            </PathnameContext.Provider>
+          ) : null}
+          {/** Render NavBarContainer over ScreenContainer to let tvOS native
           focus manager works correctly to focus nav bar items first **/}
-            {isTVOS ? navBarContainer : null}
-            <TransitionOverlay />
-          </Components.Background>
-        </ScreenLayoutContextProvider>
-      </LayoutContainer>
-    </TransitionerTV>
+          {isTVOS ? navBarContainer : null}
+          <TransitionOverlay />
+        </Components.Background>
+      </ScreenLayoutContextProvider>
+    </LayoutContainer>
   );
 };
 
 export default Layout;
-
-/// Transitioner:
-/*
-Component: Transitioner
-Responsibilities:
-- Transitione between screens.
-Tehere is no transition on Tv so no need for transitioner.
-
-Component: StackNavigator
-Responsibilities:
-- Render the screens in the stack.
-- Render the NavBar? I guess navbar should be part of the screen
-- Render the screen.
-
-Q
- */

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -68,7 +68,6 @@ type Props = {
   mode?: VideoModalMode;
   loadPipesData: (url: string, options: {}) => void;
   disableCastAction?: boolean;
-  groupId?: string;
 };
 
 type ScreenStyles = ZappRiver["styles"] & {
@@ -201,7 +200,6 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
-    groupId,
   } = props;
 
   // Hooks
@@ -251,6 +249,7 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
+    navigator.goBack();
     showNavBar(true);
   }, [isModal, navigator.goBack, showNavBar]);
 
@@ -630,7 +629,6 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
-                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, Platform, Animated, FlatList } from "react-native";
+import { View, StyleSheet, Platform, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -217,7 +217,7 @@ function ComponentsMapComponent(props: Props) {
 
     const { height: headerHeight, scrollState } = navBarStore.getState();
 
-    const offsetY = nativeEvent.contentOffset.y;
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
     if (
       !(scrollState === 0 || scrollState === -headerHeight) &&
@@ -240,7 +240,7 @@ function ComponentsMapComponent(props: Props) {
   const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
     const { height: headerHeight, scrollState } = navBarStore.getState();
 
-    const offsetY = nativeEvent.contentOffset.y;
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
     if (
       !(scrollState === 0 || scrollState === -headerHeight) &&
@@ -260,6 +260,20 @@ function ComponentsMapComponent(props: Props) {
     }
   }, []);
 
+  const onScroll = React.useCallback((event) => {
+    const {
+      nativeEvent: {
+        contentOffset: { y },
+        layoutMeasurement: { height },
+        contentSize: { height: contentHeight },
+      },
+    } = event;
+
+    if (y >= 0 && y + height <= contentHeight) {
+      scrollY.setValue(y);
+    }
+  }, []);
+
   if (shouldShowLoadingError) {
     return <RiverError />;
   }
@@ -298,20 +312,7 @@ function ComponentsMapComponent(props: Props) {
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
             onScrollBeginDrag={onScrollBeginDrag}
-            onScroll={Animated.event(
-              [
-                {
-                  nativeEvent: {
-                    contentOffset: {
-                      y: scrollY,
-                    },
-                  },
-                },
-              ],
-              {
-                useNativeDriver: false,
-              }
-            )}
+            onScroll={onScroll}
             onMomentumScrollEnd={_onMomentumScrollEnd}
             onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}

package/Components/ScreenResolver/index.tsx

@@ -32,13 +32,12 @@ type Props = {
     nextFocusLeft?: React.Ref<any>;
     nextFocusUp?: React.Ref<any>;
   };
-  groupId?: string;
 };
 
 export function ScreenResolverComponent(props: Props) {
   useScreenAnalytics(props);
 
-  const { screenType, screenId, screenData, groupId } = props;
+  const { screenType, screenId, screenData } = props;
 
   const { hookPlugin } = screenData || {};
 
@@ -82,7 +81,6 @@ export function ScreenResolverComponent(props: Props) {
         item={screenData}
         mode={mode === "PIP" ? "PIP" : "FULLSCREEN"}
         isModal={false}
-        groupId={groupId}
       />
     );
   }

package/Components/Viewport/ViewportTracker/ViewportTracker.tsx

@@ -6,23 +6,23 @@ import { callOnChildren } from "../utils";
 
 export function ViewportTracker(props) {
   const viewportEvents = useViewportEventsContext();
-  const { children } = props;
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
-  const [offsetX, setOffsetX] = React.useState(0);
-  const [offsetY, setOffsetY] = React.useState(0);
   const [nodeHandle, setNodeHandle] = React.useState(null);
 
-  const assignRef = React.useCallback(
-    (ref) => {
-      children?.ref?.(ref);
-      setNodeHandle(findNodeHandle(ref));
-    },
-    [children]
-  );
+  const childrenRef = React.useRef(props.children);
+
+  const dimensionsRef = React.useRef({ width: 0, height: 0 });
+  const offsetRef = React.useRef({ offsetX: 0, offsetY: 0 });
+
+  const assignRef = React.useCallback((ref) => {
+    childrenRef.current?.ref?.(ref);
+    setNodeHandle(findNodeHandle(ref));
+  }, []);
 
   const onViewportChange = React.useCallback(
-    (event, shouldMeasureLayout = true) => {
+    ({
+      event = { ...dimensionsRef.current, ...offsetRef.current },
+      shouldMeasureLayout = true,
+    } = {}) => {
       if (nodeHandle && event?.width > 0 && event?.height > 0) {
         viewportEvents?.notify?.({
           parentHandle: nodeHandle,
@@ -36,54 +36,45 @@ export function ViewportTracker(props) {
 
   const onLayout = React.useCallback(
     (event) => {
-      callOnChildren(children, "onLayout", event);
-      setWidth(event?.nativeEvent?.layout?.width);
-      setHeight(event?.nativeEvent?.layout?.height);
+      callOnChildren(childrenRef.current, "onLayout", event);
+      dimensionsRef.current = event?.nativeEvent?.layout;
 
-      onViewportChange({
-        width: event?.nativeEvent?.layout?.width,
-        height: event?.nativeEvent?.layout?.height,
-        offsetX,
-        offsetY,
-      });
+      onViewportChange();
     },
-    [offsetX, offsetY, children, onViewportChange]
+    [onViewportChange]
   );
 
   const onContentSizeChange = React.useCallback(
     (contentWidth, contentHeight) => {
       callOnChildren(
-        children,
+        childrenRef.current,
         "onContentSizeChange",
         contentWidth,
         contentHeight
       );
 
-      onViewportChange({ width, height, offsetX, offsetY });
+      onViewportChange();
     },
-    [onViewportChange, children, width, height, offsetX, offsetY]
+    [onViewportChange]
   );
 
   const onScroll = React.useCallback(
     (event) => {
-      callOnChildren(children, "onScroll", event);
-      setOffsetX(event?.nativeEvent?.contentOffset?.x);
-      setOffsetY(event?.nativeEvent?.contentOffset?.y);
+      callOnChildren(childrenRef.current, "onScroll", event);
+      offsetRef.current = event?.nativeEvent?.contentOffset;
 
-      onViewportChange(
-        {
-          width,
-          height,
-          offsetX: event?.nativeEvent?.contentOffset?.x,
-          offsetY: event?.nativeEvent?.contentOffset?.y,
-        },
-        false
-      );
+      onViewportChange({
+        shouldMeasureLayout: false,
+      });
     },
-    [onViewportChange, width, height, children]
+    [onViewportChange]
   );
 
-  return React.cloneElement(React.Children.only(children), {
+  React.useEffect(() => {
+    childrenRef.current = props.children;
+  }, [props.children]);
+
+  return React.cloneElement(React.Children.only(props.children), {
     ref: assignRef,
     onLayout,
     onContentSizeChange,

package/Contexts/ZappPipesContext/ZappPipesEntryContext.ts

@@ -63,7 +63,7 @@ function prepareContext(
   const parent = findParent(currentContext, route, getChildren);
 
   const newEntry = {
-    route,
+    route: route,
     id: uuid(),
     data: newContext,
   } as SingleEntry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.4837064762",
+  "version": "12.0.0-alpha.4945500007",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.4837064762",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4837064762",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4837064762",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4837064762",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4945500007",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4945500007",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4945500007",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4945500007",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

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

@@ -1,151 +0,0 @@
-import * as React from "react";
-import { last, pathOr } from "ramda";
-import { ScreenResolver } from "../../ScreenResolver";
-import {
-  getNavigationProps,
-  getPathAttributes,
-  resolveNavigationPlugin,
-} from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-
-type Components = {
-  NavBar: React.ComponentType<any>;
-  Background: React.ComponentType<any>;
-};
-
-type Props = {
-  route: string;
-  Components: Components;
-};
-
-const isPlayer = (routeState): boolean => {
-  const pluginType = pathOr(
-    "unknown_plugin_type",
-    ["state", "screen", "plugin_type"],
-    routeState
-  );
-
-  return pluginType === "player";
-};
-
-const getActiveRiver = ({
-  screenId,
-  screenType,
-  routeState,
-  rivers,
-  fallbackActiveRiver,
-}) => {
-  if (rivers[screenId]) {
-    // river presents
-    return screenType === "hooks"
-      ? routeState?.state?.entry?.payload
-      : routeState?.state?.screen;
-  }
-
-  // screenId is not presented into rivers, use fallback instead
-  return fallbackActiveRiver;
-};
-
-const getNavigations = ({
-  screenId,
-  screenType,
-  routeState,
-  rivers,
-  fallbackNavigations,
-}) => {
-  if (rivers[screenId]) {
-    // river presents
-    return screenType === "hooks"
-      ? routeState?.state?.entry?.payload.navigations
-      : routeState?.state?.screen?.navigations;
-  }
-
-  // screenId is not presented into rivers, use fallback instead
-  return fallbackNavigations;
-};
-
-export const Screen = (props: Props) => {
-  if (!props.route) {
-    throw new Error("Required props route is missing");
-  }
-
-  const navigator = useNavigation();
-  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
-
-  const pathAttributes = getPathAttributes({ pathname: props.route });
-  const routeState = navigator.getStackForPathname(props.route);
-
-  const { screenType, screenId } = last(pathAttributes);
-
-  // console.log("debug_2", "Screen", {
-  //   screenType,
-  //   routeState,
-  //   route: props.route,
-  //   navigator,
-  // });
-
-  const activeRiver = getActiveRiver({
-    screenId,
-    screenType,
-    routeState,
-    rivers,
-    fallbackActiveRiver: navigator.activeRiver,
-  });
-
-  const navigationProps = getNavigationProps({
-    navigator: {
-      // @ts-ignore
-      activeRiver,
-      // @ts-ignore
-      screenTitle: routeState.state.entry?.title || routeState.screen?.name,
-    },
-    category: "menu",
-  });
-
-  const navigations = getNavigations({
-    screenId,
-    screenType,
-    routeState,
-    rivers,
-    fallbackNavigations: navigator.activeRiver.navigations,
-  });
-
-  const menuPlugin = resolveNavigationPlugin({
-    category: "menu",
-    navigations,
-    plugins,
-  }) as QuickBrickPlugin;
-
-  const NavBar = (props.Components.NavBar ||
-    menuPlugin.module) as React.ComponentType<any>;
-
-  const isNavBarVisible = !isPlayer(routeState);
-
-  const screenData =
-    screenType === "hooks"
-      ? routeState?.state?.entry
-      : routeState?.state?.screen;
-
-  return (
-    <>
-      <NavBarContainer isVisible={isNavBarVisible} onReady={noop}>
-        <NavBar
-          groupId={props.route}
-          isVisible={isNavBarVisible}
-          menuPlugin={menuPlugin}
-          navigationProps={navigationProps}
-          // Maybe activeRiver?
-        />
-      </NavBarContainer>
-      <ScreenResolver
-        screenType={screenType}
-        screenId={screenId}
-        screenData={screenData}
-        groupId={props.route}
-      />
-    </>
-  );
-};