@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4440903139 → 12.0.0-alpha.4484269996

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { isEqual } from "@applicaster/zapp-react-native-utils/equalUtils";
 import { useFocusable } from "../Focusable/index.android";
+import { useCellState } from "./hooks/useCellState.android";
 
 /**
  * returns parent focus from prop or from context
@@ -29,14 +30,15 @@ const useParentFocus = (
   );
 
 function FocusableChildComponent(props) {
-  const { setIsFocusable, focused, ...focusableContext } = useFocusable();
-
+  const { setIsFocusable, ...focusableContext } = useFocusable();
   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/FocusableView/index.tsx

@@ -5,7 +5,6 @@ import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/acti
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 const { Logger } = getXray();
 
@@ -45,11 +44,6 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const actionContext = useActions(pluginIdentifier);
 
-  const accessibilityManager = useAccessibilityManager({});
-
-  const { ttsLabel = "" } =
-    actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
-
   const onPress = (event) => {
     event?.preventDefault?.();
 
@@ -94,12 +88,6 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
         mouse: focusable.mouse,
       });
     });
-
-    if (ttsLabel) {
-      accessibilityManager.readText({
-        text: ttsLabel,
-      });
-    }
   };
 
   const handleBlur = (_focusable, _direction) => {

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

@@ -38,22 +38,21 @@ function Image({
 
   const shouldRenderImg = source && !error;
 
-  // Default placeholder image fallback is empty string because it won't rerender
-  // in case of undefined or {uri: undefined} source
-  // https://github.com/facebook/react-native/issues/9195
   const defaultPlaceHolderImage = React.useMemo(
     () => ({ uri: placeholderImage || "" }),
     [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/Image/Image.web.tsx

@@ -31,10 +31,10 @@ function Image({
 
   return (
     <RnImage
-      defaultSource={placeholderImage || null}
+      defaultSource={placeholderImage || ""}
       style={style}
       source={updatedSource}
-      {...R.omit(["source", "placeholderImage"], otherProps)}
+      {...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

@@ -362,15 +362,13 @@ const PlayerContainerComponent = (props: Props) => {
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
 
-    setTimeout(() => {
-      if (fullscreen) {
-        navigator.fullscreenVideoModal();
-        playerEvent("onFullscreenPlayerWillPresent");
-      } else {
-        navigator.maximiseVideoModal();
-        playerEvent("onFullscreenPlayerWillDismiss");
-      }
-    });
+    if (fullscreen) {
+      playerEvent("onFullscreenPlayerWillPresent");
+      navigator.fullscreenVideoModal();
+    } else {
+      playerEvent("onFullscreenPlayerWillDismiss");
+      navigator.maximiseVideoModal();
+    }
   };
 
   const onCellTap = (entry) => {
@@ -465,10 +463,6 @@ const PlayerContainerComponent = (props: Props) => {
 
     if (mode === VideoModalMode.FULLSCREEN) {
       toggleFullscreen({ fullscreen: false });
-
-      if (!isModal) {
-        playerManager.closeNativePlayer();
-      }
     }
 
     return !!(
@@ -525,7 +519,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     return () => {
-      playerEvent("player_did_close", { item });
+      playerEvent("player_did_close");
 
       if (!isModal) {
         showNavBar(true);

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { update, compose, tail, append, take, identity, isNil } from "ramda";
+import { update, compose, tail, append, take, identity } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -50,10 +50,6 @@ function scenesForBackTransition(props: SceneProps, { scenes }) {
     : [prepareScene(props.children), scenes[0]];
 }
 
-const isModalClosed = (navigator) => {
-  return !!isNil(navigator?.modalData);
-};
-
 type Props = {
   transitionConfig: any;
   children: React.ReactNode;
@@ -317,10 +313,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
-        isActive={
-          scenes[from.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={scenes[from.index].key === this.props.navigator.currentRoute}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -336,10 +329,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
-        isActive={
-          scenes[to.index].key === this.props.navigator.currentRoute &&
-          isModalClosed(this.props.navigator)
-        }
+        isActive={scenes[to.index].key === this.props.navigator.currentRoute}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}

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

@@ -31,11 +31,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

@@ -223,8 +223,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       (videoModalState.mode === "MAXIMIZED" &&
         videoModalState.previousMode === "MINIMIZED" &&
         previousItemId === videoModalState.item?.id) ||
-      (previousItemId !== videoModalState.item?.id &&
-        videoModalState.mode !== "FULLSCREEN")
+      previousItemId !== videoModalState.item?.id
     ) {
       setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
       setTimeout(() => resetPlayerAnimationState());

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -60,10 +60,7 @@ export const AnimationView = ({
   const {
     width: screenWidth,
     deviceInfo: { isTablet, isTabletLandscape },
-  } = useDimensions("window", {
-    deviceInfo: true,
-    updateForInactiveScreens: true,
-  });
+  } = useDimensions("window", { deviceInfo: true });
 
   const { videoModalState } = useNavigation();
   const insets = useSafeAreaInsets();
@@ -304,18 +301,13 @@ export const AnimationView = ({
           typeof additionalData.height === "number" && additionalData.height;
       }
 
-      if (
-        videoModalState.mode === "MAXIMIZED" &&
-        defaultValue.x !== screenWidth &&
-        width &&
-        height
-      ) {
+      if (defaultValue.x === 0 && width && height) {
         const value = { x: width, y: height };
         setDefaultValue(value);
         animatedValue.setValue(value);
       }
     }
-  }, [screenWidth]);
+  }, [additionalData, screenWidth]);
 
   React.useEffect(() => {
     if (

package/Components/VideoModal/PlayerDetails.tsx

@@ -1,17 +1,9 @@
 import React, { useEffect, useRef } from "react";
-import {
-  StyleProp,
-  ViewStyle,
-  Animated,
-  Easing,
-  Dimensions,
-} from "react-native";
+import { StyleProp, ViewStyle, Animated, Easing } from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-const { width: SCREEN_WIDTH } = Dimensions.get("screen");
-
 type Configuration = {
   [key: string]: any;
   modal_background_color?: string;
@@ -23,7 +15,6 @@ type Props = {
   configuration: Configuration;
   isTabletLandscape: boolean;
   isAudioPlayer?: boolean;
-  isTablet: boolean;
 };
 
 const containerStyle = ({
@@ -40,7 +31,6 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape,
   isAudioPlayer,
-  isTablet,
 }: Props) => {
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
@@ -87,11 +77,7 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
-        {
-          // workaround for avoid wrong text-height after going back to portrait rotation
-          // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode
-          width: isTablet ? undefined : SCREEN_WIDTH,
-        },
+        // isAudioPlayer && audioMarginStyle,
       ]}
     >
       {screenData && (

package/Components/VideoModal/PlayerWrapper.tsx

@@ -7,6 +7,7 @@ import {
   ViewStyle,
 } from "react-native";
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
+
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PlayerDetails } from "./PlayerDetails";
@@ -22,8 +23,6 @@ import {
   ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
-
 type DimensionsT = {
   width: number | string;
   height: number | string | undefined;
@@ -70,8 +69,10 @@ const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
 };
 
 const getScreenAspectRatio = () => {
-  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
-  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const { width, height } = Dimensions.get("screen");
+
+  const longEdge = Math.max(width, height);
+  const shortEdge = Math.min(width, height);
 
   return longEdge / shortEdge;
 };
@@ -124,37 +125,10 @@ const getTabletWidth = (
   return Number(width) - sidebarWidth;
 };
 
-const getStyles = (baseStyle, isMobile, isPortrait) => {
-  if (isMobile && isPortrait) {
-    return { width: SCREEN_WIDTH, height: SCREEN_HEIGHT };
-  }
-
-  if (isMobile && !isPortrait) {
-    return { width: SCREEN_HEIGHT, height: SCREEN_WIDTH };
-  }
-
-  return baseStyle;
-};
-
-const showDetails = (isMobile: boolean, docked: boolean): boolean => {
-  // for mobile we always show details. Mounting of it very heavy operation.
-  if (isMobile) {
-    return true;
-  }
-
-  // workaround for tablets we need to mount/unmount in order to avoid PlayerDetails content dissappearing
-  // FIXME - find out the reason of dissapearing of content
-  if (docked) {
-    return false;
-  }
-
-  return true;
-};
-
-const PlayerWrapperComponent = (props: Props) => {
+export const PlayerWrapper = (props: Props) => {
   const {
     entry,
-    style: baseStyle,
+    style,
     containerStyle,
     inline,
     docked,
@@ -169,8 +143,6 @@ const PlayerWrapperComponent = (props: Props) => {
 
   const isInlineModal = inline && isModal;
 
-  const style = getStyles(baseStyle, !isTablet, isInlineModal);
-
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
   const tabletWidth = getTabletWidth(configuration, style);
@@ -252,9 +224,8 @@ const PlayerWrapperComponent = (props: Props) => {
                     </AnimatedVideoPlayerComponent>
                   </AnimationComponent>
                 </View>
-
                 <AnimatedScrollModal>
-                  {showDetails(!isTablet, docked) && (
+                  {isInlineModal && !docked ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.componentFade}
                       style={defaultStyles.flex}
@@ -264,9 +235,10 @@ const PlayerWrapperComponent = (props: Props) => {
                         style={defaultStyles.playerDetails}
                         entry={entry}
                         isTabletLandscape={isTabletLandscape}
-                        isTablet={isTablet}
                       />
                     </AnimationComponent>
+                  ) : (
+                    <View style={defaultStyles.playerDetails} />
                   )}
                 </AnimatedScrollModal>
               </ScreenContextProvider>
@@ -277,5 +249,3 @@ const PlayerWrapperComponent = (props: Props) => {
     </PathnameContext.Provider>
   );
 };
-
-export const PlayerWrapper = PlayerWrapperComponent;

package/Components/VideoModal/VideoModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as R from "ramda";
-import { StyleSheet, View, StatusBar } from "react-native";
+import { StyleSheet, View } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
@@ -129,38 +129,32 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <>
-      {/* TODO: Workaround to avoid unnecessary UI effect when switching from portrait to fullscreen */}
-      <StatusBar hidden={false} />
-      {/* TODO: Workaround to avoid unnecessary UI effect when switching from portrait to fullscreen */}
-
-      <PathnameContext.Provider value={pathname}>
-        <ScreenContextProvider pathname={pathname}>
-          {itemIdHooksFinished === item?.id ? (
-            <AnimatedPlayerModalWrapper
-              style={[
-                styles.container,
-                {
-                  backgroundColor,
-                },
-              ]}
-            >
-              <HandlePlayable
-                item={item}
-                isModal={mode !== "PIP"}
-                modalHeight={modalSize.height}
-                modalWidth={modalSize.width}
-                mode={mode}
-              />
-            </AnimatedPlayerModalWrapper>
-          ) : (
-            <View style={styles.loaderContainer}>
-              <Spinner />
-            </View>
-          )}
-        </ScreenContextProvider>
-      </PathnameContext.Provider>
-    </>
+    <PathnameContext.Provider value={pathname}>
+      <ScreenContextProvider pathname={pathname}>
+        {itemIdHooksFinished === item?.id ? (
+          <AnimatedPlayerModalWrapper
+            style={[
+              styles.container,
+              {
+                backgroundColor,
+              },
+            ]}
+          >
+            <HandlePlayable
+              item={item}
+              isModal={mode !== "PIP"}
+              modalHeight={modalSize.height}
+              modalWidth={modalSize.width}
+              mode={mode}
+            />
+          </AnimatedPlayerModalWrapper>
+        ) : (
+          <View style={styles.loaderContainer}>
+            <Spinner />
+          </View>
+        )}
+      </ScreenContextProvider>
+    </PathnameContext.Provider>
   );
 };
 

package/Components/VideoModal/__tests__/PlayerDetails.test.tsx

@@ -8,13 +8,6 @@ const props = {
   configuration: { modal_background_color: "transparent" },
 };
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
-  useDimensions: jest.fn(() => ({
-    width: 20,
-    height: 30,
-  })),
-}));
-
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: jest.fn(() => ({
     top: 20,

package/Components/VideoModal/__tests__/__snapshots__/PlayerDetails.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`PlayerDetails renders properly 1`] = `
       "flex": 1,
       "marginTop": -8,
       "paddingTop": -8,
-      "width": 750,
     }
   }
 >
@@ -30,7 +29,6 @@ exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] =
       "flex": 1,
       "marginTop": -20,
       "paddingTop": 40,
-      "width": 750,
     }
   }
 >

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -27,8 +27,8 @@ exports[`PlayerWrapper renders inline 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 1334,
-          "width": 750,
+          "height": 800,
+          "width": 300,
         },
         Object {},
       ]
@@ -91,7 +91,6 @@ exports[`PlayerWrapper renders inline 1`] = `
               "id": "test",
             }
           }
-          isTablet={false}
           isTabletLandscape={false}
           style={
             Object {
@@ -133,8 +132,8 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 1334,
-          "width": 750,
+          "height": undefined,
+          "width": 300,
         },
         Object {},
       ]
@@ -178,35 +177,13 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         testID="test-player-container"
       />
       <View
-        animationType="componentFade"
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
-      >
-        <View
-          configuration={
-            Object {
-              "tablet_landscape_player_container_background_color": "red",
-              "tablet_landscape_sidebar_width": "35%",
-            }
-          }
-          entry={
-            Object {
-              "id": "test",
-            }
-          }
-          isTablet={false}
-          isTabletLandscape={false}
-          style={
-            Object {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
+      />
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -319,7 +296,6 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
               "id": "test",
             }
           }
-          isTablet={true}
           isTabletLandscape={true}
           style={
             Object {
@@ -361,8 +337,8 @@ exports[`PlayerWrapper renders properly 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 750,
-          "width": 1334,
+          "height": 800,
+          "width": 300,
         },
         Object {},
       ]
@@ -406,35 +382,13 @@ exports[`PlayerWrapper renders properly 1`] = `
         testID="test-player-container"
       />
       <View
-        animationType="componentFade"
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
-      >
-        <View
-          configuration={
-            Object {
-              "tablet_landscape_player_container_background_color": "red",
-              "tablet_landscape_sidebar_width": "35%",
-            }
-          }
-          entry={
-            Object {
-              "id": "test",
-            }
-          }
-          isTablet={false}
-          isTabletLandscape={false}
-          style={
-            Object {
-              "flex": 1,
-              "paddingTop": 20,
-            }
-          }
-        />
-      </View>
+      />
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>

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/ConfirmDialogState/index.ts

@@ -2,7 +2,7 @@ import { createStore } from "zustand/vanilla";
 import { useStore } from "zustand";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-export interface ConfirmationDialogState {
+interface ConfirmationDialogState {
   isDialogVisible: boolean;
   messages: string;
   confirmAction: () => void;

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/const.ts

@@ -1,5 +1,3 @@
-import { ViewStyle } from "react-native";
-
 export const tvPluginsWithCellRenderer = [
   "group-qb",
   "gallery-qb",
@@ -7,7 +5,3 @@ export const tvPluginsWithCellRenderer = [
   "hero-qb",
   "list-qb",
 ];
-
-// Can't be used in StyleSheet.create, need to be inline/defined as a constant
-// https://github.com/necolas/react-native-web/issues/1427
-export const flatListOverflowStyle: ViewStyle = { overflow: "visible" };

package/index.js

@@ -1,6 +1,3 @@
 import * as QuickBrickComponents from "./Components";
-import { flatListOverflowStyle } from "./const";
-
-export { flatListOverflowStyle };
 
 export default QuickBrickComponents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.4440903139",
+  "version": "12.0.0-alpha.4484269996",
   "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.4440903139",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4440903139",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4440903139",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4440903139",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.4484269996",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.4484269996",
     "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();
-  });
-});