@applicaster/zapp-react-native-ui-components 12.0.0-rc.99 → 13.0.0-alpha.2330880002

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import * as R from "ramda";
+import { update, compose, tail, append, take, identity, isNil } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -46,10 +46,14 @@ function prepareScene(children) {
  */
 function scenesForBackTransition(props: SceneProps, { scenes }) {
   return scenes.length > 1
-    ? R.identity(scenes)
+    ? identity(scenes)
     : [prepareScene(props.children), scenes[0]];
 }
 
+const isModalClosed = (navigator) => {
+  return !!isNil(navigator?.modalData);
+};
+
 type Props = {
   transitionConfig: any;
   children: React.ReactNode;
@@ -110,7 +114,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   pushTransitionStart() {
     this.setState(
       {
-        scenes: R.append(prepareScene(this.props.children), this.state.scenes),
+        scenes: append(prepareScene(this.props.children), this.state.scenes),
         ...this.animationManager.stateForAction(this.state, NAV_ACTION_PUSH),
       },
       () => {
@@ -166,21 +170,23 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
   transitionWithoutAnimation(resetState) {
     const { scenes } = this.state;
-
-    const newState = resetState
-      ? {
-          scenes: [prepareScene(this.props.children)],
-          to: {
-            index: 0,
-          },
-        }
-      : {
-          scenes: R.update(
-            scenes.length - 1,
-            prepareScene(this.props.children),
-            scenes
-          ),
-        };
+    const newScene = prepareScene(this.props.children);
+    const isLastSceneHook = scenes[scenes.length - 1].key.startsWith("/hook");
+
+    let newState;
+
+    if (resetState) {
+      newState = {
+        scenes: [newScene],
+        to: { index: 0 },
+      };
+    } else if (isLastSceneHook || scenes.length === 1) {
+      newState = { scenes: update(scenes.length - 1, newScene, scenes) };
+    } else {
+      newState = {
+        scenes: compose(tail, append(newScene))(scenes),
+      };
+    }
 
     this.setState(newState);
   }
@@ -223,7 +229,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
         this.shouldSkipAnimationForRoute(previousRoute) ||
         this.shouldSkipAnimationForRoute(currentRoute)
       ) {
-        return this.transitionWithoutAnimation();
+        // we are going back, in this case we need to have only one scene using resetState
+        const resetState = isGoingBack ? true : undefined;
+
+        return this.transitionWithoutAnimation(resetState);
       }
 
       switch (this.props.navigator.previousAction) {
@@ -266,7 +275,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
   backTransitionEnd(stepsBack) {
     this.setState({
       animating: false,
-      scenes: R.take(this.state.scenes.length - stepsBack, this.state.scenes),
+      scenes: take(this.state.scenes.length - stepsBack, this.state.scenes),
     });
   }
 
@@ -282,7 +291,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       <View style={styles.container}>
         {scenes[to.index] && (
           <Scene
-            {...{ style: to.style }}
+            {...{ style: to?.style || {} }}
             pathname={pathname}
             isActive={pathname === this.props.navigator.currentRoute}
             contentStyle={contentStyle}
@@ -308,7 +317,10 @@ 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}
+        isActive={
+          scenes[from.index].key === this.props.navigator.currentRoute &&
+          isModalClosed(this.props.navigator)
+        }
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -324,7 +336,10 @@ 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}
+        isActive={
+          scenes[to.index].key === this.props.navigator.currentRoute &&
+          isModalClosed(this.props.navigator)
+        }
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}

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

@@ -16,6 +16,13 @@ jest.mock("react-native-safe-area-context", () => ({
   })),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler",
+  () => ({
+    useScreenOrientationHandler: jest.fn(),
+  })
+);
+
 const { Scene } = require("../Scene");
 
 const wrapper = shallow(

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

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

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

@@ -31,6 +31,11 @@ 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/AnimatedPlayerModalWrapper.tsx

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

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -61,29 +61,32 @@ 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 isMaximazedModal = videoModalState.mode === "MAXIMIZED";
-  const isMinimizedModal = videoModalState.mode === "MINIMIZED";
-  const previousItemId = usePrevious(videoModalState.item?.id);
+  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
+  const isMaximazedModal = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal = videoModalMode === "MINIMIZED";
+  const previousItemId = usePrevious(videoModalItem?.id);
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
     playerAnimationState !== PlayerAnimationStateEnum.maximaze;
 
   const isEnablePanGesture =
+    enableGesture &&
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
     (isMaximazedModal || isMinimizedModal);
 
   const isAudioItem = React.useMemo(
     () =>
-      videoModalState.item?.content?.type?.includes?.("audio") ||
-      videoModalState.item?.type?.value === "audio",
-    [videoModalState.item]
+      videoModalItem?.content?.type?.includes?.("audio") ||
+      videoModalItem?.type?.value === "audio",
+    [videoModalItem]
   );
 
   // Refs for components
@@ -114,7 +117,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         const preparedTranslationY =
           Math.abs(translationY) - lastScrollYValue.current;
 
-        if (videoModalState.mode === "MAXIMIZED") {
+        if (videoModalMode === "MAXIMIZED") {
           const endOffsetY =
             lastSnap + preparedTranslationY + dragToss * velocityY + 150;
 
@@ -161,22 +164,38 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           resetPlayerAnimationState();
       }
     },
-    [lastSnap, modalSnapPoints, playerAnimationState, videoModalState.mode]
+    [lastSnap, modalSnapPoints, playerAnimationState, videoModalMode]
   );
 
   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 (nativeEvent.contentOffset.y === 0 && !isActiveGesture) {
-        resetScrollAnimatedValues(
-          lastScrollY,
-          lastScrollYValue,
-          dragScrollY,
-          dragVideoPlayerY
-        );
+      if (canMomentum.current && !isActiveGesture) {
+        if (nativeEvent.contentOffset.y === 0) {
+          resetScrollAnimatedValues(
+            lastScrollY,
+            lastScrollYValue,
+            dragScrollY,
+            dragVideoPlayerY
+          );
+
+          setIEnableGesture(true);
+        } else {
+          setIEnableGesture(false);
+        }
+
+        canMomentum.current = false;
       }
     },
     [isActiveGesture]
@@ -196,23 +215,42 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   }, []);
 
   React.useEffect(() => {
+    const { mode, previousMode, item } = videoModalState;
+
     if (
-      videoModalState.mode === "MINIMIZED" &&
-      videoModalState.previousMode === "MAXIMIZED"
+      mode === "MAXIMIZED" &&
+      !enableGesture &&
+      scrollPosition.current === 0
     ) {
-      resetPlayerAnimationState();
+      setIEnableGesture(true);
     }
 
-    if (
-      (videoModalState.mode === "MAXIMIZED" &&
-        videoModalState.previousMode === "MINIMIZED" &&
-        previousItemId === videoModalState.item?.id) ||
-      previousItemId !== videoModalState.item?.id
+    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
+      // set animation to the minimize values if moving from the player to another screen
+      if (playerAnimationState === null) {
+        setScrollModalAnimatedValue(
+          translateYOffset,
+          modalSnapPoints[1],
+          setLastSnap
+        );
+
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+      }
+    } else if (
+      playerAnimationState === null &&
+      ((previousItemId === item?.id &&
+        mode === "MAXIMIZED" &&
+        (previousMode === "MINIMIZED" || previousMode === "MAXIMIZED")) ||
+        (previousItemId !== item?.id && mode !== "FULLSCREEN"))
     ) {
       setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
-      setTimeout(() => resetPlayerAnimationState());
     }
-  }, [videoModalState, previousItemId]);
+  }, [videoModalState]);
 
   React.useEffect(() => {
     if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
@@ -237,22 +275,22 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         translateYOffset,
         getAnimatedConfig(modalSnapPoints[1])
       ).start(() => {
-        setTimeout(() => {
-          minimiseVideoModal();
+        minimiseVideoModal();
 
-          setScrollModalAnimatedValue(
-            translateYOffset,
-            modalSnapPoints[1],
-            setLastSnap
-          );
+        setScrollModalAnimatedValue(
+          translateYOffset,
+          modalSnapPoints[1],
+          setLastSnap
+        );
 
-          resetScrollAnimatedValues(
-            lastScrollY,
-            lastScrollYValue,
-            dragScrollY,
-            dragVideoPlayerY
-          );
-        }, 150);
+        resetScrollAnimatedValues(
+          lastScrollY,
+          lastScrollYValue,
+          dragScrollY,
+          dragVideoPlayerY
+        );
+
+        resetPlayerAnimationState();
       });
     } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
       Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
@@ -269,7 +307,9 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         resetPlayerAnimationState();
       });
     }
+  }, [playerAnimationState]);
 
+  React.useEffect(() => {
     const lastScrollYListenerId = lastScrollY.addListener(({ value }) => {
       lastScrollYValue.current = value;
     });
@@ -295,7 +335,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       lastScrollY.removeListener(lastScrollYListenerId);
       dragScrollY.removeListener(dragListenerId);
     };
-  }, [playerAnimationState, isAudioItem, modalSnapPoints, isMinimizedModal]);
+  }, [playerAnimationState, isAudioItem, isMinimizedModal]);
 
   const Wrapper = React.useMemo(
     () => (Platform.OS === "android" ? GestureHandlerRootView : View),
@@ -333,6 +373,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                   bounces={false}
                   onScrollBeginDrag={onRegisterLastScroll}
                   onScroll={onScroll}
+                  onMomentumScrollBegin={onMomentumScrollBegin}
                   onMomentumScrollEnd={onMomentumScrollEnd}
                   scrollEventThrottle={1}
                   showsVerticalScrollIndicator={false}
@@ -349,7 +390,12 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 };
 
 export const AnimatedScrollModal = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedScrollModalComponent : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component =
+    !isTV() && visible ? AnimatedScrollModalComponent : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

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

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -60,9 +60,14 @@ export const AnimationView = ({
   const {
     width: screenWidth,
     deviceInfo: { isTablet, isTabletLandscape },
-  } = useDimensions("window", { deviceInfo: true });
+  } = 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);
@@ -85,9 +90,9 @@ export const AnimationView = ({
 
   const isAudioItem = React.useMemo(
     () =>
-      videoModalState.item?.content?.type?.includes?.("audio") ||
-      videoModalState.item?.type?.value === "audio",
-    [videoModalState.item]
+      videoModalItem?.content?.type?.includes?.("audio") ||
+      videoModalItem?.type?.value === "audio",
+    [videoModalItem]
   );
 
   const inlineAudioPlayer = additionalData.inlineAudioPlayer;
@@ -226,10 +231,8 @@ export const AnimationView = ({
   );
 
   const getInitialValue = React.useCallback(() => {
-    const mode =
-      videoModalState.mode === "PIP"
-        ? videoModalState.previousMode
-        : videoModalState.mode;
+    const { mode: videoModalMode, previousMode } = videoModalState;
+    const mode = videoModalMode === "PIP" ? previousMode : videoModalMode;
 
     switch (mode) {
       case "MINIMIZED":
@@ -263,7 +266,7 @@ export const AnimationView = ({
       isTablet,
       isTabletLandscape,
       isRTL,
-      fromMiniPlayer: videoModalState.mode === "MINIMIZED",
+      fromMiniPlayer: videoModalMode === "MINIMIZED",
       inlineAudioPlayer,
     }),
     [
@@ -273,7 +276,7 @@ export const AnimationView = ({
       defaultValue,
       moveUpValue,
       moveComponentHorizontalValue,
-      videoModalState.mode,
+      videoModalMode,
     ]
   );
 
@@ -301,19 +304,40 @@ export const AnimationView = ({
           typeof additionalData.height === "number" && additionalData.height;
       }
 
-      if (defaultValue.x === 0 && width && height) {
+      if (
+        videoModalMode === "MAXIMIZED" &&
+        defaultValue.x !== screenWidth &&
+        width &&
+        height
+      ) {
         const value = { x: width, y: height };
         setDefaultValue(value);
         animatedValue.setValue(value);
       }
     }
-  }, [additionalData, screenWidth]);
+  }, [screenWidth]);
+
+  React.useEffect(() => {
+    const { mode, previousMode } = videoModalState;
+
+    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
+      // set animation to the minimize values if moving from the player to another screen
+      if (playerAnimationState === null) {
+        const value = getAnimationValue(
+          animationType,
+          PlayerAnimationStateEnum.minimize
+        ).toValue;
+
+        animatedValue.setValue(value);
+      }
+    }
+  }, [videoModalState]);
 
   React.useEffect(() => {
     if (
       playerAnimationState === PlayerAnimationStateEnum.minimize &&
       startComponentsAnimation &&
-      videoModalState.mode === "MAXIMIZED"
+      videoModalMode === "MAXIMIZED"
     ) {
       Animated.timing(
         animatedValue,
@@ -322,12 +346,7 @@ export const AnimationView = ({
     } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
       animatedValue.setValue(defaultValue);
     }
-  }, [
-    playerAnimationState,
-    startComponentsAnimation,
-    videoModalState.mode,
-    defaultValue,
-  ]);
+  }, [playerAnimationState, startComponentsAnimation, defaultValue]);
 
   React.useEffect(() => {
     const dragVideoPlayerYListenerId = dragVideoPlayerY.addListener(
@@ -389,9 +408,9 @@ export const AnimationView = ({
       ref={animationComponentRef}
       style={[
         ...preparedStyles,
-        (videoModalState.mode === "MAXIMIZED" ||
-          videoModalState.mode === "MINIMIZED" ||
-          (videoModalState.mode === "PIP" && isAppActive)) &&
+        (videoModalMode === "MAXIMIZED" ||
+          videoModalMode === "MINIMIZED" ||
+          (videoModalMode === "PIP" && isAppActive)) &&
           getAnimationStyle(animationType, animatedValue),
       ]}
     >

package/Components/VideoModal/PlayerDetails.tsx

@@ -1,9 +1,17 @@
 import React, { useEffect, useRef } from "react";
-import { StyleProp, ViewStyle, Animated, Easing } from "react-native";
+import {
+  StyleProp,
+  ViewStyle,
+  Animated,
+  Easing,
+  Dimensions,
+} 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;
@@ -15,6 +23,7 @@ type Props = {
   configuration: Configuration;
   isTabletLandscape: boolean;
   isAudioPlayer?: boolean;
+  isTablet: boolean;
 };
 
 const containerStyle = ({
@@ -31,6 +40,7 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape,
   isAudioPlayer,
+  isTablet,
 }: Props) => {
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
@@ -77,7 +87,11 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
-        // isAudioPlayer && audioMarginStyle,
+        {
+          // 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,
+        },
       ]}
     >
       {screenData && (