@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5606245605 → 12.0.0-alpha.5722041245

package/Components/Cell/Cell.tsx

@@ -202,7 +202,7 @@ export class CellComponent extends React.Component<Props> {
       groupId,
       isFocusable = true,
       skipFocusManagerRegistration,
-      behavior
+      behavior,
     } = this.props;
 
     const { id } = item;
@@ -263,7 +263,7 @@ export class CellComponent extends React.Component<Props> {
                   item,
                   focused: this.isCellFocused(focused),
                   scrollTo: this.scrollToIndex(event),
-                  behavior
+                  behavior,
                 }}
               />
             );

package/Components/Cell/CellWithFocusable.tsx

@@ -35,18 +35,18 @@ const useCellFocusedState = (groupId: string, id: string) => {
 };
 
 type Props = {
-  item: ZappEntry,
-  CellRenderer: React.ComponentType<{ item: Object, state: string }>,
-  id: string,
-  groupId: string,
-  onFocus: Function,
-  index: number,
-  scrollTo: Function,
-  preferredFocus?: boolean,
-  skipFocusManagerRegistration?: boolean,
-  isFocusable?: boolean,
-  behavior: Behavior,
-  selected?: boolean,
+  item: ZappEntry;
+  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  id: string;
+  groupId: string;
+  onFocus: Function;
+  index: number;
+  scrollTo: Function;
+  preferredFocus?: boolean;
+  skipFocusManagerRegistration?: boolean;
+  isFocusable?: boolean;
+  behavior: Behavior;
+  selected?: boolean;
 };
 
 export function CellWithFocusable(props: Props) {
@@ -62,11 +62,18 @@ export function CellWithFocusable(props: Props) {
     skipFocusManagerRegistration,
     isFocusable,
     behavior,
-    selected
+    selected,
   } = props;
 
   const isFocused = useCellFocusedState(groupId, id);
-  const state = useCellState({ id: item.id, behavior, focused: isFocused, selected });
+
+  const state = useCellState({
+    id: item.id,
+    behavior,
+    focused: isFocused,
+    selected,
+  });
+
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
 
   // for horizontal scrolling

package/Components/Cell/TvOSCellComponent.tsx

@@ -249,7 +249,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       hasReceivedFocus,
       groupId,
       isFocusable,
-      behavior
+      behavior,
     } = this.props;
 
     const { id } = item;
@@ -310,7 +310,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
                   item,
                   focused: this.props.focused || selectedCell || focused,
                   scrollTo: this.scrollTo,
-                  behavior
+                  behavior,
                 }}
               />
             );

package/Components/FocusableCell/index.tsx

@@ -3,12 +3,12 @@ import { Platform } from "react-native";
 import { useCellState } from "../MasterCell/utils";
 
 type Props = {
-  index: number,
-  item: ZappEntry,
-  focused: boolean,
-  scrollTo?: (index: number) => void,
-  CellRenderer: React.ComponentType<{ item: Object, state: string }>,
-  behavior: Behavior
+  index: number;
+  item: ZappEntry;
+  focused: boolean;
+  scrollTo?: (index: number) => void;
+  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  behavior: Behavior;
 };
 
 const isAndroid = Platform.OS === "android";
@@ -20,7 +20,7 @@ export function FocusableCell(props: Props) {
     CellRenderer,
     focused,
     scrollTo = null,
-    behavior
+    behavior,
   } = props;
 
   const state = useCellState({ id: item.id, behavior, focused });

package/Components/HookRenderer/index.tsx

@@ -1,3 +1 @@
-import { HookRenderer as HookRendererComponent } from "./HookRenderer";
-
-export const HookRenderer = HookRendererComponent;
+export { HookRenderer } from "./HookRenderer";

package/Components/Image/utils/index.ts

@@ -1,19 +1,29 @@
+import FastImage, { Source } from "@applicaster/react-native-fast-image";
 import { useMemo } from "react";
+import { ImageRequireSource } from "react-native";
 
-export const useImageSource = (source) => {
+function getSourceCache(cache: Source["cache"]) {
+  return cache || FastImage.cacheControl.web;
+}
+
+export const useImageSource = (source?: Source | ImageRequireSource) => {
   return useMemo(() => {
-    if (typeof source === "number") {
-      return source;
+    if (source) {
+      if (typeof source === "number") {
+        return source;
+      }
+
+      return {
+        uri: source.uri,
+        headers: source.headers,
+        priority: source.priority,
+        cache: getSourceCache(source?.cache),
+        maxWidth: source.maxWidth,
+        maxHeight: source.maxHeight,
+      };
     }
 
-    return {
-      uri: source.uri,
-      headers: source.headers,
-      priority: source.priority,
-      cache: source.cache,
-      maxWidth: source.maxWidth,
-      maxHeight: source.maxHeight,
-    };
+    return undefined;
   }, [
     ...(typeof source === "object"
       ? [

package/Components/Layout/TV/__tests__/index.test.tsx

@@ -12,19 +12,7 @@ jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
   useRiverInitialState: () => ({}),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useCurrentScreenData: jest.fn(() => ({
-    navigations: [
-      {
-        category: "menu",
-        navigation_type: "menu",
-        styles: {
-          hide_secondary_level_menu: false,
-        },
-      },
-    ],
-  })),
-}));
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen");
 
 const Layout = require("..").default;
 

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -23,7 +23,11 @@ export const Toggle = (props: Props) => {
     iosBackgroundColor,
   } = style;
 
-  const isSelected = React.useMemo(() => (cellState === "selected"), [item?.id, cellState]);
+  const isSelected = React.useMemo(
+    () => cellState === "selected",
+    [item?.id, cellState]
+  );
+
   const actionContext = useActions(action?.identifier);
 
   const [actionState, setActionState] = useState(

package/Components/MasterCell/utils/index.ts

@@ -125,13 +125,24 @@ export const useFilterChildren = <
 
   const filteredChildren = children.filter((child) => {
     const item = child.props.item;
-    const action = actions.actions[child.props.pluginIdentifier];
+    const actionIdentifier = child.props.pluginIdentifier;
+    const action = actions.actions[actionIdentifier];
+
     // context value of specific plugin
-    const currentValue = action.module.context._currentValue;
+    if (action?.module && action.module.context) {
+      const currentValue = action.module.context._currentValue;
+
+      return currentValue?.isActionAvailable
+        ? currentValue.isActionAvailable(item)
+        : true;
+    }
+
+    masterCellLogger.error({
+      message: `Action plugin for ${actionIdentifier} could not be found, check the configuration of your action button`,
+      data: { item, action: child.props.pluginIdentifier },
+    });
 
-    return currentValue?.isActionAvailable
-      ? currentValue.isActionAvailable(item)
-      : true;
+    return false;
   });
 
   return filteredChildren;
@@ -285,8 +296,8 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
       }
     }
   }, [behavior]);
-  
-   useEffect(() => {
+
+  useEffect(() => {
     if (!behavior) {
       return;
     }

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -145,34 +145,30 @@ const renderApplePlayer = ({
 }) => {
   const { title, summary } = item || {};
 
-  if (!isApplePlatform()) {
+  if (!isAppleTV() || !player) {
+    return null;
+  }
+
+  if (isAudioContent) {
+    return (
+      <AudioPlayer
+        audio_item={item}
+        plugin_configuration={pluginConfiguration}
+      />
+    );
+  }
+
+  if (!playNextData && player.isPaused() && player.isAd() === false) {
     return null;
   }
 
   return (
-    <>
-      {!playNextData && (
-        <>
-          {!isAudioContent &&
-            !!player?.isPaused() &&
-            !!player?.isAd() === false && (
-              <ProgramInfo
-                title={title}
-                subtitle={summary}
-                plugin_configuration={pluginConfiguration}
-                videoStyle={videoStyle}
-              />
-            )}
-        </>
-      )}
-
-      {isAudioContent && (
-        <AudioPlayer
-          audio_item={item}
-          plugin_configuration={pluginConfiguration}
-        />
-      )}
-    </>
+    <ProgramInfo
+      title={title}
+      subtitle={summary}
+      plugin_configuration={pluginConfiguration}
+      videoStyle={videoStyle}
+    />
   );
 };
 
@@ -339,6 +335,18 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, [item?.id, item?.extensions?.resumeTime, player]);
 
+  const onVideoFullscreenPlayerWillPresent = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: true,
+    });
+  }, []);
+
+  const onVideoFullscreenPlayerWillDismiss = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: false,
+    });
+  }, []);
+
   // Util methods
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
@@ -381,17 +389,27 @@ const PlayerContainerComponent = (props: Props) => {
       id: playerContainerId,
       listener: {
         onVideoEnd,
-        onError: onError,
-        onLoad: onLoad,
+        onError,
+        onLoad,
         onPlayerClose: close,
         onPlayerDetached: close,
+        onVideoFullscreenPlayerWillDismiss,
+        onVideoFullscreenPlayerWillPresent,
       },
     });
 
     return () => {
       player.removeListener(playerContainerId);
     };
-  }, [player, onVideoEnd]);
+  }, [
+    player,
+    onVideoEnd,
+    onError,
+    onLoad,
+    close,
+    onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerWillPresent,
+  ]);
 
   useEffect(() => {
     // TODO: We should not use playerManager here to connect buttons to player container
@@ -621,7 +639,7 @@ const PlayerContainerComponent = (props: Props) => {
                         }}
                         focused={isInlineTV ? true : undefined}
                         autoplay={true}
-                        controls={isAppleTV() && !isInlineTV}
+                        controls={false}
                         disableCastAction={disableCastAction}
                         docked={navigator.isVideoModalDocked()}
                         entry={item}

package/Components/River/__tests__/componentsMap.test.js

@@ -83,6 +83,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   useNavigation: jest.fn(() => ({ currentRoute: "/river/A1234" })),
   useRoute: jest.fn(() => ({ pathname: "/river/A1234", screenData })),
   useProfilerLogging: jest.fn(),
+  useIsScreenActive: jest.fn().mockReturnValue(true),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { create, act } from "react-test-renderer";
+import { act, create } from "react-test-renderer";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
@@ -69,12 +69,16 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
+    screenData: { id: "testId" },
   })),
   useNavigation: jest.fn(() => ({
     canGoBack: () => false,
     currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
     data: { screen: { id: "testId" } },
   })),
+  useIsScreenActive: jest.fn().mockReturnValue(true),
 }));
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({

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

@@ -19,7 +19,11 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   <View>
     <View
       pathname="/river/testId"
-      screenData={Object {}}
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>
@@ -45,7 +49,11 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   <View>
     <View
       pathname="/river/testId"
-      screenData={Object {}}
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>

package/Components/Screen/index.tsx

@@ -23,6 +23,17 @@ import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { useScreenOrientationHandler } from "./orientationHandler";
 
+const getScreenId = (
+  screenData: LegacyNavigationScreenData,
+  fallbackRiver: ZappRiver
+) => {
+  return screenData?.targetScreen
+    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    : "screen_id" in screenData
+    ? screenData.screen_id
+    : fallbackRiver.id;
+};
+
 function colorIsNotTransparent(color) {
   const layers = R.compose(
     R.map(R.trim),
@@ -41,17 +52,11 @@ function isValidColor(string) {
 }
 
 type Props = {
-  pathname: string;
-  screenData: Record<string, any>;
   setToggleMenu: () => void;
   setCloseMenu: () => void;
 };
 
-export function Screen({
-  setToggleMenu,
-  setCloseMenu,
-  screenData: _screenData,
-}: Props) {
+export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
@@ -68,10 +73,7 @@ export function Screen({
   const routeData = useRoute();
 
   const currentRiver = useScreenData(
-    (routeData.screenData as ZappRiver)?.targetScreen
-      ? (routeData.screenData as ZappRiver)?.targetScreen?.id ??
-          navigation.activeRiver.id
-      : (routeData.screenData as ZappRiver)?.screen_id
+    getScreenId(routeData.screenData, navigation.activeRiver)
   );
 
   const { title } = useNavbarState();
@@ -135,9 +137,9 @@ export function Screen({
           {...{ ...(navBarProps as MobileNavBarPluginProps), id: pathname }}
         />
 
-        <OfflineFallbackScreen screenData={screenData}>
+        <OfflineFallbackScreen screenData={targetScreenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
-          <RouteManager pathname={pathname} screenData={_screenData} />
+          <RouteManager pathname={pathname} screenData={screenData} />
         </OfflineFallbackScreen>
       </View>
     </ScreenContextProvider>

package/Components/Tabs/TV/styles.ts

@@ -78,7 +78,7 @@ export const getStyles = (config): Partial<TVTabsStyles> => {
         },
         tvos: {
           marginTop: -1,
-        }
+        },
       }),
     },
     tabsBackground: {

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

@@ -4,6 +4,7 @@ import { render } from "@testing-library/react-native";
 import * as PlayerFactory from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerFactory";
 import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
 import { ThemeContext } from "@applicaster/zapp-react-native-utils/theme";
+import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { PlayerLiveImage } from "../PlayerLiveImageComponent";
 
@@ -18,6 +19,8 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 const Wrapper = ({ children }: { children: React.ReactChildren }) => (
   <ThemeContext.Provider
     value={{ themes: { myTheme: {} }, selectedThemeId: "myTheme" }}
@@ -46,6 +49,8 @@ describe("PlayerLiveImageComponent", () => {
       controller: new Player({}),
       Component: () => null,
     }));
+
+    jest.spyOn(navigationHooks, "useIsScreenActive").mockReturnValue(true);
   });
 
   it("should render correctly with default props", () => {

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

@@ -1,249 +1,297 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PlayerWrapper renders inline 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "column",
         },
         Object {
-          "aspectRatio": 1.7777777777777777,
-          "height": undefined,
-          "width": "100%",
+          "backgroundColor": "transparent",
+        },
+        Object {
+          "height": 800,
+          "width": 300,
         },
-        Object {},
         Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    configuration={
-      Object {
-        "tablet_landscape_player_container_background_color": "red",
-        "tablet_landscape_sidebar_width": "35%",
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-    entry={
-      Object {
-        "id": "test",
+      testID="test-player-container"
+    />
+    <View
+      configuration={
+        Object {
+          "tablet_landscape_player_container_background_color": "red",
+          "tablet_landscape_sidebar_width": "35%",
+        }
       }
-    }
-    isTabletLandscape={false}
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+      entry={
+        Object {
+          "id": "test",
+        }
       }
-    }
-  />
-</RNCSafeAreaView>
+      isTabletLandscape={false}
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;
 
 exports[`PlayerWrapper renders inline and docked 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "additive",
-      "left": "off",
-      "right": "off",
-      "top": "off",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 50,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "additive",
+        "left": "off",
+        "right": "off",
+        "top": "off",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "column",
+        },
+        Object {
+          "backgroundColor": "transparent",
         },
         Object {
-          "aspectRatio": undefined,
           "height": 50,
-          "width": "100%",
+          "width": 300,
         },
         Object {},
-        Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": undefined,
+            "height": 50,
+            "width": "100%",
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-  />
-</RNCSafeAreaView>
+      testID="test-player-container"
+    />
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;
 
 exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "row",
-      },
-      Object {
-        "backgroundColor": "red",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "row",
         },
         Object {
-          "aspectRatio": 1.7777777777777777,
-          "height": undefined,
-          "width": 195,
+          "backgroundColor": "red",
+        },
+        Object {
+          "height": 800,
+          "width": 300,
         },
-        Object {},
         Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    configuration={
-      Object {
-        "tablet_landscape_player_container_background_color": "red",
-        "tablet_landscape_sidebar_width": "35%",
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": 195,
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-    entry={
-      Object {
-        "id": "test",
+      testID="test-player-container"
+    />
+    <View
+      configuration={
+        Object {
+          "tablet_landscape_player_container_background_color": "red",
+          "tablet_landscape_sidebar_width": "35%",
+        }
       }
-    }
-    isTabletLandscape={true}
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+      entry={
+        Object {
+          "id": "test",
+        }
       }
-    }
-  />
-</RNCSafeAreaView>
+      isTabletLandscape={true}
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;
 
 exports[`PlayerWrapper renders properly 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "column",
         },
         Object {
-          "aspectRatio": 1.7786666666666666,
-          "height": undefined,
-          "width": "100%",
+          "backgroundColor": "transparent",
+        },
+        Object {
+          "height": 800,
+          "width": 300,
         },
-        Object {},
         Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": 1.7786666666666666,
+            "height": undefined,
+            "width": "100%",
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-  />
-</RNCSafeAreaView>
+      testID="test-player-container"
+    />
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;

package/Decorators/ComponentsMapWrapper/withComponentsMapProvider.tsx

@@ -12,11 +12,16 @@ export function withComponentsMapProvider(Component: React.ComponentType<any>) {
     };
 
     const setComponentHeightById = (id: string | number, height: number) => {
-      componentsHeightMapRef.current = { ...componentsHeightMapRef.current, [id]: height };
+      componentsHeightMapRef.current = {
+        ...componentsHeightMapRef.current,
+        [id]: height,
+      };
     };
 
     return (
-      <ComponentsMapProvider {...{ setComponentHeightById, getComponentHeightById }}>
+      <ComponentsMapProvider
+        {...{ setComponentHeightById, getComponentHeightById }}
+      >
         <Component {...props} />
       </ComponentsMapProvider>
     );

package/package.json

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