@applicaster/zapp-react-native-ui-components 14.0.0-alpha.3881160800 → 14.0.0-alpha.4009339136

package/Components/AnimatedInOut/index.tsx

@@ -4,11 +4,9 @@ import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/uti
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-type AnimatedInterpolatedStyle = any;
-
-// type AnimatedInterpolatedStyle =
-//   | Animated.AnimatedInterpolation
-//   | [{ [Key: string]: Animated.AnimatedInterpolation }];
+type AnimatedInterpolatedStyle =
+  | Animated.AnimatedInterpolation
+  | [{ [Key: string]: Animated.AnimatedInterpolation }];
 
 type AnimationConfig = {
   duration: number;

package/Components/AudioPlayer/tv/Artwork.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Image, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 const styles = StyleSheet.create({
@@ -29,7 +30,7 @@ export function Artwork({ srcImage, config }: Props) {
 
   return (
     <View style={styles.container}>
-      <Image
+      <QBImage
         fadeDuration={0}
         source={{ uri: srcImage }}
         style={[styles.image, { borderRadius }]}

package/Components/AudioPlayer/tv/Channel.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Image } from "react-native";
+import { Image } from "react-native";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   srcImage: string;
@@ -15,17 +16,16 @@ type Props = {
 const imageStyles = {
   width: 128,
   height: 72,
-};
 
-const containerStyles = {
-  ...imageStyles,
   marginBottom: 30,
 };
 
 export function Channel({ srcImage }: Props) {
+  if (isNilOrEmpty(srcImage)) {
+    return null;
+  }
+
   return (
-    <View style={containerStyles}>
-      <Image fadeDuration={0} source={{ uri: srcImage }} style={imageStyles} />
-    </View>
+    <Image fadeDuration={0} source={{ uri: srcImage }} style={imageStyles} />
   );
 }

package/Components/AudioPlayer/tv/Layout.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, ImageBackground, ViewStyle } from "react-native";
+import { ImageBackground, View, ViewStyle } from "react-native";
 
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
@@ -11,6 +11,7 @@ type Props = {
   config: {
     titleColor: string;
     summaryColor: string;
+    backgroundImageOverlay?: string;
     backgroundColor: string;
     backgroundImage: Option<string>;
     isRTL: boolean;
@@ -20,13 +21,40 @@ type Props = {
   style: ViewStyle;
 };
 
+const backgroundImgStyles = platformSelect({
+  tvos: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  android_tv: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  web: {
+    position: "absolute",
+    margin: "auto",
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%",
+    height: "100%",
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
 export function AudioPlayerTVLayout({
   artwork,
   config,
   children,
   style,
 }: Props) {
-  const { isRTL, backgroundColor, backgroundImage } = config;
+  const { backgroundColor, backgroundImage, backgroundImageOverlay, isRTL } =
+    config;
 
   const backgroundImageSource = { uri: backgroundImage };
 
@@ -34,108 +62,87 @@ export function AudioPlayerTVLayout({
     ? "transparent"
     : backgroundColor;
 
-  const mainContainerStyles = platformSelect({
+  const textContainerStyles = platformSelect({
     tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
       justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
+      alignItems: directionStyles(isRTL).justifyContent,
     },
     android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
       justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
+      alignItems: directionStyles(isRTL).justifyContent,
     },
     web: {
-      width: 1920,
-      height: 1080,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    native: {
-      backgroundColor: backgroundColorStyle,
-      overflow: "hidden",
-      ...style,
-    },
-    samsung_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
-    },
-    lg_tv: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100vw",
-      flex: 1,
-      alignItems: "center",
       justifyContent: "center",
-      flexDirection: directionStyles(isRTL).flexDirection,
-      backgroundColor: backgroundColorStyle,
+      alignItems: directionStyles(isRTL).justifyContent,
     },
   });
 
-  const backgroundImgStyles = platformSelect({
-    tvos: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    android_tv: {
-      width: "100%",
-      height: "100%",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    web: {
-      position: "absolute",
-      margin: "auto",
-      display: "flex",
-      flexWrap: "wrap",
-      width: "100%",
-      height: "100%",
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-  });
+  const mainContainerStyles = React.useMemo(
+    () =>
+      platformSelect({
+        tvos: {
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        android_tv: {
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        web: {
+          width: 1920,
+          height: 1080,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        native: {
+          backgroundColor: backgroundColorStyle,
+          overflow: "hidden",
+          ...style,
+        },
+        samsung_tv: {
+          position: "absolute",
+          margin: "auto",
+          display: "flex",
+          flexWrap: "wrap",
+          height: "100vh",
+          width: "100vw",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+        lg_tv: {
+          position: "absolute",
+          margin: "auto",
+          display: "flex",
+          flexWrap: "wrap",
+          height: "100vh",
+          width: "100vw",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: directionStyles(isRTL).flexDirection,
+          backgroundColor: backgroundColorStyle,
+        },
+      }),
+    [backgroundColorStyle, isRTL, style]
+  );
 
-  const textContainerStyles = platformSelect({
-    tvos: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    android_tv: {
-      width: 600,
-      height: 362,
-      marginHorizontal: 24,
-      alignItems: directionStyles(isRTL).justifyContent,
-    },
-    web: {
-      margin: 10,
-      height: "100vh",
-      alignItems: directionStyles(isRTL).justifyContent,
-      justifyContent: "center",
-    },
-  });
+  const backgroundOverlayStyles = React.useMemo(
+    () => ({
+      backgroundColor: backgroundImageOverlay,
+    }),
+    [backgroundImageOverlay]
+  );
 
   if (backgroundImage) {
     return (
@@ -144,7 +151,7 @@ export function AudioPlayerTVLayout({
         style={backgroundImgStyles}
         resizeMode="cover"
       >
-        <View style={mainContainerStyles}>
+        <View style={[mainContainerStyles, backgroundOverlayStyles]}>
           <Artwork srcImage={artwork} config={config} />
           <View style={textContainerStyles}>{children}</View>
         </View>

package/Components/AudioPlayer/tv/Runtime.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { View, Text, ViewStyle, TextStyle } from "react-native";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { directionStyles } from "./helpers";
 
 type Props = {
@@ -19,7 +21,6 @@ type Props = {
 
 const containerStyles = ({ isRTL }) => ({
   width: 600,
-  height: 40,
   justifyContent: directionStyles(isRTL)
     .justifyContent as ViewStyle["justifyContent"],
 });
@@ -38,11 +39,16 @@ const textStyles = ({
 });
 
 export function Runtime({ start_time, end_time, config }: Props) {
+  if (isNilOrEmpty(start_time) && isNilOrEmpty(end_time)) {
+    return null;
+  }
+
   return (
     <View style={containerStyles({ isRTL: config.isRTL })}>
       {!!start_time && !!end_time && (
         <Text
           style={textStyles(config) as TextStyle}
+          numberOfLines={1}
         >{`${start_time} - ${end_time}`}</Text>
       )}
     </View>

package/Components/AudioPlayer/tv/Summary.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, TextStyle, StyleSheet } from "react-native";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   config: {
@@ -18,7 +19,6 @@ type Props = {
 const styles = StyleSheet.create({
   container: {
     width: 600,
-    height: 80,
     marginBottom: 30,
   },
 });
@@ -38,9 +38,13 @@ const textStyles = ({
 });
 
 export function Summary({ summary, config }: Props) {
+  if (isNilOrEmpty(summary)) {
+    return null;
+  }
+
   return (
     <View style={styles.container}>
-      <Text style={textStyles(config)} numberOfLines={2}>
+      <Text style={textStyles(config)} numberOfLines={3}>
         {summary}
       </Text>
     </View>

package/Components/AudioPlayer/tv/Title.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, TextStyle, StyleSheet } from "react-native";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   config: {
@@ -18,7 +19,6 @@ type Props = {
 const styles = StyleSheet.create({
   container: {
     width: 600,
-    height: 100,
     marginBottom: 12,
   },
 });
@@ -32,9 +32,13 @@ const textStyles = ({ titleColor, isRTL, titleFontFamily, titleFontSize }) => ({
 });
 
 export function Title({ title, config }: Props) {
+  if (isNilOrEmpty(title)) {
+    return null;
+  }
+
   return (
     <View style={styles.container}>
-      <Text style={textStyles(config)} numberOfLines={2}>
+      <Text style={textStyles(config)} numberOfLines={3}>
         {title}
       </Text>
     </View>

package/Components/AudioPlayer/tv/__tests__/__snapshots__/Runtime.test.js.snap

@@ -4,13 +4,13 @@ exports[`<Runtime /> LTR renders correctly 1`] = `
 <View
   style={
     {
-      "height": 40,
       "justifyContent": "flex-start",
       "width": 600,
     }
   }
 >
   <Text
+    numberOfLines={1}
     style={
       {
         "alignItems": "flex-end",
@@ -33,13 +33,13 @@ exports[`<Runtime /> RTL renders correctly 1`] = `
 <View
   style={
     {
-      "height": 40,
       "justifyContent": "flex-end",
       "width": 600,
     }
   }
 >
   <Text
+    numberOfLines={1}
     style={
       {
         "alignItems": "flex-start",

package/Components/AudioPlayer/tv/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -30,10 +30,15 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
   />
   <View
     style={
-      {
-        "backgroundColor": "transparent",
-        "overflow": "hidden",
-      }
+      [
+        {
+          "backgroundColor": "transparent",
+          "overflow": "hidden",
+        },
+        {
+          "backgroundColor": undefined,
+        },
+      ]
     }
   >
     <View
@@ -65,7 +70,13 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
       />
     </View>
     <View>
-      <View
+      <Image
+        fadeDuration={0}
+        source={
+          {
+            "uri": "https://example.com",
+          }
+        }
         style={
           {
             "height": 72,
@@ -73,33 +84,17 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
             "width": 128,
           }
         }
-      >
-        <Image
-          fadeDuration={0}
-          source={
-            {
-              "uri": "https://example.com",
-            }
-          }
-          style={
-            {
-              "height": 72,
-              "width": 128,
-            }
-          }
-        />
-      </View>
+      />
       <View
         style={
           {
-            "height": 100,
             "marginBottom": 12,
             "width": 600,
           }
         }
       >
         <Text
-          numberOfLines={2}
+          numberOfLines={3}
           style={
             {
               "color": "white",
@@ -116,14 +111,13 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
       <View
         style={
           {
-            "height": 80,
             "marginBottom": 30,
             "width": 600,
           }
         }
       >
         <Text
-          numberOfLines={2}
+          numberOfLines={3}
           style={
             {
               "color": "white",
@@ -141,13 +135,13 @@ exports[`<AudioPlayerTV /> renders correctly 1`] = `
       <View
         style={
           {
-            "height": 40,
             "justifyContent": "flex-end",
             "width": 600,
           }
         }
       >
         <Text
+          numberOfLines={1}
           style={
             {
               "alignItems": "flex-start",

package/Components/AudioPlayer/tv/__tests__/__snapshots__/channel.test.js.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Channel /> renders correctly 1`] = `
-<View
+<Image
+  fadeDuration={0}
+  source={
+    {
+      "uri": "https://example.com",
+    }
+  }
   style={
     {
       "height": 72,
@@ -9,20 +15,5 @@ exports[`<Channel /> renders correctly 1`] = `
       "width": 128,
     }
   }
->
-  <Image
-    fadeDuration={0}
-    source={
-      {
-        "uri": "https://example.com",
-      }
-    }
-    style={
-      {
-        "height": 72,
-        "width": 128,
-      }
-    }
-  />
-</View>
+/>
 `;

package/Components/AudioPlayer/tv/__tests__/__snapshots__/summary.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Summary /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 80,
       "marginBottom": 30,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

package/Components/AudioPlayer/tv/__tests__/__snapshots__/title.test.js.snap

@@ -4,14 +4,13 @@ exports[`<Title /> renders correctly 1`] = `
 <View
   style={
     {
-      "height": 100,
       "marginBottom": 12,
       "width": 600,
     }
   }
 >
   <Text
-    numberOfLines={2}
+    numberOfLines={3}
     style={
       {
         "color": "white",

package/Components/AudioPlayer/tv/index.tsx

@@ -35,6 +35,11 @@ export function AudioPlayerTV(props: Props) {
     const backgroundImage = getProp("audio_player_background_image");
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
+
+    const backgroundImageOverlay = getProp(
+      "audio_player_background_image_overlay"
+    );
+
     const artworkBorderRadius = getProp("audio_player_artwork_border_radius");
 
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
@@ -113,6 +118,7 @@ export function AudioPlayerTV(props: Props) {
       runTimeFontSize,
       channelIcon,
       artworkBorderRadius,
+      backgroundImageOverlay,
     };
   }, [getProp]);
 

package/Components/Focusable/FocusableTvOS.tsx

@@ -16,9 +16,9 @@ function noop() {}
 type Props = {
   id: string;
   groupId: string;
-  onPress?: (nativeEvent: any) => void;
-  onFocus?: (nativeEvent: any) => void;
-  onBlur?: (nativeEvent: any) => void;
+  onPress?: (nativeEvent: React.SyntheticEvent) => void;
+  onFocus?: (nativeEvent: React.SyntheticEvent) => void;
+  onBlur?: (nativeEvent: React.SyntheticEvent) => void;
   children: (focused?: boolean) => React.ReactNode;
   isParallaxDisabled: boolean;
   preferredFocus?: boolean;

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -13,7 +13,6 @@ import {
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
-import { ViewStyle } from "react-native";
 
 type Props = {
   item: ZappEntry;
@@ -141,19 +140,14 @@ export function HandlePlayable({
   const modalSize = useModalSize();
 
   const style = React.useMemo(
-    () =>
-      ({
-        width: isModal
-          ? modalSize.width
-          : mode === "PIP"
-            ? "100%"
-            : screenWidth,
-        height: isModal
-          ? modalSize.height
-          : mode === "PIP"
-            ? "100%"
-            : screenHeight,
-      }) as ViewStyle,
+    () => ({
+      width: isModal ? modalSize.width : mode === "PIP" ? "100%" : screenWidth,
+      height: isModal
+        ? modalSize.height
+        : mode === "PIP"
+          ? "100%"
+          : screenHeight,
+    }),
     [screenWidth, screenHeight, modalSize, isModal, mode]
   );
 

package/Components/MasterCell/elementMapper.tsx

@@ -73,6 +73,7 @@ export function elementMapper(
       : {};
 
     const componentProps = {
+      key,
       style,
       skipButtons: otherProps?.skipButtons,
       emitAsyncElementRegistrate: otherProps?.emitAsyncElementRegistrate,
@@ -90,7 +91,7 @@ export function elementMapper(
     const fn = mapElementWithKey(elementMapper(components, otherProps));
 
     return (
-      <Component key={key} {...componentProps}>
+      <Component {...componentProps}>
         {focusableTypes.has(type) && elements.length > 0
           ? elements.map(fn)
           : null}

package/Components/MasterCell/index.tsx

@@ -86,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
+      [state, item, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/OfflineHandler/NotificationView/__tests__/index.test.tsx

@@ -1,12 +1,9 @@
 import React from "react";
 import { Text, Animated } from "react-native";
-import { render } from "@testing-library/react-native";
 
-import {
-  NotificationView,
-  onlinePhrase,
-  offlinePhrase,
-} from "../NotificationView";
+import renderer from "react-test-renderer";
+
+jest.useFakeTimers();
 
 jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
   usePickFromState: () => ({
@@ -35,31 +32,39 @@ jest.mock("react-native-safe-area-context", () => ({
 
 const dismiss = jest.fn();
 
+const {
+  NotificationView,
+  onlinePhrase,
+  offlinePhrase,
+} = require("../NotificationView");
+
 describe("NotificationView", () => {
   it("Show online message when Online", () => {
-    const component = render(<NotificationView online dismiss={dismiss} />);
+    const component = renderer.create(
+      <NotificationView online dismiss={dismiss} />
+    );
 
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(onlinePhrase);
+    expect(component.root.findByType(Text).props.children).toBe(onlinePhrase);
   });
 
   it("Show offline message when Online", () => {
-    const component = render(
+    const component = renderer.create(
       <NotificationView online={false} dismiss={dismiss} />
     );
 
-    expect(component.UNSAFE_getByType(Text).props.children).toBe(offlinePhrase);
+    expect(component.root.findByType(Text).props.children).toBe(offlinePhrase);
   });
 
   it("When hidden is false to true notification is visible", () => {
-    const component = render(
+    const component = renderer.create(
       <NotificationView online={false} hidden={false} dismiss={dismiss} />
     );
 
-    component.rerender(
+    component.update(
       <NotificationView online={false} hidden={true} dismiss={dismiss} />
     );
 
-    const animatedView = component.UNSAFE_getByType(Animated.View);
+    const animatedView = component.root.findByType(Animated.View);
     const animatedViewStyles = animatedView.props.style;
 
     expect(animatedViewStyles.opacity).toBe(1);

package/Components/OfflineHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -21,15 +21,6 @@ exports[`OfflineHandler renders 1`] = `
     }
   >
     <View
-      accessibilityState={
-        {
-          "busy": undefined,
-          "checked": undefined,
-          "disabled": undefined,
-          "expanded": undefined,
-          "selected": undefined,
-        }
-      }
       accessible={true}
       collapsable={false}
       focusable={true}

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -627,7 +627,7 @@ const PlayerContainerComponent = (props: Props) => {
         <PlayerContainerContext.Consumer>
           {(context) => (
             <TVEventHandlerComponent
-              tvEventHandler={(event) =>
+              tvEventHandler={(_component, event) =>
                 playerRemoteHandler(event, context.isLanguageOverlayVisible)
               }
             >

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -286,6 +286,7 @@ function ComponentsMapComponent(props: Props) {
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
+            listKey={riverId}
             keyExtractor={keyExtractor}
             renderItem={renderRiverItem}
             data={riverComponents}

package/Components/River/TV/withTVEventHandler.tsx

@@ -8,7 +8,7 @@ export const withTvEventHandler = (Component) => {
   return function WithTVEventHandler(props) {
     const navigator = useNavigation();
 
-    const remoteHandler = (event) => {
+    const remoteHandler = (_, event) => {
       const { eventType } = event;
 
       const canGoBack = navigator.canGoBack();

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

@@ -159,7 +159,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     >
       <View>
         <View
-          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >
@@ -175,7 +174,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           </View>
         </View>
         <View
-          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >

package/Components/Touchable/__tests__/__snapshots__/touchable.test.tsx.snap

@@ -3,23 +3,6 @@
 exports[`<Touchable /> when not running in automated tests environment renders correctly 1`] = `
 <View
   accessibilityLabel="some-test-id"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -46,23 +29,6 @@ exports[`<Touchable /> when not running in automated tests environment renders c
 exports[`<Touchable /> when running in automated tests environment has accessible flag set to false 1`] = `
 <View
   accessibilityLabel="some-test-id"
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
   accessible={false}
   collapsable={false}
   focusable={true}

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

@@ -6,21 +6,15 @@ exports[`<Scene /> renders correctly 1`] = `
     collapsable={false}
     pointerEvents="auto"
     style={
-      [
-        {
-          "flex": 1,
-        },
-        {
-          "paddingBottom": 49,
-        },
-        {
-          "fontScale": 2,
-          "height": 1334,
-          "scale": 2,
-          "statusBarHeight": null,
-          "width": 750,
-        },
-      ]
+      {
+        "flex": 1,
+        "fontScale": 2,
+        "height": 1334,
+        "paddingBottom": 49,
+        "scale": 2,
+        "statusBarHeight": null,
+        "width": 750,
+      }
     }
   />
 </View>

package/Components/VideoLive/animationUtils.ts

@@ -1,8 +1,8 @@
 import { Animated, Easing, EasingFunction, StyleProp } from "react-native";
 
 type AnimatedInterpolatedStyle =
-  | Animated.AnimatedInterpolation<number>
-  | [{ [Key: string]: Animated.AnimatedInterpolation<number> }];
+  | Animated.AnimatedInterpolation
+  | [{ [Key: string]: Animated.AnimatedInterpolation }];
 
 type AnimationConfig = {
   duration: number;
@@ -31,7 +31,7 @@ const interpolate = (
   animatedValue: Animated.Value,
   from: number = 0,
   to: number = 1
-): Animated.AnimatedInterpolation<number> =>
+): Animated.AnimatedInterpolation =>
   animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [from, to],

package/Components/Viewport/ViewportAware/__tests__/viewportAware.test.js

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 
-import { act, render } from "@testing-library/react-native";
+import { act, create as render } from "react-test-renderer";
 
 import { ViewportAware } from "../";
 import { ViewportTracker } from "../../ViewportTracker";
@@ -12,17 +12,21 @@ import ReactNative from "react-native";
 
 jest.useFakeTimers();
 
-const { ScrollView } = ReactNative;
-
-jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
+jest.mock("react-native/Libraries/ReactNative/UIManager", () => {
+  return {
+    ...jest.requireActual("react-native/Libraries/ReactNative/NativeUIManager"),
+    measureLayout: (handle, parent, error, success) => {
+      success(100, 100, 400, 400);
+    },
+  };
+});
 
-ReactNative.UIManager.measureLayout = jest.fn(
-  (handle, parent, error, success) => {
-    success(100, 100, 400, 400);
-  }
-);
+jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
+  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
+  findNodeHandle: () => 1234,
+}));
 
-ReactNative.findNodeHandle = () => 1234;
+const { ScrollView } = ReactNative;
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -134,7 +138,7 @@ describe("<ViewportAware />", () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(onViewportEnter).toHaveBeenCalled();
 
-    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
+    const scrollviews = wrapper.root.findAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);
 
@@ -175,7 +179,7 @@ describe("<ViewportAware />", () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
 
-    const scrollviews = wrapper.UNSAFE_getAllByType(ScrollView);
+    const scrollviews = wrapper.root.findAllByType(ScrollView);
     expect(scrollviews).toBeArray();
     expect(scrollviews).toHaveProperty("length", 2);
 

package/Components/Viewport/ViewportTracker/__tests__/viewportTracker.test.js

@@ -1,19 +1,14 @@
 import * as React from "react";
-import { act, render } from "@testing-library/react-native";
+import { ScrollView } from "react-native";
+import TestRenderer, { act } from "react-test-renderer";
 import { ViewportEvents } from "../../ViewportEvents";
-import ReactNative from "react-native";
-
-const { ScrollView } = ReactNative;
 
 const TestComponent = () => <ScrollView />;
 
-jest.spyOn(ReactNative, "findNodeHandle").mockImplementation(() => 1234);
-
-ReactNative.UIManager.measureLayout = jest.fn(
-  (handle, parent, error, success) => {
-    success(100, 100, 400, 400);
-  }
-);
+jest.mock("react-native/Libraries/Renderer/shims/ReactNative", () => ({
+  ...jest.requireActual("react-native/Libraries/Renderer/shims/ReactNative"),
+  findNodeHandle: () => 1234,
+}));
 
 const viewportEventsManager = new ViewportEvents(true);
 
@@ -28,49 +23,32 @@ const event = {
 };
 
 describe("<ViewportTracker />", () => {
+  // eslint-disable-next-line react/prop-types
+  const ReactWrapper = ({ children }) => (
+    <ViewportTracker viewportEventsManager={viewportEventsManager}>
+      <ScrollView>{children}</ScrollView>
+    </ViewportTracker>
+  );
+
+  const wrapper = TestRenderer.create(
+    <ReactWrapper>
+      <TestComponent />
+    </ReactWrapper>
+  );
+
+  const scrollView = wrapper.root.findByType(ScrollView);
+
   beforeEach(() => {
     viewportEventSpy.mockClear();
   });
 
   it("renders correctly", () => {
-    // eslint-disable-next-line react/prop-types
-    const ReactWrapper = ({ children }) => (
-      <ViewportTracker viewportEventsManager={viewportEventsManager}>
-        <ScrollView>{children}</ScrollView>
-      </ViewportTracker>
-    );
-
-    const wrapper = render(
-      <ReactWrapper>
-        <TestComponent />
-      </ReactWrapper>
-    );
-
-    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
-
     expect(wrapper.toJSON()).toMatchSnapshot();
     expect(scrollView.props).toMatchSnapshot();
   });
 
   it("notifies viewport listeners when layout changes", () => {
-    // eslint-disable-next-line react/prop-types
-    const ReactWrapper = ({ children }) => (
-      <ViewportTracker viewportEventsManager={viewportEventsManager}>
-        <ScrollView>{children}</ScrollView>
-      </ViewportTracker>
-    );
-
-    const wrapper = render(
-      <ReactWrapper>
-        <TestComponent />
-      </ReactWrapper>
-    );
-
-    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
-
-    act(() => {
-      scrollView.props.onLayout(event);
-    });
+    act(() => scrollView.props.onLayout(event));
 
     expect(viewportEventSpy).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -85,50 +63,12 @@ describe("<ViewportTracker />", () => {
   });
 
   it("notifies viewport listeners when content scrolls", () => {
-    // eslint-disable-next-line react/prop-types
-    const ReactWrapper = ({ children }) => (
-      <ViewportTracker viewportEventsManager={viewportEventsManager}>
-        <ScrollView>{children}</ScrollView>
-      </ViewportTracker>
-    );
-
-    const wrapper = render(
-      <ReactWrapper>
-        <TestComponent />
-      </ReactWrapper>
-    );
-
-    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
-
-    act(() => {
-      scrollView.props.onLayout(event);
-      scrollView.props.onScroll(event);
-    });
-
+    act(() => scrollView.props.onScroll(event));
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 
   it("notifies viewport listeners when content size changes", () => {
-    // eslint-disable-next-line react/prop-types
-    const ReactWrapper = ({ children }) => (
-      <ViewportTracker viewportEventsManager={viewportEventsManager}>
-        <ScrollView>{children}</ScrollView>
-      </ViewportTracker>
-    );
-
-    const wrapper = render(
-      <ReactWrapper>
-        <TestComponent />
-      </ReactWrapper>
-    );
-
-    const scrollView = wrapper.UNSAFE_getByType(ScrollView);
-
-    act(() => {
-      scrollView.props.onLayout(event);
-      scrollView.props.onContentSizeChange(100, 100);
-    });
-
+    act(() => scrollView.props.onContentSizeChange(100, 100));
     expect(viewportEventSpy).toHaveBeenCalled();
   });
 });

package/Decorators/ConfigurationWrapper/withConfigurationProvider.tsx

@@ -21,13 +21,13 @@ const prepareConfiguration = (
   keys: [string]
 ) => R.compose(R.evolve(keysMap), R.pickAll(keys))(configuration);
 
-const configurationKeys = R.keys(keysMap);
-
 export function withConfigurationProvider(Component: React.ComponentType<any>) {
   return function WithConfigurationProvider(props: Props) {
     const styles = props?.screenData?.styles;
     const general = props?.screenData?.general;
 
+    const configurationKeys = React.useMemo(() => R.keys(keysMap), []);
+
     const configuration = React.useMemo(
       () => prepareConfiguration({ ...general, ...styles }, configurationKeys),
       []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-alpha.3881160800",
+  "version": "14.0.0-alpha.4009339136",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.3881160800",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.3881160800",
-    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.3881160800",
-    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.3881160800",
+    "@applicaster/applicaster-types": "14.0.0-alpha.4009339136",
+    "@applicaster/zapp-react-native-bridge": "14.0.0-alpha.4009339136",
+    "@applicaster/zapp-react-native-redux": "14.0.0-alpha.4009339136",
+    "@applicaster/zapp-react-native-utils": "14.0.0-alpha.4009339136",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
@@ -45,6 +45,7 @@
     "immer": "*",
     "react": "*",
     "react-native": "*",
+    "react-native-safe-area-context": "*",
     "react-native-svg": "*",
     "uglify-js": "*",
     "validate-color": "*",