@applicaster/zapp-react-native-ui-components 13.0.0-alpha.5718191297 → 13.0.0-alpha.5771418585

package/Components/Cell/CellWithFocusable.ios.tsx

@@ -0,0 +1,126 @@
+/** TODO: Remove this file when tvos FocusableGroup
+ * behaviour is aligned to the web one
+ * FocusableGroup should only send onFocus and onBlur events when
+ * Focus enters and leaves the Focusables inside the branch
+ */
+import * as React from "react";
+
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
+import { isAppleTV } from "../../Helpers/Platform";
+import { useCellState } from "../MasterCell/utils";
+
+const useCellFocusedState = (
+  skipFocusManagerRegistration: boolean,
+  groupId: string,
+  id: string
+) => {
+  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
+
+  React.useEffect(() => {
+    const isGroupItemFocused = () => {
+      if (!skipFocusManagerRegistration) {
+        const isFocused = focusManager.isGroupItemFocused(groupId, id);
+        setCurrentCellFocused(isFocused);
+      }
+    };
+
+    const handler = () => {
+      // tvOS hack for properly checking focus
+      if (isAppleTV()) {
+        setTimeout(() => {
+          isGroupItemFocused();
+        }, 0);
+      } else {
+        isGroupItemFocused();
+      }
+    };
+
+    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
+
+    return () => {
+      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
+    };
+  }, [groupId, skipFocusManagerRegistration]);
+
+  return currentCellFocused;
+};
+
+type Props = {
+  item: ZappEntry;
+  CellRenderer: React.FunctionComponent<any>;
+  id: string;
+  groupId: string;
+  onFocus: Function;
+  index: number;
+  scrollTo: Function;
+  preferredFocus?: boolean;
+  skipFocusManagerRegistration?: boolean;
+  isFocusable?: boolean;
+  behavior: Behavior;
+  focused?: boolean;
+};
+
+export function CellWithFocusable(props: Props) {
+  const {
+    index,
+    item,
+    CellRenderer,
+    id,
+    groupId,
+    onFocus,
+    scrollTo = noop,
+    preferredFocus,
+    skipFocusManagerRegistration,
+    isFocusable,
+    behavior,
+    focused,
+  } = props;
+
+  const isFocused = useCellFocusedState(
+    skipFocusManagerRegistration,
+    groupId,
+    id
+  );
+
+  const state = useCellState({
+    id: item.id,
+    behavior,
+    focused: isFocused || toBooleanWithDefaultFalse(focused),
+  });
+
+  const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
+
+  // for horizontal scrolling
+  React.useEffect(() => {
+    if (focusedButtonId) {
+      scrollTo(index);
+    }
+  }, [focusedButtonId]);
+
+  const handleToggleFocus = (value) => {
+    setFocusedButtonId(value.focusedButtonId);
+
+    if (value.focusable) {
+      onFocus(value.focusable, value.mouse);
+    }
+  };
+
+  return (
+    <CellRenderer
+      item={item}
+      groupId={groupId}
+      onToggleFocus={handleToggleFocus}
+      state={state}
+      prefixId={id}
+      focusedButtonId={focusedButtonId}
+      preferredFocus={preferredFocus}
+      skipFocusManagerRegistration={skipFocusManagerRegistration}
+      isFocusable={isFocusable}
+      focused={focused}
+    />
+  );
+}

package/Components/Cell/CellWithFocusable.tsx

@@ -1,48 +1,10 @@
 import * as React from "react";
 
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
-import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
-
-const useCellFocusedState = (
-  skipFocusManagerRegistration: boolean,
-  groupId: string,
-  id: string
-) => {
-  const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
-
-  React.useEffect(() => {
-    const isGroupItemFocused = () => {
-      if (!skipFocusManagerRegistration) {
-        const isFocused = focusManager.isGroupItemFocused(groupId, id);
-        setCurrentCellFocused(isFocused);
-      }
-    };
-
-    const handler = () => {
-      // tvOS hack for properly checking focus
-      if (isAppleTV()) {
-        setTimeout(() => {
-          isGroupItemFocused();
-        }, 0);
-      } else {
-        isGroupItemFocused();
-      }
-    };
-
-    focusManager.on(FOCUS_EVENTS.FOCUS, handler);
-
-    return () => {
-      focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
-    };
-  }, [groupId, skipFocusManagerRegistration]);
-
-  return currentCellFocused;
-};
+import { FocusableGroup } from "../FocusableGroup";
 
 type Props = {
   item: ZappEntry;
@@ -75,11 +37,7 @@ export function CellWithFocusable(props: Props) {
     focused,
   } = props;
 
-  const isFocused = useCellFocusedState(
-    skipFocusManagerRegistration,
-    groupId,
-    id
-  );
+  const [isFocused, setIsFocused] = React.useState(false);
 
   const state = useCellState({
     id: item.id,
@@ -96,26 +54,52 @@ export function CellWithFocusable(props: Props) {
     }
   }, [focusedButtonId]);
 
-  const handleToggleFocus = (value) => {
-    setFocusedButtonId(value.focusedButtonId);
+  const handleToggleFocus = React.useCallback(
+    (value) => {
+      setFocusedButtonId(value.focusedButtonId);
+
+      if (value.focusable) {
+        onFocus(value.focusable, value.mouse);
+      }
+    },
+    [onFocus]
+  );
+
+  const onGroupFocus = React.useCallback(() => {
+    if (!skipFocusManagerRegistration) {
+      setIsFocused(true);
+    }
+  }, [skipFocusManagerRegistration]);
 
-    if (value.focusable) {
-      onFocus(value.focusable, value.mouse);
+  const onGroupBlur = React.useCallback(() => {
+    if (!skipFocusManagerRegistration) {
+      setIsFocused(false);
     }
-  };
+  }, [skipFocusManagerRegistration]);
 
   return (
-    <CellRenderer
-      item={item}
+    <FocusableGroup
+      id={`focusable-cell-wrapper-${id}`}
+      testID={"cell-with-focusable-cell-renderer-focusable-group"}
       groupId={groupId}
-      onToggleFocus={handleToggleFocus}
-      state={state}
-      prefixId={id}
-      focusedButtonId={focusedButtonId}
       preferredFocus={preferredFocus}
-      skipFocusManagerRegistration={skipFocusManagerRegistration}
-      isFocusable={isFocusable}
-      focused={focused}
-    />
+      shouldUsePreferredFocus
+      onFocus={onGroupFocus}
+      onBlur={onGroupBlur}
+    >
+      <CellRenderer
+        testID={"cell-with-focusable-cell-renderer"}
+        item={item}
+        groupId={`focusable-cell-wrapper-${id}`}
+        onToggleFocus={handleToggleFocus}
+        state={state}
+        prefixId={id}
+        focusedButtonId={focusedButtonId}
+        preferredFocus={true}
+        skipFocusManagerRegistration={skipFocusManagerRegistration}
+        isFocusable={isFocusable}
+        focused={focused}
+      />
+    </FocusableGroup>
   );
 }

package/Components/Cell/__tests__/CellWIthFocusable.test.js

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 import React from "react";
 import { act, render } from "@testing-library/react-native";
-import { CellWithFocusable } from "../CellWithFocusable";
+import { CellWithFocusable } from "../CellWithFocusable.tsx";
 
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 
@@ -23,7 +23,9 @@ describe("CellWithFocusable", () => {
 
     const wrapper = renderWith(props);
 
-    expect(wrapper.UNSAFE_getByType("View").props.state).toBe("default");
+    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
+
+    expect(element.props.state).toBe("default");
   });
 
   it("should render in default state", () => {
@@ -40,8 +42,9 @@ describe("CellWithFocusable", () => {
     focusManager.isGroupItemFocused = jest.fn(() => true);
 
     const wrapper = renderWith(props);
+    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
 
-    expect(wrapper.UNSAFE_getByType("View").props.state).toBe("default");
+    expect(element.props.state).toBe("default");
   });
 
   it("should render in focused state", () => {
@@ -55,13 +58,17 @@ describe("CellWithFocusable", () => {
       scrollTo: jest.fn(),
     };
 
-    focusManager.isGroupItemFocused = jest.fn(() => true);
     const wrapper = renderWith(props);
 
+    const focusableGroupComponent = wrapper.getByTestId(
+      "cell-with-focusable-cell-renderer-focusable-group"
+    );
+
     act(() => {
-      focusManager.on.mock.calls[focusManager.on.mock.calls.length - 1][1]();
+      focusableGroupComponent.props.onFocus();
     });
 
-    expect(wrapper.UNSAFE_getByType("View").props.state).toBe("focused");
+    const element = wrapper.getByTestId("cell-with-focusable-cell-renderer");
+    expect(element.props.state).toBe("focused");
   });
 });

package/Components/ErrorScreen/index.tsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from "react";
 import * as R from "ramda";
 import {
-  View,
+  ImageStyle,
   StyleSheet,
   Text,
-  ViewStyle,
-  TextStyle,
-  ImageStyle,
   TextProps,
+  TextStyle,
+  View,
+  ViewStyle,
 } from "react-native";
 import { defaultAsset } from "./defaultAsset";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -150,13 +150,13 @@ export function ErrorScreen(props: Props) {
   return (
     <View style={[baseStyles.container, styles.screen]}>
       <View style={[baseStyles.container, styles.component]}>
-        {assetEnabled && (
+        {assetEnabled ? (
           <Image
             fadeDuration={0}
             source={{ uri: asset }}
             style={styles.asset}
           />
-        )}
+        ) : null}
         <Text style={styles.title} {...titleProps}>
           {title}
         </Text>

package/Components/Focusable/Focusable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unknown-property */
 import * as React from "react";
 
 import { BaseFocusable } from "../BaseFocusable";

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

@@ -244,7 +244,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
   return (
     <>
       <Image {...props} applyMaxSize />
-      {isShouldRender && (
+      {isShouldRender ? (
         <View style={[style, positionAbsolute]}>
           <PlayerLiveImage
             uri={props.uri}
@@ -257,7 +257,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
             audioMutedByDefault={audio_muted_by_default}
           />
         </View>
-      )}
+      ) : null}
     </>
   );
 };

package/Components/MasterCell/hooks/useAsyncRendering/MasterCellAsyncRenderManager.ts

@@ -16,13 +16,13 @@ export class MasterCellAsyncRenderManager {
   }
 
   public emitAsyncElementRegistrate = () => {
-    this.asyncElementRegistrate$.next();
+    this.asyncElementRegistrate$.next(null);
 
     return this.decrementAsyncElementRegistrationCount;
   };
 
   public emitAsyncElementLayout = () => {
-    this.asyncElementLayout$.next();
+    this.asyncElementLayout$.next(null);
   };
 
   public decrementAsyncElementRegistrationCount = () => {

package/Components/ModalComponent/Button/index.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { Item, ItemProps } from "./Item";
 import { ItemIcon, ItemIconProps } from "./ItemIcon";
 import { ItemLabel, ItemLabelProps } from "./ItemLabel";
-import { defaultSelectedAsset } from "./assets";
 import * as assets from "./assets";
+import { defaultSelectedAsset } from "./assets";
 
 type ButtonProps = {
   configuration: any;
@@ -92,18 +92,18 @@ export function Button({
       >
         <Item {...itemProps} focused={focused} selected={selected}>
           <View style={styles.label_icon_container}>
-            {itemIconProps.asset && itemIconProps.asset.length > 0 && (
+            {itemIconProps.asset && itemIconProps.asset.length > 0 ? (
               <ItemIcon {...itemIconProps} />
-            )}
-            {itemLabelProps.label && (
+            ) : null}
+            {itemLabelProps.label ? (
               <ItemLabel
                 {...itemLabelProps}
                 focused={focused}
                 selected={selected}
               />
-            )}
+            ) : null}
           </View>
-          {selected && <ItemIcon {...selectedItemIconProps} />}
+          {selected ? <ItemIcon {...selectedItemIconProps} /> : null}
         </Item>
       </TouchableOpacity>
     </View>

package/Components/OfflineHandler/NotificationView/NotificationView.lg.tsx

@@ -90,7 +90,7 @@ export const NotificationView = (props: Props) => {
   return (
     <div onClick={onClose}>
       {children}
-      {open && (
+      {open ? (
         <div style={styles.body}>
           <div style={styles.title}>
             <h2>{MSG}</h2>
@@ -98,7 +98,7 @@ export const NotificationView = (props: Props) => {
 
           <h4 style={styles.subtitle}>{EXTRA_MSG}</h4>
         </div>
-      )}
+      ) : null}
     </div>
   );
 };

package/Components/OfflineHandler/NotificationView/NotificationView.samsung.tsx

@@ -85,7 +85,7 @@ export const NotificationView = (props: Props) => {
   return (
     <div onClick={onClose}>
       {children}
-      {shown && (
+      {shown ? (
         <div style={styles.body}>
           <div style={styles.title}>
             <h2>{title}</h2>
@@ -93,7 +93,7 @@ export const NotificationView = (props: Props) => {
 
           <h4 style={styles.subtitle}>{subtitle}</h4>
         </div>
-      )}
+      ) : null}
     </div>
   );
 };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -1,17 +1,17 @@
 import * as React from "react";
+import { useEffect, useReducer } from "react";
 // @ts-ignore
-import { View, ViewStyle, TVMenuControl } from "react-native";
+import { TVMenuControl, View, ViewStyle } from "react-native";
 import * as R from "ramda";
 import uuid from "uuid/v4";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
   isApplePlatform,
-  platformSelect,
   isTV,
+  platformSelect,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
-import { useEffect, useReducer } from "react";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
@@ -29,10 +29,10 @@ import {
 import { ProgramInfo } from "./ProgramInfo";
 import { AudioPlayer } from "../AudioPlayer";
 import {
-  playerContainerLogger,
   log_debug,
   log_info,
   log_warning,
+  playerContainerLogger,
 } from "./logger";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
@@ -53,8 +53,8 @@ import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtil
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = {
@@ -683,10 +683,10 @@ const PlayerContainerComponent = (props: Props) => {
 
                     {renderRestPlayers(restPlayerProps)}
 
-                    {state.error && <ErrorDisplay error={state.error} />}
+                    {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
-                  {isInlineTV && context.showComponentsContainer && (
+                  {isInlineTV && context.showComponentsContainer ? (
                     <View
                       style={styles.inlineRiver}
                       testID={"inline-river-component-wrapper"}
@@ -717,7 +717,7 @@ const PlayerContainerComponent = (props: Props) => {
                         )}
                       </ComponentFocusableWrapperView>
                     </View>
-                  )}
+                  ) : null}
                 </View>
               </FocusableGroup>
             </TVEventHandlerComponent>

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -114,12 +114,12 @@ function ProgramInfoComponent({
   return (
     <View style={container}>
       <View style={programStyles.programInfo.container}>
-        {logo && (
+        {logo ? (
           <Image
             source={{ uri: logo }}
             style={programStyles.programInfo.logo}
           />
-        )}
+        ) : null}
         {!isAudioContent && transportInfo}
       </View>
     </View>

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

@@ -22,126 +22,78 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           flatListHeight={null}
           loadingState={
             BehaviorSubject {
-              "_isScalar": false,
               "_value": {
                 "done": false,
                 "index": -1,
                 "waitForAllComponents": false,
               },
               "closed": false,
+              "currentObservers": null,
               "hasError": false,
               "isStopped": false,
               "observers": [
-                Subscriber {
-                  "_parentOrParents": null,
-                  "_subscriptions": [
-                    SubjectSubscription {
-                      "_parentOrParents": [Circular],
-                      "_subscriptions": null,
+                SafeSubscriber {
+                  "_finalizers": [
+                    Subscription {
+                      "_finalizers": null,
+                      "_parentage": [Circular],
                       "closed": false,
-                      "subject": [Circular],
-                      "subscriber": [Circular],
+                      "initialTeardown": [Function],
                     },
                   ],
+                  "_parentage": null,
                   "closed": false,
-                  "destination": SafeSubscriber {
-                    "_complete": undefined,
-                    "_context": [Circular],
-                    "_error": undefined,
-                    "_next": [Function],
-                    "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
-                    "closed": false,
-                    "destination": {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
+                  "destination": ConsumerObserver {
+                    "partialObserver": {
+                      "complete": undefined,
+                      "error": undefined,
                       "next": [Function],
                     },
-                    "isStopped": false,
-                    "syncErrorThrowable": false,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
                   },
+                  "initialTeardown": undefined,
                   "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
                 },
-                Subscriber {
-                  "_parentOrParents": null,
-                  "_subscriptions": [
-                    SubjectSubscription {
-                      "_parentOrParents": [Circular],
-                      "_subscriptions": null,
+                SafeSubscriber {
+                  "_finalizers": [
+                    Subscription {
+                      "_finalizers": null,
+                      "_parentage": [Circular],
                       "closed": false,
-                      "subject": [Circular],
-                      "subscriber": [Circular],
+                      "initialTeardown": [Function],
                     },
                   ],
+                  "_parentage": null,
                   "closed": false,
-                  "destination": SafeSubscriber {
-                    "_complete": undefined,
-                    "_context": [Circular],
-                    "_error": undefined,
-                    "_next": [Function],
-                    "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
-                    "closed": false,
-                    "destination": {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
+                  "destination": ConsumerObserver {
+                    "partialObserver": {
+                      "complete": undefined,
+                      "error": undefined,
                       "next": [Function],
                     },
-                    "isStopped": false,
-                    "syncErrorThrowable": false,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
                   },
+                  "initialTeardown": undefined,
                   "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
                 },
-                Subscriber {
-                  "_parentOrParents": null,
-                  "_subscriptions": [
-                    SubjectSubscription {
-                      "_parentOrParents": [Circular],
-                      "_subscriptions": null,
+                SafeSubscriber {
+                  "_finalizers": [
+                    Subscription {
+                      "_finalizers": null,
+                      "_parentage": [Circular],
                       "closed": false,
-                      "subject": [Circular],
-                      "subscriber": [Circular],
+                      "initialTeardown": [Function],
                     },
                   ],
+                  "_parentage": null,
                   "closed": false,
-                  "destination": SafeSubscriber {
-                    "_complete": undefined,
-                    "_context": [Circular],
-                    "_error": undefined,
-                    "_next": [Function],
-                    "_parentOrParents": null,
-                    "_parentSubscriber": [Circular],
-                    "_subscriptions": null,
-                    "closed": false,
-                    "destination": {
-                      "closed": true,
-                      "complete": [Function],
-                      "error": [Function],
+                  "destination": ConsumerObserver {
+                    "partialObserver": {
+                      "complete": undefined,
+                      "error": undefined,
                       "next": [Function],
                     },
-                    "isStopped": false,
-                    "syncErrorThrowable": false,
-                    "syncErrorThrown": false,
-                    "syncErrorValue": null,
                   },
+                  "initialTeardown": undefined,
                   "isStopped": false,
-                  "syncErrorThrowable": true,
-                  "syncErrorThrown": false,
-                  "syncErrorValue": null,
                 },
               ],
               "thrownError": null,

package/Components/Screen/index.tsx

@@ -6,16 +6,16 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
-  shouldNavBarDisplayMenu,
   getNavBarProps,
   getScreenId,
+  shouldNavBarDisplayMenu,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
-  useRoute,
   useCurrentScreenData,
   useNavbarState,
-  useScreenData,
   useNavigation,
+  useRoute,
+  useScreenData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
@@ -98,7 +98,7 @@ export function Screen(_props: Props) {
     <View style={style}>
       {isReady ? (
         <>
-          {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
+          {navBarProps ? <NavBar {...navBarProps} hasMenu={hasMenu} /> : null}
 
           <OfflineFallbackScreen>
             {/* @TODO RouteManager doesn't use props, can they be removed ?  */}

package/Components/Tabs/Tab.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react-native/no-unused-styles */
 import React from "react";
 import * as R from "ramda";
-import { View, Text, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from "react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 import {
-  getStyleForPlatform,
   applyStringTransformation,
+  getStyleForPlatform,
 } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
 type Props = {
@@ -148,7 +148,9 @@ const Tab = ({ title, selected, handleOnPress }: Props, ref: any) => {
           <Text numberOfLines={1} style={styles.label}>
             {tabTitle}
           </Text>
-          {selected && <View testID="underline" style={styles.underline} />}
+          {selected ? (
+            <View testID="underline" style={styles.underline} />
+          ) : null}
         </View>
       </View>
     </TouchableWithoutFeedback>

package/Components/TextInputTv/index.tsx

@@ -174,7 +174,8 @@ function TextInputTV(props: Props, ref) {
 
   return isWebPlatform ? (
     <>
-      {additional && additional()}
+      {additional ? additional() : null}
+      {/* eslint-disable-next-line react/no-unknown-property */}
       <input testID="TextInput-tv" ref={ref} {...inputProps} />
     </>
   ) : (

package/Components/Transitioner/Scene.tsx

@@ -105,7 +105,7 @@ function SceneComponent({
       style={[style, contentStyle, dimensions]}
     >
       {children}
-      {isAnimating && <Animated.View style={overlayStyle} />}
+      {isAnimating ? <Animated.View style={overlayStyle} /> : null}
     </Animated.View>
   );
 }

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 { append, compose, identity, isNil, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -289,7 +289,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
     return (
       <View style={styles.container}>
-        {scenes[to.index] && (
+        {scenes[to.index] ? (
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
@@ -301,7 +301,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           >
             {scenes[to.index].children}
           </Scene>
-        )}
+        ) : null}
       </View>
     );
   }

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -1,6 +1,7 @@
 // /// <reference types="@applicaster/applicaster-types" />
 //
 import * as React from "react";
+import { useEffect } from "react";
 
 import { AppState, AppStateStatus, View } from "react-native";
 import { TrackedView } from "../TrackedView";
@@ -25,7 +26,6 @@ import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/player
 import { getAutoplaySettings } from "./utils";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
-import { useEffect } from "react";
 
 const { log_error, log_debug } = loggerLiveImageComponent;
 
@@ -330,7 +330,7 @@ const PlayerLiveImageComponent = (props: Props) => {
       onPositionUpdated={onPositionUpdated}
     >
       <View ref={trackViewRef}>
-        {isVideoMode && (
+        {isVideoMode ? (
           <Player
             autoplay={false}
             ref={_assignRoot}
@@ -342,7 +342,7 @@ const PlayerLiveImageComponent = (props: Props) => {
             resizeMode={"cover"}
             {...platformSpecificProps}
           />
-        )}
+        ) : null}
         {
           <AnimatedInOut
             visible={isBackgroundImageVisible}

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -1,26 +1,26 @@
 import React from "react";
-import { Animated, StyleSheet, View, Platform } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
+  GestureHandlerRootView,
   NativeViewGestureHandler,
   PanGestureHandler,
   State,
   TapGestureHandler,
-  GestureHandlerRootView,
 } from "react-native-gesture-handler";
 
 import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 
 import {
-  setScrollModalAnimatedValue,
   resetScrollAnimatedValues,
+  setScrollModalAnimatedValue,
 } from "./utils";
 
 const getAnimatedConfig = (toValue) => {
@@ -71,8 +71,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     useNavigation();
 
   const { mode: videoModalMode, item: videoModalItem } = videoModalState;
-  const isMaximazedModal = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal = videoModalMode === "MINIMIZED";
+  const isMaximizedModal: boolean = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal: boolean = videoModalMode === "MINIMIZED";
   const previousItemId = usePrevious(videoModalItem?.id);
 
   const isNotMinimizeMaximazeAnimation =
@@ -84,7 +84,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
     !isSeekBarTouch &&
-    (isMaximazedModal || isMinimizedModal);
+    (isMaximizedModal || isMinimizedModal);
 
   const isAudioItem = React.useMemo(
     () =>
@@ -346,6 +346,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     []
   );
 
+  const scrollEnabled = isMaximizedModal && isNotMinimizeMaximazeAnimation;
+
   return (
     <Wrapper style={generalStyles.container}>
       <TapGestureHandler
@@ -359,7 +361,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
-            shouldCancelWhenOutside={isMaximazedModal}
+            shouldCancelWhenOutside={isMaximizedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
             activeOffsetY={[-5, 5]}
@@ -371,9 +373,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                 simultaneousHandlers={panHandlerRef}
               >
                 <Animated.ScrollView
-                  scrollEnabled={
-                    isMaximazedModal && isNotMinimizeMaximazeAnimation
-                  }
+                  scrollEnabled={scrollEnabled}
                   bounces={false}
                   onScrollBeginDrag={onRegisterLastScroll}
                   onScroll={onScroll}

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -4,26 +4,26 @@ import { Animated, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import {
+  useDimensions,
   useGetBottomTabBarHeight,
   useNavigation,
-  useDimensions,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
 
 import {
-  gestureListenerHelper,
-  getAnimationStyle,
+  AUDIO_PLAYER_HORIZONTAL_PADDING,
+  ComponentAnimationType,
   defaultAspectRatioWidth,
+  gestureListenerHelper,
   getAnimationDefaultValue,
-  ComponentAnimationType,
-  AUDIO_PLAYER_HORIZONTAL_PADDING,
+  getAnimationStyle,
 } from "./utils";
 
 type Props = {
@@ -405,7 +405,7 @@ export const AnimationView = ({
 
   return (
     <Animated.View
-      onLayout={additionalData.useLayoutMeasure && measureView}
+      onLayout={additionalData.useLayoutMeasure ? measureView : undefined}
       ref={animationComponentRef}
       style={[
         ...preparedStyles,

package/Components/VideoModal/PlayerDetails.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useRef } from "react";
 import {
-  StyleProp,
-  ViewStyle,
   Animated,
-  Easing,
   Dimensions,
+  Easing,
+  StyleProp,
+  ViewStyle,
 } 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";
@@ -94,13 +94,13 @@ export const PlayerDetails = ({
         },
       ]}
     >
-      {screenData && (
+      {screenData ? (
         <ComponentsMap
           riverId={screenData.id}
           feed={screenData?.data?.source}
           riverComponents={screenData.ui_components}
         />
-      )}
+      ) : null}
     </Animated.View>
   );
 };

package/Components/VideoModal/PlayerWrapper.tsx

@@ -227,7 +227,7 @@ const PlayerWrapperComponent = (props: Props) => {
         </View>
 
         <AnimatedScrollModal>
-          {isShowPlayerDetails && (
+          {isShowPlayerDetails ? (
             <AnimationComponent
               animationType={ComponentAnimationType.componentFade}
               style={defaultStyles.flex}
@@ -240,7 +240,7 @@ const PlayerWrapperComponent = (props: Props) => {
                 isTablet={isTablet}
               />
             </AnimationComponent>
-          )}
+          ) : null}
         </AnimatedScrollModal>
       </AnimationComponent>
     </WrapperView>

package/package.json

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