@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4337072244 → 12.0.0-alpha.4355141911

package/Components/Layout/TV/index.tsx

@@ -1,15 +1,10 @@
 import * as React from "react";
-import { isEmpty, pathOr } from "ramda";
+import { pathOr } from "ramda";
+
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
-import { PathnameContext } from "../../../Contexts/PathnameContext";
-import { FocusableGroup } from "../../FocusableGroup";
-import { Screen } from "../../Screen/TV/index.web";
-
-export const ScreenDataContext = React.createContext(null);
+import { StackNavigator } from "../../Navigator";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -20,38 +15,6 @@ type Props = {
   Components: Components;
 };
 
-const StackNavigator = ({ Components }: Props) => {
-  // @ts-ignore
-  const { mainStack, currentRoute } = useNavigation();
-
-  const renderScreen = ({ route, state }) => {
-    const pathAttributes = getPathAttributes({ pathname: route });
-
-    if (isEmpty(pathAttributes)) {
-      return null;
-    }
-
-    const id = `${route}`;
-
-    return (
-      <FocusableGroup
-        id={id}
-        preferredFocus={route === currentRoute}
-        excludeFromFocusSearching
-        key={id}
-      >
-        <ScreenDataContext.Provider value={state}>
-          <PathnameContext.Provider value={route}>
-            <Screen route={route} Components={Components} />
-          </PathnameContext.Provider>
-        </ScreenDataContext.Provider>
-      </FocusableGroup>
-    );
-  };
-
-  return mainStack.map(renderScreen);
-};
-
 const Layout = ({ Components }: Props) => {
   const { appState } = usePickFromState(["appState"]);
   const appReady = pathOr(false, ["appReady"], appState);

package/Components/MasterCell/DefaultComponents/DynamicBadge.tsx

@@ -4,6 +4,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 
 type DynamicBadgeProps = {
   cellUUID?: string;
+  uri?: string;
 };
 
 const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
@@ -12,11 +13,12 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
   // TODO: Initial value should depends on player state (playing or not)
   const [showImage, setShowImage] = React.useState(true);
   const player = usePlayer(playerId);
+  const uri = props?.uri;
 
   React.useEffect(() => {
     if (playerId && player) {
       return player.addListener({
-        id: "dynamic-badges",
+        id: `dynamic-badges-${uri}`,
         listener: {
           onPlayerClose: () => {
             setShowImage(true);
@@ -35,7 +37,7 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
     } else {
       setShowImage(true);
     }
-  }, [player]);
+  }, [player, uri]);
 
   if (!showImage) {
     return null;

package/Components/Navigator/StackNavigator.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { isEmpty } from "ramda";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+
+import { Screen } from "../Screen/TV/index.web";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+export const StackNavigator = ({ Components }: Props) => {
+  const { mainStack, currentRoute } = useNavigation();
+
+  const renderScreen = ({ route, state }) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    return (
+      <FocusableGroup
+        id={route}
+        preferredFocus={route === currentRoute}
+        excludeFromFocusSearching
+        key={route}
+      >
+        <ScreenDataContext.Provider value={state}>
+          <PathnameContext.Provider value={route}>
+            <Screen route={route} Components={Components} />
+          </PathnameContext.Provider>
+        </ScreenDataContext.Provider>
+      </FocusableGroup>
+    );
+  };
+
+  return <>{mainStack.map(renderScreen)}</>;
+};

package/Components/Navigator/index.ts

@@ -0,0 +1 @@
+export { StackNavigator } from "./StackNavigator";

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -271,6 +271,12 @@ function ComponentsMapComponent(props: Props) {
 
     if (y >= 0 && y + height <= contentHeight) {
       scrollY.setValue(y);
+    } else {
+      if (y <= 0) {
+        scrollY.setValue(0);
+      } else if (y + height > contentHeight) {
+        scrollY.setValue(contentHeight - height);
+      }
     }
   }, []);
 

package/Components/River/RefreshControl.tsx

@@ -134,10 +134,10 @@ export const useGetProgressViewOffset = () => {
   switch (contentPosition) {
     case "on_bottom_status_bar":
       // navbar height
-      return offset + height - top;
+      return offset + height;
     case "on_top_screen":
       // navbar height + status bar height
-      return offset + height;
+      return offset + height + top;
     default:
       return offset;
   }

package/Components/RouteManager/index.tsx

@@ -14,7 +14,7 @@ type Props = { pathname: string; screenData: Record<string, any> };
  * @param {Props}: see props above
  */
 export function RouteManager(props: Props) {
-  const { pathname, screenData: _screenData } = useRoute();
+  const { pathname, screenData } = useRoute();
   const pathAttributes = getPathAttributes({ pathname });
 
   const { screenType, screenId } = R.last(pathAttributes);
@@ -25,7 +25,7 @@ export function RouteManager(props: Props) {
         screenType={screenType}
         screenId={screenId}
         {...props}
-        screenData={props.screenData}
+        screenData={screenData}
       />
     </TestId>
   );

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

@@ -36,7 +36,7 @@ type Props = {
   Components: Components;
 };
 
-const isPlayer = (routeState): boolean => {
+const isPlayerPlugin = (routeState): boolean => {
   const pluginType = pathOr(
     "unknown_plugin_type",
     ["state", "screen", "plugin_type"],
@@ -146,10 +146,12 @@ export const Screen = ({ route, Components }: Props) => {
   const NavBar = (Components.NavBar ||
     menuPlugin.module) as React.ComponentType<any>;
 
-  const isNavBarVisible = !isPlayer(routeState);
+  const isPlayer = isPlayerPlugin(routeState);
+
+  const isNavBarVisible = !isPlayer;
 
   const screenData =
-    screenType === "hooks"
+    screenType === "hooks" || isPlayer
       ? routeState?.state?.entry
       : routeState?.state?.screen;
 

package/Components/Transitioner/Scene.tsx

@@ -7,6 +7,7 @@ import {
 } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import { PathnameContext } from "../../Contexts/PathnameContext";
+import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
 
 type Props = {
   children: any;
@@ -16,6 +17,8 @@ type Props = {
   animating: boolean;
   contentStyle: ViewStyle;
   pathname: string;
+  isActive: boolean;
+  screenData: NavigationScreenData;
 };
 
 /**
@@ -38,34 +41,36 @@ export function Scene({
   animating,
   contentStyle,
   pathname,
+  isActive = false,
+  screenData,
 }: Props) {
+  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
+
+  React.useLayoutEffect(() => {
+    if (isActive) {
+      setInitialScreenData(screenData);
+    }
+  }, [screenData, isActive]);
+
   const frame = useSafeAreaFrame();
   const { height, width } = useWindowDimensions();
 
-  if (overlayStyle && animating) {
-    // Safe frame takes too long to update,
-    // so we can not rely on it there, and use height and width instead.
-    return (
-      <Animated.View
-        pointerEvents={pointerEvents}
-        style={[style, contentStyle, { height, width }]}
-      >
-        <PathnameContext.Provider value={pathname}>
-          {children}
-        </PathnameContext.Provider>
-        <Animated.View style={overlayStyle} />
-      </Animated.View>
-    );
-  }
+  // Safe frame takes too long to update,
+  // so we can not rely on it there, and use height and width instead.
+  const isAnimating = animating && overlayStyle;
+  const dimensions = isAnimating ? { height, width } : frame;
 
   return (
     <Animated.View
       pointerEvents={pointerEvents}
-      style={[style, contentStyle, frame]}
+      style={[style, contentStyle, dimensions]}
     >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
+      <ScreenDataContext.Provider value={initialScreenData}>
+        <PathnameContext.Provider value={pathname}>
+          {children}
+        </PathnameContext.Provider>
+      </ScreenDataContext.Provider>
+      {isAnimating && <Animated.View style={overlayStyle} />}
     </Animated.View>
   );
 }

package/Components/Transitioner/Transitioner.tsx

@@ -278,7 +278,8 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   // instead of dangerous nulls or duplicates.
   renderSingleScene({ scenes, to }) {
     const { contentStyle, layoutData } = this.props;
-    const screenData = scenes[to.index]?.children?.props?.screenData;
+    const screenData = this.props.children.props.screenData;
+    const pathname = scenes[to.index].key;
 
     const orientation = getScreenOrientation({
       screenData,
@@ -296,10 +297,12 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           }) && (
             <Scene
               {...{ style: to.style }}
-              pathname={scenes[to.index].key}
+              pathname={pathname}
+              isActive={pathname === this.props.navigator.currentRoute}
               contentStyle={contentStyle}
               key={scenes[to.index].key}
               screenUniqueId={scenes[to.index].screenUniqueId}
+              screenData={screenData}
             >
               {scenes[to.index].children}
             </Scene>
@@ -319,12 +322,14 @@ 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}
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[from.index].screenUniqueId}
+        screenData={scenes[from.index].children.props.screenData}
       >
         {scenes[from.index].children}
       </Scene>
@@ -333,12 +338,14 @@ 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}
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}
         animating={this.state.animating}
         contentStyle={contentStyle}
         screenUniqueId={scenes[to.index].screenUniqueId}
+        screenData={this.props.children.props.screenData}
       >
         {scenes[to.index].children}
       </Scene>

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -21,7 +21,9 @@ exports[`<Scene /> renders correctly 1`] = `
     ]
   }
 >
-  <ContextProvider />
+  <ContextProvider>
+    <ContextProvider />
+  </ContextProvider>
 </ForwardRef(AnimatedComponentWrapper)>
 `;
 
@@ -43,7 +45,9 @@ exports[`<Scene /> renders the overlay while animating 1`] = `
     ]
   }
 >
-  <ContextProvider />
+  <ContextProvider>
+    <ContextProvider />
+  </ContextProvider>
   <ForwardRef(AnimatedComponentWrapper)
     style={
       Object {

package/Components/Transitioner/__tests__/__snapshots__/transitioner.test.js.snap

@@ -10,6 +10,7 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
   }
 >
   <Scene
+    isActive={true}
     screenUniqueId="mocked-uuid"
   >
     <View

package/Components/VideoLive/LiveImageManager.ts

@@ -351,6 +351,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
         item,
         playerId: this.currentlyPlaying?.playerId,
         primaryPlayerId: this.primaryPlayer?.playerId,
+        entry: item.getPlayer().getEntry(),
       },
     });
   };
@@ -385,6 +386,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
           item,
           playerId: this.currentlyPlaying?.playerId,
           primaryPlayerId: this.primaryPlayer?.playerId,
+          entry: item.getPlayer().getEntry(),
         },
       });
   };
@@ -419,6 +421,7 @@ export class LiveImageManager implements PlayerLifecycleListener {
         error,
         playerId: currentItem?.playerId,
         primaryPlayerId: currentItem?.playerId,
+        entry: item.getPlayer().getEntry(),
       },
     });
   };

package/Components/VideoModal/PlayerWrapper.tsx

@@ -14,12 +14,13 @@ import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 import {
-  AnimationComponent,
-  ComponentAnimationType,
   AnimatedScrollModal,
   AnimatedVideoPlayerComponent,
+  AnimationComponent,
+  ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type DimensionsT = {
@@ -96,7 +97,7 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   }
 
   if (!isInlineModal && Platform.OS === "android") {
-    return ["top", "left", "right", "bottom"];
+    return [];
   }
 
   return ["top"];
@@ -161,7 +162,7 @@ export const PlayerWrapper = (props: Props) => {
       width: isInlineModal && docked ? undefined : baseDimensions.width,
       aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
-    [baseDimensions, isInlineModal, pip, docked]
+    [baseDimensions, isInlineModal, pip]
   );
 
   const containerDimensions: DimensionsT = React.useMemo(
@@ -180,65 +181,71 @@ export const PlayerWrapper = (props: Props) => {
     [containerDimensions, playerDimesionsHack]
   );
 
+  const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
+
   return (
-    <WrapperView
-      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimesionsHack,
-      ]}
-    >
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveUpComponent}
-        additionalData={{ saveArea: true }}
-        style={directionStyles(isTabletLandscape)}
-      >
-        <ScreenContextProvider pathname={"videoModal"}>
-          <PathnameContext.Provider value={"videoModal"}>
-            <View
-              testID={`${entry?.id}-player-container`}
-              style={[
-                defaultStyles.playerContainer,
-                containerDimensions,
-                containerStyle,
-                playerDimesionsHack,
-              ]}
-            >
-              <AnimationComponent
-                animationType={ComponentAnimationType.moveUpComponent}
-                style={isTabletLandscape ? defaultStyles.flex : undefined}
-                additionalData={{
-                  useLayoutMeasure: isTabletLandscape,
-                  disableAnimatedComponent: !isTabletLandscape,
-                  resetAnimationValue: isTabletLandscape && docked,
-                }}
-              >
-                <AnimatedVideoPlayerComponent>
-                  {children(childrenStyles)}
-                </AnimatedVideoPlayerComponent>
-              </AnimationComponent>
-            </View>
-            <AnimatedScrollModal>
-              {isInlineModal ? (
-                <AnimationComponent
-                  animationType={ComponentAnimationType.componentFade}
-                  style={defaultStyles.flex}
+    <ScreenContextProvider pathname={pathname}>
+      <PathnameContext.Provider value={pathname}>
+        <WrapperView
+          edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+          style={[
+            safeAreaStyles(configuration, isTablet),
+            style,
+            playerDimesionsHack,
+          ]}
+        >
+          <AnimationComponent
+            animationType={ComponentAnimationType.moveUpComponent}
+            additionalData={{ saveArea: true }}
+            style={directionStyles(isTabletLandscape)}
+          >
+            <ScreenContextProvider pathname={pathname}>
+              <PathnameContext.Provider value={pathname}>
+                <View
+                  testID={`${entry?.id}-player-container`}
+                  style={[
+                    defaultStyles.playerContainer,
+                    containerDimensions,
+                    containerStyle,
+                    playerDimesionsHack,
+                  ]}
                 >
-                  <PlayerDetails
-                    configuration={configuration}
-                    style={defaultStyles.playerDetails}
-                    entry={entry}
-                    isTabletLandscape={isTabletLandscape}
-                  />
-                </AnimationComponent>
-              ) : (
-                <View style={defaultStyles.playerDetails} />
-              )}
-            </AnimatedScrollModal>
-          </PathnameContext.Provider>
-        </ScreenContextProvider>
-      </AnimationComponent>
-    </WrapperView>
+                  <AnimationComponent
+                    animationType={ComponentAnimationType.moveUpComponent}
+                    style={isTabletLandscape ? defaultStyles.flex : undefined}
+                    additionalData={{
+                      useLayoutMeasure: isTabletLandscape,
+                      disableAnimatedComponent: !isTabletLandscape,
+                      resetAnimationValue: isTabletLandscape && docked,
+                    }}
+                  >
+                    <AnimatedVideoPlayerComponent>
+                      {children(childrenStyles)}
+                    </AnimatedVideoPlayerComponent>
+                  </AnimationComponent>
+                </View>
+                <AnimatedScrollModal>
+                  {isInlineModal ? (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.componentFade}
+                      style={defaultStyles.flex}
+                    >
+                      <PlayerDetails
+                        configuration={configuration}
+                        style={defaultStyles.playerDetails}
+                        entry={entry}
+                        isTabletLandscape={isTabletLandscape}
+                      />
+                    </AnimationComponent>
+                  ) : (
+                    <View style={defaultStyles.playerDetails} />
+                  )}
+                </AnimatedScrollModal>
+              </PathnameContext.Provider>
+            </ScreenContextProvider>
+          </AnimationComponent>
+        </WrapperView>
+      </PathnameContext.Provider>
+    </ScreenContextProvider>
   );
 };

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

@@ -25,6 +25,13 @@ jest.mock("react-native-gesture-handler");
 
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet,
 }));

package/Components/Viewport/ViewportTracker/ViewportTracker.tsx

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

package/Contexts/ScreenDataContext/index.ts

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ScreenDataContext = React.createContext<any>(null);

package/package.json

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