@applicaster/zapp-react-native-ui-components 12.0.0-alpha.7623722215 → 12.0.0-alpha.7921075302

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/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -7,24 +7,50 @@ type BorderPosition = "inside" | "outside" | "center";
 interface Props {
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
-  borderPaddingTop: number;
-  borderPaddingRight: number;
-  borderPaddingBottom: number;
-  borderPaddingLeft: number;
   children: React.ReactNode;
 }
 
-const COLOR_TRANSPARENT = "transparent";
+const MARGINS = [
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+] as const;
 
-const styles = StyleSheet.create({
-  container: {
-    overflow: "visible",
-    borderWidth: 0,
-    borderColor: COLOR_TRANSPARENT,
-  },
-});
+const PADDINGS = [
+  "paddingTop",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+] as const;
 
-const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
+const isPercentageValue = (value: number | string) => {
+  if (typeof value === "string" && value.endsWith("%")) {
+    return true;
+  }
+
+  return false;
+};
+
+const calculateContainerSpacing = ({
+  spacingKey,
+  style,
+  additionalSpacing,
+}: {
+  spacingKey: typeof MARGINS[number] | typeof PADDINGS[number];
+  style: ImageStyle | ViewStyle;
+  additionalSpacing: number;
+}) => {
+  return {
+    [spacingKey]:
+      toNumberWithDefaultZero(style[spacingKey]) + additionalSpacing,
+  };
+};
+
+const getContainerBorderWidth = (
+  borderPosition: BorderPosition,
+  borderWidth
+) => {
   switch (borderPosition) {
     case "inside":
       return 0;
@@ -37,103 +63,102 @@ const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
   }
 };
 
+const getContainerPadding = (borderPosition: BorderPosition, borderWidth) => {
+  switch (borderPosition) {
+    case "inside":
+      return borderWidth;
+    case "center":
+      return borderWidth / 2;
+    case "outside":
+      return 0;
+    default:
+      return 0;
+  }
+};
+
 const InsideBorder = ({
   style,
-  padding,
   borderPosition,
 }: {
   style: ViewStyle;
-  padding: ViewStyle;
   borderPosition: BorderPosition;
 }) => {
-  if (!borderPosition) {
+  if (borderPosition === "outside") {
     return null;
   }
 
-  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
-  const containerPadding = getBorderPadding(borderPosition, borderWidth);
-
-  const initialBorderRadius = toNumberWithDefaultZero(style.borderRadius);
-  const paddingTop = toNumberWithDefaultZero(padding.paddingTop);
-  const paddingRight = toNumberWithDefaultZero(padding.paddingRight);
-  const paddingBottom = toNumberWithDefaultZero(padding.paddingBottom);
-  const paddingLeft = toNumberWithDefaultZero(padding.paddingLeft);
-
-  const borderRadiusStyle = initialBorderRadius
-    ? {
-        borderTopLeftRadius:
-          initialBorderRadius +
-          containerPadding +
-          Math.min(paddingTop, paddingLeft),
-        borderTopRightRadius:
-          initialBorderRadius +
-          containerPadding +
-          Math.min(paddingTop, paddingRight),
-        borderBottomLeftRadius:
-          initialBorderRadius +
-          containerPadding +
-          Math.min(paddingBottom, paddingLeft),
-        borderBottomRightRadius:
-          initialBorderRadius +
-          containerPadding +
-          Math.min(paddingBottom, paddingRight),
-      }
-    : {
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0,
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-      };
+  const insideBorderWidth =
+    borderPosition === "center" ? style.borderWidth / 2 : style.borderWidth;
 
   return (
     <View
       style={{
         ...StyleSheet.absoluteFillObject,
-        right: -containerPadding - paddingRight,
-        bottom: -containerPadding - paddingBottom,
-        left: -containerPadding - paddingLeft,
-        top: -containerPadding - paddingTop,
-        borderWidth,
+        borderWidth: insideBorderWidth,
         borderColor: style.borderColor,
-        ...borderRadiusStyle,
+        borderRadius: style.borderRadius,
       }}
     />
   );
 };
 
 export const BorderContainerView = (props: Props) => {
-  const {
-    borderPosition,
-    borderPaddingTop,
-    borderPaddingRight,
-    borderPaddingBottom,
-    borderPaddingLeft,
-    style,
-    children,
-  } = props;
+  const { style, children } = props;
+  // Return border position prop after re-implementing
+  const borderPosition = "outside";
+
+  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
+  const spacing = getContainerPadding(borderPosition, borderWidth);
 
   const borderStyleForMissingBorder =
     style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
 
-  const padding =
-    borderPosition === "outside"
-      ? {
-          paddingTop: borderPaddingTop,
-          paddingRight: borderPaddingRight,
-          paddingBottom: borderPaddingBottom,
-          paddingLeft: borderPaddingLeft,
-        }
-      : {};
+  const updatedMargins = MARGINS.reduce((acc, margin) => {
+    const marginValue = calculateContainerSpacing({
+      spacingKey: margin,
+      style,
+      additionalSpacing: spacing,
+    });
+
+    return { ...acc, ...marginValue };
+  }, {});
+
+  const updatedPaddings = PADDINGS.reduce((acc, padding) => {
+    const paddingValue = calculateContainerSpacing({
+      spacingKey: padding,
+      style,
+      additionalSpacing: spacing,
+    });
+
+    return { ...acc, ...paddingValue };
+  }, {});
+
+  const updatedWidth = style.width
+    ? isPercentageValue(style.width)
+      ? style.width
+      : toNumberWithDefaultZero(style.width) - spacing * 2
+    : undefined;
+
+  const updatedHeight = style.height
+    ? isPercentageValue(style.height)
+      ? style.height
+      : toNumberWithDefaultZero(style.height) - spacing * 2
+    : undefined;
+
+  const containerStyle = {
+    borderWidth: getContainerBorderWidth(borderPosition, borderWidth),
+    padding: spacing,
+    ...updatedMargins,
+    ...updatedPaddings,
+    width: updatedWidth,
+    height: updatedHeight,
+  };
 
   return (
-    <View
-      {...props}
-      style={[style, styles.container, borderStyleForMissingBorder]}
-    >
+    <View {...props} style={[style, containerStyle]}>
       {children}
       <InsideBorder
-        style={style}
-        padding={padding}
+        style={{ ...style, ...borderStyleForMissingBorder }}
         borderPosition={borderPosition}
       />
     </View>

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -43,14 +43,16 @@ function Image({
     [source, error]
   );
 
+  const _source = shouldRenderImg
+    ? withDimensions(source)
+    : defaultPlaceHolderImage;
+
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={
-        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
-      }
+      source={_source?.uri ? _source : undefined}
       {...R.omit(["source"], otherProps)}
     />
   );

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
+    expect(testInstance.findByType(Image).props.source).toBeUndefined();
   });
 });

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -54,7 +54,10 @@ import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -231,6 +234,9 @@ const PlayerContainerComponent = (props: Props) => {
   const screenData = useTargetScreenData(item);
   const { setVisible: showNavBar } = useSetNavbarState();
 
+  const { isActiveGesture, startComponentsAnimation, setPlayerAnimationState } =
+    useModalAnimationContext();
+
   const playerEvent = (event, ...args) => {
     playerManager.invokeHandler(event, ...args);
   };
@@ -448,7 +454,7 @@ const PlayerContainerComponent = (props: Props) => {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
       } else {
-        navigator.minimiseVideoModal();
+        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -600,9 +606,6 @@ const PlayerContainerComponent = (props: Props) => {
     pluginConfiguration,
   };
 
-  const { isActiveGesture, startComponentsAnimation } =
-    useModalAnimationContext();
-
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, FlatList, StyleSheet, Platform } 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";
@@ -21,7 +21,8 @@ import {
 import { useScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData";
 import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
-import { useScreenScrollStore } from "@applicaster/zapp-react-native-utils/screenState";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useShallow } from "zustand/react/shallow";
 
 type Props = {
   feed: ZappFeed;
@@ -41,8 +42,10 @@ const styles = StyleSheet.create({
   },
 });
 
-const scrollIndicatorInsets = { right: 1 };
+const getNearestValue = (value, optionA, optionB) =>
+  Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
+const scrollIndicatorInsets = { right: 1 };
 const keyExtractor = R.compose(String, R.prop("id"));
 
 function ComponentsMapComponent(props: Props) {
@@ -60,6 +63,7 @@ function ComponentsMapComponent(props: Props) {
     refreshingPipesV1,
   } = props;
 
+  const flatListRef = React.useRef<FlatList | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -194,26 +198,81 @@ function ComponentsMapComponent(props: Props) {
     []
   );
 
-  const onScrollFlatList = React.useCallback(
-    ({ nativeEvent }, isScrollingDone = false) => {
-      const {
-        contentOffset: { y },
-      } = nativeEvent;
+  const navBarStore = useScreenContextV2()._navBarStore;
 
-      useScreenScrollStore.setState({
-        scrollingVelocity: isScrollingDone ? 0 : 1,
-        scrollPosition: y,
-      });
-    },
-    []
+  const scrollY = navBarStore(
+    useShallow(({ scrollYAnimated }) => scrollYAnimated)
   );
 
-  const onMomentumScrollEnd = React.useCallback(
-    ({ nativeEvent }) => {
-      onScrollFlatList({ nativeEvent }, true);
-    },
-    [onScrollFlatList]
-  );
+  const canMomentum = React.useRef(false);
+
+  const onScrollBeginDrag = React.useCallback(() => {
+    canMomentum.current = true;
+  }, []);
+
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
+    if (!canMomentum.current) return;
+    canMomentum.current = false;
+
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current &&
+      nativeEvent.velocity.y === 0
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  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 />;
@@ -230,6 +289,9 @@ function ComponentsMapComponent(props: Props) {
       >
         <ViewportTracker>
           <FlatList
+            ref={(ref) => {
+              flatListRef.current = ref;
+            }}
             // Fix for WebView rerender crashes on Android API 28+
             // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
@@ -249,8 +311,10 @@ function ComponentsMapComponent(props: Props) {
             }
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
-            onScroll={onScrollFlatList}
-            onMomentumScrollEnd={onMomentumScrollEnd}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScroll={onScroll}
+            onMomentumScrollEnd={_onMomentumScrollEnd}
+            onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
             {...scrollViewExtraProps}
           />

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

@@ -11,7 +11,9 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   }
 >
   <View
+    hasMenu={false}
     id="/river/testId"
+    pathname="/river/testId"
     selected="testId"
     testID="navBar"
     title=""
@@ -41,7 +43,9 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   }
 >
   <View
+    hasMenu={false}
     id="/river/testId"
+    pathname="/river/testId"
     selected="testId"
     testID="navBar"
     title=""

package/Components/Screen/index.tsx

@@ -6,7 +6,10 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { getNavigationPropsV2 } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import {
+  getNavigationPropsV2,
+  resolveNavigationPlugin,
+} from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   useDimensions,
@@ -52,11 +55,11 @@ function isValidColor(string) {
 }
 
 type Props = {
-  setToggleMenu: () => void;
-  setCloseMenu: () => void;
+  pathname: unknown;
+  screenData: unknown;
 };
 
-export function Screen({ setToggleMenu, setCloseMenu }: Props) {
+export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
@@ -70,26 +73,38 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
     fullDimensions: true,
   });
 
-  const routeData = useRoute();
+  const { screenData, pathname } = useRoute();
 
   const currentRiver = useScreenData(
-    getScreenId(routeData.screenData, navigation.activeRiver)
+    getScreenId(screenData, navigation.activeRiver)
   );
 
   const { title } = useNavbarState();
 
-  const navBarProps = React.useMemo(
-    () => ({
-      ...getNavigationPropsV2({
-        currentRiver,
-        title,
-        category: "nav_bar",
-      }),
-      setToggleMenu,
-      setCloseMenu,
-    }),
-    [currentRiver, setCloseMenu, setToggleMenu]
-  );
+  const hasMenu =
+    resolveNavigationPlugin({
+      category: "menu",
+      navigations: currentRiver.navigations,
+      plugins,
+    })?.identifier === "quick_brick_side_menu";
+
+  const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(() => {
+    const props = getNavigationPropsV2({
+      currentRiver,
+      title,
+      category: "nav_bar",
+    });
+
+    if (props) {
+      return {
+        ...props,
+        id: pathname,
+        pathname: pathname,
+      };
+    }
+
+    return null;
+  }, [currentRiver, pathname]);
 
   const NavBar = React.useMemo(
     () =>
@@ -97,12 +112,10 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
         "nav_bar",
         currentRiver,
         plugins
-      ) as React.ComponentType<MobileNavBarPluginProps>,
+      ) as React.ComponentType<MobileNavBarPluginProps & { hasMenu: boolean }>,
     []
   );
 
-  const { screenData, pathname } = routeData;
-
   const offlinePlugin = getComponentModule({
     plugins,
     components: {},
@@ -133,9 +146,7 @@ export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   return (
     <ScreenContextProvider pathname={pathname}>
       <View style={style}>
-        <NavBar
-          {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
-        />
+        {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
 
         <OfflineFallbackScreen screenData={targetScreenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -30,11 +30,6 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
       playerId="player1"
       resizeMode="cover"
       screenConfig={Object {}}
-      source={
-        Object {
-          "uri": "",
-        }
-      }
       style={Object {}}
     />
   </View>

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -9,6 +9,8 @@ import {
   TapGestureHandler,
   GestureHandlerRootView,
 } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -58,6 +60,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     setLastSnap,
   } = useModalAnimationContext();
 
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
@@ -69,6 +73,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
     playerAnimationState !== PlayerAnimationStateEnum.maximaze;
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible &&
+    isNotMinimizeMaximazeAnimation &&
+    (isMaximazedModal || isMinimizedModal);
+
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -290,15 +299,13 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       >
         <View pointerEvents="box-none">
           <PanGestureHandler
-            enabled={
-              (isMaximazedModal || isMinimizedModal) &&
-              isNotMinimizeMaximazeAnimation
-            }
+            enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximazedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
+            activeOffsetY={[-5, 5]}
           >
             <Animated.View>
               <NativeViewGestureHandler

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -3,6 +3,8 @@ import { Animated, StyleSheet } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PanGestureHandler, State } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -35,9 +37,14 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   } = useModalAnimationContext();
 
   const { videoModalState } = useNavigation();
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
   const isMinimizedModal = videoModalState.mode === "MINIMIZED";
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible && (isMaximazedModal || isMinimizedModal);
+
   const onGestureEvent = Animated.event(
     [{ nativeEvent: { translationY: dragVideoPlayerY } }],
     { useNativeDriver: true }
@@ -53,7 +60,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
       if (videoModalState.mode === "MAXIMIZED") {
         if (translationY > 0) {
           const endOffsetY =
-            lastSnap + preparedTranslationY + dragToss * velocityY + 150;
+            lastSnap + preparedTranslationY + dragToss * velocityY + 200;
 
           let destSnapPoint = modalSnapPoints[0];
 
@@ -127,7 +134,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 
   return (
     <PanGestureHandler
-      enabled={isMaximazedModal || isMinimizedModal}
+      enabled={isEnablePanGesture}
       shouldCancelWhenOutside={isMaximazedModal}
       onGestureEvent={onGestureEvent}
       onHandlerStateChange={onHandlerStateChange}

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) => {
-      callOnChildren(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/Components/Viewport/ViewportTracker/index.tsx

@@ -6,6 +6,7 @@ import { ViewportEventContext, ViewportEvents } from "../ViewportEvents";
 type Props = {
   viewportEventsManager?: any;
   children: React.ReactNode;
+  flatListRef?: any; // this ref is used to bind to children component
 };
 
 export function ViewportTracker(props: Props) {

package/Components/Viewport/utils.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export function callOnChildren(children, method, ...args) {
   const childMethod = React.Children.only(children).props[method];
-  childMethod && childMethod(...args);
+  typeof childMethod === "function" && childMethod?.(...args);
 }
 
 export function isInViewport(

package/Contexts/MenuToggleContext/{index.js → index.ts}

@@ -1,4 +1,5 @@
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";
+import React from "react";
 
 const initialContext = { toggleMenu: {}, closeMenu: {}, openMenu: {} };
 
@@ -16,3 +17,18 @@ const stateValidator = ({ property }) =>
   property === "openMenu";
 
 export const MenuToggleContext = createContext(initialContext, stateValidator);
+
+export type MenuToggleContextType = {
+  toggleMenu: any;
+  setToggleMenu: () => void;
+  openMenu: any;
+  setOpenMenu: () => void;
+  closeMenu: any;
+  setCloseMenu: () => void;
+};
+
+export const useMenuToggleContext = () => {
+  return React.useContext<MenuToggleContextType>(
+    MenuToggleContext.ReactContext
+  );
+};

package/Contexts/ScreenContext/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScreenContext withScreenContext should return the context 1`] = `null`;

package/Contexts/ScreenContext/__tests__/index.test.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react-native";
+import { ScreenContext, ScreenContextProvider, withScreenContext } from "../";
+import React from "react";
+
+describe("ScreenContext", () => {
+  describe("ScreneContext context", () => {
+    it("should return the context", () => {
+      expect(ScreenContext).toBeDefined();
+    });
+  });
+
+  describe("ScreenContextProvider", () => {
+    it("should return the provider", () => {
+      expect(ScreenContextProvider).toBeDefined();
+    });
+  });
+
+  describe("withScreenContext", () => {
+    it("should return the context", () => {
+      const Component = () => null;
+      const WrappedComponent = withScreenContext(Component);
+      const { toJSON } = render(<WrappedComponent />);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/Contexts/ScreenContext/index.tsx

@@ -1,4 +1,10 @@
-import React, { createContext, ReactNode, useMemo, useState } from "react";
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
 import {
   useCurrentScreenData,
   useNavigation,
@@ -7,27 +13,67 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
+import { create, StoreApi, UseBoundStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+import { Animated } from "react-native";
+
+interface NavBarStoreState {
+  visible: boolean;
+  title: string;
+  summary: string;
+  setVisible: (state: boolean) => void;
+  setTitle: (title: string) => void;
+  setSummary: (subtitle: string) => void;
+  height: number;
+  scrollState: number;
+  isOnBottomNavBar: boolean;
+  scrollYAnimated: Animated.Value;
+}
+
+interface NavBarState {
+  visible: boolean;
+  title: string;
+  summary: string;
+  setVisible: (state: boolean) => void;
+  setTitle: (title: string) => void;
+  setSummary: (subtitle: string) => void;
+}
 
 type ScreenContextType = {
-  navBar: {
-    visible: boolean;
-    title: string;
-    summary: string;
-    setVisible: (state: boolean) => void;
-    setTitle: (title: string) => void;
-    setSummary: (subtitle: string) => void;
-  };
+  _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
+  navBar: NavBarState;
   legacyFormatScreenData: LegacyNavigationScreenData | null;
 };
 
+const createStore = () =>
+  create<NavBarStoreState>((set) => ({
+    title: "",
+    summary: "",
+    visible: true,
+    height: 0,
+    scrollState: 0,
+    isOnBottomNavBar: true,
+    scrollYAnimated: new Animated.Value(0),
+    setTitle(title) {
+      set({ title });
+    },
+    setSummary(summary) {
+      set({ summary });
+    },
+    setVisible(visible) {
+      set({ visible });
+    },
+  }));
+
 export const ScreenContext = createContext<ScreenContextType>({
+  _navBarStore: createStore(),
   navBar: {
     visible: true,
     title: "",
     summary: "",
-    setVisible: (_state) => {},
-    setTitle: (_title) => {},
-    setSummary: (_subtitle) => {},
+    setVisible: (_state) => void 0,
+    setTitle: (_title) => void 0,
+    setSummary: (_subtitle) => void 0,
   },
   legacyFormatScreenData: {} as LegacyNavigationScreenData,
 });
@@ -53,9 +99,30 @@ export function ScreenContextProvider({
   const isNested = useNestedNavigationContext();
   const currentScreenScreenData = useCurrentScreenData();
 
-  const [navBarTitle, setNavBarTitle] = useState("");
-  const [navBarSummary, setNavBarSummary] = useState("");
-  const [navBarVisible, setNavBarVisible] = useState(true);
+  const screenNavBarStateRef =
+    useRef<null | ReturnType<typeof createStore>>(null);
+
+  const getScreenNavBarState = useCallback(() => {
+    if (screenNavBarStateRef.current !== null) {
+      return screenNavBarStateRef.current;
+    }
+
+    const navBarState = createStore();
+    screenNavBarStateRef.current = navBarState;
+
+    return navBarState;
+  }, []);
+
+  const screenNavBarState = getScreenNavBarState()(
+    useShallow((state) => ({
+      visible: state.visible,
+      title: state.title,
+      summary: state.summary,
+      setTitle: state.setTitle,
+      setSummary: state.setSummary,
+      setVisible: state.setVisible,
+    }))
+  );
 
   const isHook = pathname.includes("hook");
 
@@ -73,26 +140,28 @@ export function ScreenContextProvider({
   const isVisible = isNavBarVisible(
     pathname,
     currentScreenScreenData, // what fallback should be if currentScreenData is not available?
-    navBarVisible,
+    screenNavBarState.visible,
     canGoBack(isHook, pathname),
     videoModalState
   );
 
-  const navBarState = useMemo(() => {
-    return {
-      title: navBarTitle,
-      summary: navBarSummary,
+  const navBarState = useMemo(
+    () => ({
+      title: screenNavBarState.title,
+      summary: screenNavBarState.summary,
       visible: isVisible,
-      setTitle: setNavBarTitle,
-      setSummary: setNavBarSummary,
-      setVisible: setNavBarVisible,
-    };
-  }, [isVisible, navBarTitle, navBarSummary]);
+      setTitle: screenNavBarState.setTitle,
+      setSummary: screenNavBarState.setSummary,
+      setVisible: screenNavBarState.setVisible,
+    }),
+    [isVisible, screenNavBarState.title, screenNavBarState.summary]
+  );
 
   return (
     <ScreenContext.Provider
       value={useMemo(
         () => ({
+          _navBarStore: getScreenNavBarState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
         }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.7623722215",
+  "version": "12.0.0-alpha.7921075302",
   "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.7623722215",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.7623722215",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.7623722215",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.7623722215",
+    "@applicaster/applicaster-types": "12.0.0-alpha.7921075302",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.7921075302",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.7921075302",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.7921075302",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",