@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4081044014 → 12.0.0-alpha.4102526423

package/Components/Cell/Cell.tsx

@@ -276,20 +276,13 @@ export class CellComponent extends React.Component<Props, State> {
           skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused, event) => {
-            const isFocused = this.isCellFocused(focused);
-
-            if (isFocused) {
-              const accessibilityManager = AccessibilityManager.getInstance();
-              accessibilityManager.readText({ text: item.title });
-            }
-
             return (
               <FocusableCell
                 {...{
                   index,
                   CellRenderer,
                   item,
-                  focused: isFocused,
+                  focused: this.isCellFocused(focused),
                   scrollTo: this.scrollToIndex(event),
                   behavior,
                 }}

package/Components/Focusable/index.android.tsx

@@ -128,10 +128,7 @@ function FocusableComponent(props: Props, forwardedRef) {
 
   const _onBlur = React.useCallback(
     (ref, options = {}) => {
-      if (ref.props.id !== focusManager.focusedId) {
-        setFocused(false);
-      }
-
+      setFocused(false);
       onBlur?.(ref, options);
     },
     [onBlur]
@@ -151,14 +148,15 @@ function FocusableComponent(props: Props, forwardedRef) {
     [isRTL, nextFocusDown, nextFocusUp, nextFocusLeft, nextFocusRight]
   );
 
-  const contextState = React.useMemo(() => {
-    return {
+  const contextState = React.useMemo(
+    () => ({
       focused,
       ...parentFocus,
       ref: touchableRef,
       setIsFocusable,
-    };
-  }, [parentFocus, focused]);
+    }),
+    [parentFocus, focused]
+  );
 
   return (
     <Touchable
@@ -175,13 +173,9 @@ function FocusableComponent(props: Props, forwardedRef) {
       {...parentFocus}
     >
       <FocusableContext.Provider value={contextState}>
-        {React.useMemo(
-          () =>
-            typeof children === "function"
-              ? children(focused, parentFocus, touchableRef)
-              : children,
-          [children, focused, parentFocus]
-        )}
+        {typeof children === "function"
+          ? children(focused, parentFocus, touchableRef)
+          : children}
       </FocusableContext.Provider>
     </Touchable>
   );

package/Components/FocusableList/FocusableChild.ts

@@ -31,14 +31,14 @@ const useParentFocus = (
 
 function FocusableChildComponent(props) {
   const { setIsFocusable, ...focusableContext } = useFocusable();
-  const focused = useCellState(props.id);
-
   const parentFocus = useParentFocus(props, focusableContext);
 
   const onLoadFailed = React.useCallback(() => {
     setIsFocusable(false);
   }, []);
 
+  const focused = useCellState(props.id);
+
   return props.renderItem({
     ...props,
     focused,

package/Components/FocusableList/index.tsx

@@ -88,7 +88,6 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     data = [],
     // eslint-disable-next-line unused-imports/no-unused-vars
     onAllComponentsLoaded, // TODO: re-implement it
-    omitPropsPropagation = [],
   } = props;
 
   useCheckItemIdsForUnique({ componentId: props.id, items: data });
@@ -253,9 +252,9 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
     ]
   );
 
-  const getFlatListProps = React.useCallback(
-    R.omit(
-      [
+  const flatListProps = React.useMemo(
+    () =>
+      R.omit([
         "onListElementFocus",
         "onListElementPress",
         "onListElementPressOut",
@@ -268,17 +267,17 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
         "focusableItemProps",
         "renderItem",
         "extraChildrenData",
+        "extraData",
+        "keyExtractor",
         "onAllComponentsLoaded",
         "focused",
         "id",
         "initialFocusDirection",
         "withStateMemory",
         "useSequentialLoading",
-        ...omitPropsPropagation,
-      ],
-      R.__
-    ),
-    [omitPropsPropagation]
+        ...(props.omitPropsPropagation || []),
+      ])(props),
+    [props]
   );
 
   const onEndReached = React.useCallback(
@@ -290,7 +289,7 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
 
   const initialNumToRender = toFiniteNumberWithDefault(
     10,
-    props.initialNumToRender
+    flatListProps.initialNumToRender
   );
 
   return (
@@ -299,10 +298,12 @@ function FocusableListComponent<ItemT>(props: Props<ItemT>, ref) {
       <FlatList
         focusable={false}
         scrollEnabled={false}
+        extraData={props.extraData}
         ref={ref}
-        {...getFlatListProps(props)}
+        {...flatListProps}
         renderItem={renderItem}
         onEndReached={onEndReached}
+        keyExtractor={props.keyExtractor}
         initialNumToRender={initialNumToRender}
       />
     </ChildrenFocusDeactivatorView>

package/Components/FocusableScrollView/index.tsx

@@ -284,7 +284,7 @@ function FocusableScrollViewComponent(props: Props, ref) {
       };
 
       return (
-        <View key={id} onLayout={onItemLayout}>
+        <View onLayout={onItemLayout}>
           <Focusable
             {...nextFocus}
             onFocus={(element, direction) =>

package/Components/Image/Image.android.tsx

@@ -8,5 +8,5 @@ import { useImageSource } from "./utils";
 export const QBImage = (props: FastImageProps) => {
   const source = useImageSource(props.source);
 
-  return <FastImage useLastImageAsDefaultSource {...props} source={source} />;
+  return <FastImage {...props} source={source} />;
 };

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -66,24 +66,20 @@ export function ActionButton(props: Props) {
   );
 
   useEffect(() => {
-    if (!((actionDisabled || !actionContext) && actionState !== null)) {
-      setActionState(actionContext.initialEntryState(item));
-    }
-  }, [actionDisabled, item?.id, actionContext, action]);
+    if (actionDisabled || !actionContext) return;
+
+    setActionState(actionContext.initialEntryState(item));
+  }, [actionDisabled, item?.id, actionContext]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
-      updateState: (state) => {
-        setActionState(state);
-      },
+      updateState: setActionState,
     });
-  }, [actionState, actionContext?.state, item?.id]);
+  }, [actionState, actionContext?.state, setActionState, item?.id]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {
-      return actionContext?.addListener(String(item.id), (state) => {
-        setActionState(state);
-      });
+      return actionContext?.addListener(item.id as string, setActionState);
     }
   }, [item?.id]);
 

package/Components/MasterCell/DefaultComponents/CellBadge/index.tsx

@@ -3,7 +3,6 @@ import {
   ifElseFocusedSelected,
   ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { getPositionStyles } from "./utils";
 
@@ -32,11 +31,7 @@ export const CellBadge = ({
   return {
     type: View, // Cell badge view
     style: {
-      flex: platformSelect({
-        tvos: 0,
-        android_tv: 0,
-        default: 1,
-      }),
+      flex: 1,
       position: "absolute",
       ...getPositionStyles(position, {
         width: value("cell_badge_width"),

package/Components/MasterCell/utils/index.ts

@@ -53,9 +53,10 @@ function resolveColorForProp(entry, style, colorProp) {
   const colorFromProp = style[colorProp];
   const nestedEntryValue = R.path(colorFromProp.split("."), entry);
 
-  const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
-
-  if (nestedEntryValue === undefined && !validateColor(color)) {
+  if (
+    nestedEntryValue === undefined &&
+    !validateColor(colorFromProp.replace(".00", "")) // https://github.com/dreamyguy/validate-color/issues/44
+  ) {
     logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -362,15 +362,21 @@ const PlayerContainerComponent = (props: Props) => {
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
 
-    setTimeout(() => {
-      if (fullscreen) {
-        navigator.fullscreenVideoModal();
+    if (fullscreen) {
+      // in order to avoid UI glitches with player we have to start re-render ealier and then start real rotation
+      navigator.fullscreenVideoModal();
+
+      setTimeout(() => {
         playerEvent("onFullscreenPlayerWillPresent");
-      } else {
-        navigator.maximiseVideoModal();
+      });
+    } else {
+      // in order to avoid UI glitches with player we have to start re-render ealier and then start real rotation
+      navigator.maximiseVideoModal();
+
+      setTimeout(() => {
         playerEvent("onFullscreenPlayerWillDismiss");
-      }
-    });
+      });
+    }
   };
 
   const onCellTap = (entry) => {
@@ -465,10 +471,6 @@ const PlayerContainerComponent = (props: Props) => {
 
     if (mode === VideoModalMode.FULLSCREEN) {
       toggleFullscreen({ fullscreen: false });
-
-      if (!isModal) {
-        playerManager.closeNativePlayer();
-      }
     }
 
     return !!(

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -45,9 +45,15 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
   }
 
   React.useEffect(() => {
-    (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-      playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
-      setStartComponentsAnimation(true);
+    const translateYListener = translateY.addListener(() => {
+      (playerAnimationState === PlayerAnimationStateEnum.minimize ||
+        playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
+        setStartComponentsAnimation(true);
+    });
+
+    return () => {
+      translateYListener && translateY.removeListener(translateYListener);
+    };
   }, [playerAnimationState]);
 
   return (

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -61,32 +61,29 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     setStartComponentsAnimation,
   } = useModalAnimationContext();
 
-  const [enableGesture, setIEnableGesture] = React.useState<boolean>(true);
   const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
 
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
-  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
-  const isMaximazedModal = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal = videoModalMode === "MINIMIZED";
-  const previousItemId = usePrevious(videoModalItem?.id);
+  const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
+  const isMinimizedModal = videoModalState.mode === "MINIMIZED";
+  const previousItemId = usePrevious(videoModalState.item?.id);
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
     playerAnimationState !== PlayerAnimationStateEnum.maximaze;
 
   const isEnablePanGesture =
-    enableGesture &&
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
     (isMaximazedModal || isMinimizedModal);
 
   const isAudioItem = React.useMemo(
     () =>
-      videoModalItem?.content?.type?.includes?.("audio") ||
-      videoModalItem?.type?.value === "audio",
-    [videoModalItem]
+      videoModalState.item?.content?.type?.includes?.("audio") ||
+      videoModalState.item?.type?.value === "audio",
+    [videoModalState.item]
   );
 
   // Refs for components
@@ -117,7 +114,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         const preparedTranslationY =
           Math.abs(translationY) - lastScrollYValue.current;
 
-        if (videoModalMode === "MAXIMIZED") {
+        if (videoModalState.mode === "MAXIMIZED") {
           const endOffsetY =
             lastSnap + preparedTranslationY + dragToss * velocityY + 150;
 
@@ -164,38 +161,22 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           resetPlayerAnimationState();
       }
     },
-    [lastSnap, modalSnapPoints, playerAnimationState, videoModalMode]
+    [lastSnap, modalSnapPoints, playerAnimationState, videoModalState.mode]
   );
 
   const onScroll = React.useCallback(({ nativeEvent }) => {
     scrollPosition.current = nativeEvent.contentOffset.y;
   }, []);
 
-  // Workaround for onMomentumScrollEnd issue
-  // https://github.com/facebook/react-native/issues/32696#issuecomment-1104217223
-  const canMomentum = React.useRef(false);
-
-  const onMomentumScrollBegin = React.useCallback(() => {
-    canMomentum.current = true;
-  }, []);
-
   const onMomentumScrollEnd = React.useCallback(
     ({ nativeEvent }) => {
-      if (canMomentum.current && !isActiveGesture) {
-        if (nativeEvent.contentOffset.y === 0) {
-          resetScrollAnimatedValues(
-            lastScrollY,
-            lastScrollYValue,
-            dragScrollY,
-            dragVideoPlayerY
-          );
-
-          setIEnableGesture(true);
-        } else {
-          setIEnableGesture(false);
-        }
-
-        canMomentum.current = false;
+      if (nativeEvent.contentOffset.y === 0 && !isActiveGesture) {
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
       }
     },
     [isActiveGesture]
@@ -215,17 +196,10 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   }, []);
 
   React.useEffect(() => {
-    const { mode, previousMode, item } = videoModalState;
-
     if (
-      mode === "MAXIMIZED" &&
-      !enableGesture &&
-      scrollPosition.current === 0
+      videoModalState.mode === "MINIMIZED" &&
+      videoModalState.previousMode === "MAXIMIZED"
     ) {
-      setIEnableGesture(true);
-    }
-
-    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
       // set animation to the minimize values if moving from the player to another screen
       if (playerAnimationState === null) {
         setScrollModalAnimatedValue(
@@ -240,17 +214,22 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           dragScrollY,
           dragVideoPlayerY
         );
+      } else {
+        resetPlayerAnimationState();
       }
-    } else if (
-      playerAnimationState === null &&
-      ((previousItemId === item?.id &&
-        mode === "MAXIMIZED" &&
-        (previousMode === "MINIMIZED" || previousMode === "MAXIMIZED")) ||
-        (previousItemId !== item?.id && mode !== "FULLSCREEN"))
+    }
+
+    if (
+      (videoModalState.mode === "MAXIMIZED" &&
+        videoModalState.previousMode === "MINIMIZED" &&
+        previousItemId === videoModalState.item?.id) ||
+      (previousItemId !== videoModalState.item?.id &&
+        videoModalState.mode !== "FULLSCREEN")
     ) {
       setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+      setTimeout(() => resetPlayerAnimationState());
     }
-  }, [videoModalState]);
+  }, [videoModalState, previousItemId]);
 
   React.useEffect(() => {
     if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
@@ -275,22 +254,22 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         translateYOffset,
         getAnimatedConfig(modalSnapPoints[1])
       ).start(() => {
-        minimiseVideoModal();
-
-        setScrollModalAnimatedValue(
-          translateYOffset,
-          modalSnapPoints[1],
-          setLastSnap
-        );
+        setTimeout(() => {
+          minimiseVideoModal();
 
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
+          setScrollModalAnimatedValue(
+            translateYOffset,
+            modalSnapPoints[1],
+            setLastSnap
+          );
 
-        resetPlayerAnimationState();
+          resetScrollAnimatedValues(
+            lastScrollY,
+            lastScrollYValue,
+            dragScrollY,
+            dragVideoPlayerY
+          );
+        }, 150);
       });
     } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
       Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
@@ -307,9 +286,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         resetPlayerAnimationState();
       });
     }
-  }, [playerAnimationState]);
 
-  React.useEffect(() => {
     const lastScrollYListenerId = lastScrollY.addListener(({ value }) => {
       lastScrollYValue.current = value;
     });
@@ -335,7 +312,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       lastScrollY.removeListener(lastScrollYListenerId);
       dragScrollY.removeListener(dragListenerId);
     };
-  }, [playerAnimationState, isAudioItem, isMinimizedModal]);
+  }, [playerAnimationState, isAudioItem, modalSnapPoints, isMinimizedModal]);
 
   const Wrapper = React.useMemo(
     () => (Platform.OS === "android" ? GestureHandlerRootView : View),
@@ -373,7 +350,6 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                   bounces={false}
                   onScrollBeginDrag={onRegisterLastScroll}
                   onScroll={onScroll}
-                  onMomentumScrollBegin={onMomentumScrollBegin}
                   onMomentumScrollEnd={onMomentumScrollEnd}
                   scrollEventThrottle={1}
                   showsVerticalScrollIndicator={false}

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -37,22 +37,14 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
     setStartComponentsAnimation,
   } = useModalAnimationContext();
 
-  const {
-    videoModalState: { mode: videoModalMode },
-  } = useNavigation();
-
+  const { videoModalState } = useNavigation();
   const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
-  const isMaximazedModal = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal = videoModalMode === "MINIMIZED";
 
-  const isNotMinimizeMaximazeAnimation =
-    playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+  const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
+  const isMinimizedModal = videoModalState.mode === "MINIMIZED";
 
   const isEnablePanGesture =
-    !isLanguageOverlayVisible &&
-    isNotMinimizeMaximazeAnimation &&
-    (isMaximazedModal || isMinimizedModal);
+    !isLanguageOverlayVisible && (isMaximazedModal || isMinimizedModal);
 
   const onGestureEvent = Animated.event(
     [{ nativeEvent: { translationY: dragVideoPlayerY } }],
@@ -67,7 +59,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
         const preparedTranslationY = Math.abs(translationY);
         const dragToss = 0.05;
 
-        if (videoModalMode === "MAXIMIZED") {
+        if (videoModalState.mode === "MAXIMIZED") {
           if (translationY > 0) {
             const endOffsetY =
               lastSnap + preparedTranslationY + dragToss * velocityY + 200;
@@ -92,7 +84,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
               setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
             }
           }
-        } else if (videoModalMode === "MINIMIZED") {
+        } else if (videoModalState.mode === "MINIMIZED") {
           if (translationY < 0) {
             // from mini to full
             setLastSnap(modalSnapPoints[0]);
@@ -108,7 +100,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
         }
       }
     },
-    [lastSnap, modalSnapPoints, videoModalMode]
+    [lastSnap, modalSnapPoints, videoModalState.mode]
   );
 
   React.useEffect(() => {
@@ -153,6 +145,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   return (
     <PanGestureHandler
       enabled={isEnablePanGesture}
+      shouldCancelWhenOutside={isMaximazedModal}
       onGestureEvent={onGestureEvent}
       onHandlerStateChange={onHandlerStateChange}
     >

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -62,12 +62,9 @@ export const AnimationView = ({
     deviceInfo: { isTablet, isTabletLandscape },
   } = useDimensions("window", {
     deviceInfo: true,
-    updateForInactiveScreens: true,
   });
 
   const { videoModalState } = useNavigation();
-  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
-
   const insets = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight() + (insets.bottom || 0);
   const minimisedWidth = defaultAspectRatioWidth(minimisedHeight);
@@ -90,9 +87,9 @@ export const AnimationView = ({
 
   const isAudioItem = React.useMemo(
     () =>
-      videoModalItem?.content?.type?.includes?.("audio") ||
-      videoModalItem?.type?.value === "audio",
-    [videoModalItem]
+      videoModalState.item?.content?.type?.includes?.("audio") ||
+      videoModalState.item?.type?.value === "audio",
+    [videoModalState.item]
   );
 
   const inlineAudioPlayer = additionalData.inlineAudioPlayer;
@@ -231,8 +228,10 @@ export const AnimationView = ({
   );
 
   const getInitialValue = React.useCallback(() => {
-    const { mode: videoModalMode, previousMode } = videoModalState;
-    const mode = videoModalMode === "PIP" ? previousMode : videoModalMode;
+    const mode =
+      videoModalState.mode === "PIP"
+        ? videoModalState.previousMode
+        : videoModalState.mode;
 
     switch (mode) {
       case "MINIMIZED":
@@ -266,7 +265,7 @@ export const AnimationView = ({
       isTablet,
       isTabletLandscape,
       isRTL,
-      fromMiniPlayer: videoModalMode === "MINIMIZED",
+      fromMiniPlayer: videoModalState.mode === "MINIMIZED",
       inlineAudioPlayer,
     }),
     [
@@ -276,7 +275,7 @@ export const AnimationView = ({
       defaultValue,
       moveUpValue,
       moveComponentHorizontalValue,
-      videoModalMode,
+      videoModalState.mode,
     ]
   );
 
@@ -305,7 +304,7 @@ export const AnimationView = ({
       }
 
       if (
-        videoModalMode === "MAXIMIZED" &&
+        videoModalState.mode === "MAXIMIZED" &&
         defaultValue.x !== screenWidth &&
         width &&
         height
@@ -318,9 +317,10 @@ export const AnimationView = ({
   }, [screenWidth]);
 
   React.useEffect(() => {
-    const { mode, previousMode } = videoModalState;
-
-    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
+    if (
+      videoModalState.mode === "MINIMIZED" &&
+      videoModalState.previousMode === "MAXIMIZED"
+    ) {
       // set animation to the minimize values if moving from the player to another screen
       if (playerAnimationState === null) {
         const value = getAnimationValue(
@@ -337,7 +337,7 @@ export const AnimationView = ({
     if (
       playerAnimationState === PlayerAnimationStateEnum.minimize &&
       startComponentsAnimation &&
-      videoModalMode === "MAXIMIZED"
+      videoModalState.mode === "MAXIMIZED"
     ) {
       Animated.timing(
         animatedValue,
@@ -346,7 +346,12 @@ export const AnimationView = ({
     } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
       animatedValue.setValue(defaultValue);
     }
-  }, [playerAnimationState, startComponentsAnimation, defaultValue]);
+  }, [
+    playerAnimationState,
+    startComponentsAnimation,
+    videoModalState.mode,
+    defaultValue,
+  ]);
 
   React.useEffect(() => {
     const dragVideoPlayerYListenerId = dragVideoPlayerY.addListener(
@@ -408,9 +413,9 @@ export const AnimationView = ({
       ref={animationComponentRef}
       style={[
         ...preparedStyles,
-        (videoModalMode === "MAXIMIZED" ||
-          videoModalMode === "MINIMIZED" ||
-          (videoModalMode === "PIP" && isAppActive)) &&
+        (videoModalState.mode === "MAXIMIZED" ||
+          videoModalState.mode === "MINIMIZED" ||
+          (videoModalState.mode === "PIP" && isAppActive)) &&
           getAnimationStyle(animationType, animatedValue),
       ]}
     >

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -45,10 +45,7 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <SafeAreaView
-      style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-safeAreaView"
-    >
+    <SafeAreaView style={[style.view, isRTL ? style.rtlStyle : {}]}>
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}

package/Components/ZappFrameworkComponents/BarView/Buttons/BackButton.tsx

@@ -11,16 +11,12 @@ const renderEmptyView = () => {
   return <View style={emptyViewStyle} />;
 };
 
-type FloatingButtonProps = Testable & {
+type FloatingButtonProps = {
   onPress: () => void;
   screenStyles: any;
 };
 
-const BackButton = ({
-  onPress,
-  screenStyles,
-  testID = "backButton",
-}: FloatingButtonProps) => {
+const BackButton = ({ onPress, screenStyles }: FloatingButtonProps) => {
   const containerStyle: any = {};
 
   if (!onPress) {
@@ -29,7 +25,6 @@ const BackButton = ({
 
   return (
     <ActionButton
-      testID={`${testID}-actionButton`}
       onPress={onPress}
       buttonStyles={containerStyle}
       imageUrl={screenStyles.back_button_image}

package/Components/ZappFrameworkComponents/BarView/Buttons/CloseButton.tsx

@@ -11,16 +11,12 @@ const renderEmptyView = () => {
   return <View style={emptyViewStyle} />;
 };
 
-type CloseButtonProps = Testable & {
+type CloseButtonProps = {
   onPress: () => void;
   screenStyles?: any;
 };
 
-const CloseButton = ({
-  onPress,
-  screenStyles,
-  testID = "closeButton",
-}: CloseButtonProps) => {
+const CloseButton = ({ onPress, screenStyles }: CloseButtonProps) => {
   const containerStyle: any = {};
 
   if (!onPress) {
@@ -29,7 +25,6 @@ const CloseButton = ({
 
   return (
     <ActionButton
-      testID={`${testID}-actionButton`}
       onPress={onPress}
       buttonStyles={containerStyle}
       imageUrl={screenStyles.close_button_image}

package/Components/ZappFrameworkComponents/Buttons/ActionButton.tsx

@@ -28,7 +28,7 @@ styles: {
 }
 */
 
-type ActionButtonProps = Testable & {
+type ActionButtonProps = {
   onPress: () => void;
   buttonStyles: any;
   imageUrl: string;
@@ -46,16 +46,11 @@ const ActionButton = ({
   buttonStyles,
   imageUrl,
   imageStyle = closeButtonStyle,
-  testID,
 }: ActionButtonProps) => {
   return (
-    <View style={buttonStyles} testID={testID}>
-      <TouchableOpacity onPress={onPress} testID={`${testID}-touchable`}>
-        <Image
-          source={{ uri: imageUrl }}
-          style={imageStyle}
-          testID={`${testID}-image`}
-        />
+    <View style={buttonStyles}>
+      <TouchableOpacity onPress={onPress}>
+        <Image source={{ uri: imageUrl }} style={imageStyle} />
       </TouchableOpacity>
     </View>
   );

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,6 +1,5 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
-import { useCallback, useMemo } from "react";
 
 type Dimensions = {
   width: Option<number>;
@@ -32,19 +31,16 @@ export const useCachedDimensions = (id: string) => {
     dimensionsStore
   ) as DimensionsState;
 
-  const getCachedDimensions = useCallback(() => {
+  const getCachedDimensions = () => {
     return dimensions[id] || initialDimensions();
-  }, [dimensions?.[id], id]);
+  };
 
-  const handleSetCachedDimensions = useCallback((newDimensions) => {
+  const handleSetCachedDimensions = (newDimensions) => {
     setCachedDimensions(id, newDimensions);
-  }, []);
-
-  return useMemo(
-    () => ({
-      getCachedDimensions,
-      setCachedDimensions: handleSetCachedDimensions,
-    }),
-    [getCachedDimensions, handleSetCachedDimensions]
-  );
+  };
+
+  return {
+    getCachedDimensions,
+    setCachedDimensions: handleSetCachedDimensions,
+  };
 };

package/Contexts/ScreenContext/index.tsx

@@ -177,12 +177,7 @@ export function withScreenContext(Component: React.ComponentType<any>) {
   return function WithScreenContextWrapper(props) {
     return (
       <ScreenContext.Consumer>
-        {useCallback(
-          (value) => (
-            <Component {...props} screenContext={value} />
-          ),
-          [Component, props]
-        )}
+        {(value) => <Component {...props} screenContext={value} />}
       </ScreenContext.Consumer>
     );
   };

package/package.json

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

package/Components/Focusable/__tests__/index.android.test.tsx

@@ -1,72 +0,0 @@
-import React from "react";
-import { render, act } from "@testing-library/react-native";
-import { Touchable } from "../../Touchable";
-
-const mockUseIsRTL = jest.fn();
-
-jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
-  useIsRTL: mockUseIsRTL,
-}));
-
-const mockUseFocusManager = jest.fn();
-
-jest.mock("@applicaster/zapp-react-native-utils/focusManager", () => ({
-  useFocusManager: mockUseFocusManager,
-}));
-
-const mockUsePrevious = jest.fn();
-
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/utils", () => ({
-  usePrevious: mockUsePrevious,
-}));
-
-const { Focusable } = require("../index.android");
-
-describe("Focusable", () => {
-  const mockFocusManager = {
-    isFocused: jest.fn(),
-    onDisableFocusChange: jest.fn(),
-    registerFocusable: jest.fn(),
-    focusedId: "test-id",
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockUseIsRTL.mockReturnValue(false);
-    mockUseFocusManager.mockReturnValue(mockFocusManager);
-    mockUsePrevious.mockReturnValue(false);
-  });
-
-  it("updates disableFocus state when disableFocus prop changes", () => {
-    const { rerender } = render(
-      <Focusable id="test-id" disableFocus={false}>
-        <Touchable testID="touchable" />
-      </Focusable>
-    );
-
-    rerender(
-      <Focusable id="test-id" disableFocus={true}>
-        <Touchable testID="touchable" />
-      </Focusable>
-    );
-
-    expect(mockFocusManager.onDisableFocusChange).toHaveBeenCalledWith(
-      "test-id"
-    );
-  });
-
-  it("calls focusManager.registerFocusable on mount and unregisters on unmount", () => {
-    const unregister = jest.fn();
-    mockFocusManager.registerFocusable.mockReturnValue(unregister);
-
-    const { unmount } = render(
-      <Focusable id="test-id">
-        <Touchable testID="touchable" />
-      </Focusable>
-    );
-
-    expect(mockFocusManager.registerFocusable).toHaveBeenCalled();
-    act(() => unmount());
-    expect(unregister).toHaveBeenCalled();
-  });
-});

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -1,87 +0,0 @@
-import React from "react";
-import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
-import { fireEvent } from "@testing-library/react-native";
-
-const mockUseIsRTL = jest.fn(() => true);
-
-jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
-  useIsRTL: mockUseIsRTL,
-}));
-
-const BarView = require("../BarView").default;
-
-describe("BarView", () => {
-  const screenStyles = {
-    title_font_color: "#000",
-    title_font_android: "Roboto",
-    title_font_ios: "San Francisco",
-    title_font_size: "16",
-    background_color: "#fff",
-  };
-
-  const barState = {
-    backHandler: jest.fn(),
-    closeHandler: jest.fn(),
-    title: "Test Title",
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("renders without crashing", () => {
-    mockUseIsRTL.mockReturnValue(false);
-
-    const { getByText } = renderWithProviders(
-      <BarView screenStyles={screenStyles} barState={barState} />
-    );
-
-    expect(getByText("Test Title")).toBeTruthy();
-  });
-
-  it("applies RTL styles when isRTL is true", () => {
-    mockUseIsRTL.mockReturnValue(true);
-
-    const { getByTestId } = renderWithProviders(
-      <BarView screenStyles={screenStyles} barState={barState} />
-    );
-
-    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
-      transform: [{ scaleX: -1 }],
-    });
-  });
-
-  it("does not apply RTL styles when isRTL is false", () => {
-    mockUseIsRTL.mockReturnValue(false);
-
-    const { getByTestId } = renderWithProviders(
-      <BarView screenStyles={screenStyles} barState={barState} />
-    );
-
-    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
-      transform: [{ scaleX: -1 }],
-    });
-  });
-
-  it("calls closeHandler when CloseButton is pressed", () => {
-    mockUseIsRTL.mockReturnValue(false);
-
-    const { getByTestId } = renderWithProviders(
-      <BarView screenStyles={screenStyles} barState={barState} />
-    );
-
-    fireEvent.press(getByTestId("closeButton-actionButton-touchable"));
-    expect(barState.closeHandler).toHaveBeenCalled();
-  });
-
-  it("calls backHandler when BackButton is pressed", () => {
-    mockUseIsRTL.mockReturnValue(false);
-
-    const { getByTestId } = renderWithProviders(
-      <BarView screenStyles={screenStyles} barState={barState} />
-    );
-
-    fireEvent.press(getByTestId("backButton-actionButton-touchable"));
-    expect(barState.backHandler).toHaveBeenCalled();
-  });
-});