@applicaster/zapp-react-native-ui-components 13.0.0-alpha.3003916059 → 13.0.0-alpha.3013095924

package/Components/AudioPlayer/AudioPlayerLayout.tsx

@@ -32,7 +32,7 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
 
   const { isRTL, backgroundColor, backgroundImage } = config;
 
-  const backgroundImageSource = { uri: backgroundImage };
+  const backgroundImg = { uri: backgroundImage };
 
   const backgroundColorStyle = backgroundImage
     ? "transparent"
@@ -103,8 +103,9 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
       justifyContent: "center",
     },
     android_tv: {
-      width: "100%",
-      height: "100%",
+      position: "absolute",
+      width: 1920,
+      height: 1080,
       alignItems: "center",
       justifyContent: "center",
     },
@@ -145,9 +146,9 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
     },
   });
 
-  const audioPlayerLayoutTV = backgroundImageSource?.uri ? (
+  const audioPlayerLayoutTV = backgroundImg?.uri ? (
     <ImageBackground
-      source={backgroundImageSource}
+      source={backgroundImg}
       style={backgroundImgStyles}
       resizeMode="cover"
     >
@@ -177,7 +178,7 @@ export function AudioPlayerLayout({ artwork, config, children, style }: Props) {
           ]}
         >
           <ImageBackground
-            source={backgroundImageSource}
+            source={backgroundImg}
             style={backgroundImgStyles}
             resizeMode="cover"
           >

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, ScrollView } from "react-native";
+import { View, ScrollView, Platform } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
@@ -9,7 +9,7 @@ import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 import type { PluginConfiguration } from "./";
 
-import { ModalHeader as DefaultModalHeader } from "./Header";
+import { ModalHeader } from "./Header";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type ModalComponentProps = {
@@ -22,7 +22,6 @@ type ModalComponentProps = {
   title?: string;
   maxHeight?: number;
   dismiss: () => void;
-  headerComponent?: React.ComponentType;
   buttonComponent?: React.ComponentType;
   iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
   itemProps?:
@@ -49,11 +48,9 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent: ModalHeader = DefaultModalHeader,
     buttonComponent: ButtonComponent = Button,
-    getSelectedItemIcon = ({
-      modal_bottom_sheet_item_selected_icon,
-    }: BaseThemePropertiesMobile) => modal_bottom_sheet_item_selected_icon,
+    getSelectedItemIcon = (theme) =>
+      theme.modal_bottom_sheet_item_selected_icon,
     getDefaultItemIcon = () => null,
     iconPlacement,
   } = props;
@@ -106,27 +103,26 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
       />
       <ScrollView
         contentContainerStyle={{
-          paddingBottom: paddingBottom + bottomInset,
+          paddingBottom:
+            paddingBottom + (Platform.OS === "ios" ? bottomInset : 0),
         }}
       >
-        {items.map((item, index) =>
-          item ? (
-            <ButtonComponent
-              key={index}
-              configuration={theme}
-              selectedItem={current_selection}
-              item={item}
-              onPress={handlePress}
-              label={theme[item?.label] ?? item?.label}
-              iconBaseProps={iconBaseProps}
-              itemBaseProps={itemBaseProps}
-              labelBaseProps={labelBaseProps}
-              selectedItemIcon={getSelectedItemIcon(theme)}
-              defaultItemIcon={getDefaultItemIcon(theme)}
-              iconPlacement={iconPlacement}
-            />
-          ) : null
-        )}
+        {items.map((item, index) => (
+          <ButtonComponent
+            key={index}
+            configuration={theme}
+            selectedItem={current_selection}
+            item={item}
+            onPress={handlePress}
+            label={theme[item?.label] ?? item?.label}
+            iconBaseProps={iconBaseProps}
+            itemBaseProps={itemBaseProps}
+            labelBaseProps={labelBaseProps}
+            selectedItemIcon={getSelectedItemIcon(theme)}
+            defaultItemIcon={getDefaultItemIcon(theme)}
+            iconPlacement={iconPlacement}
+          />
+        ))}
       </ScrollView>
     </View>
   );

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, FlatList } from "react-native";
+import { View, StyleSheet, Platform, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -24,10 +24,6 @@ import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-com
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useShallow } from "zustand/react/shallow";
 
-import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-const isAndroid = isAndroidPlatform();
-
 type Props = {
   feed: ZappFeed;
   groupId?: string;
@@ -277,12 +273,12 @@ function ComponentsMapComponent(props: Props) {
             }}
             // Fix for WebView rerender crashes on Android API 28+
             // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-            overScrollMode={isAndroid ? "never" : "auto"}
+            overScrollMode={Platform.OS === "android" ? "never" : "auto"}
             scrollIndicatorInsets={scrollIndicatorInsets}
             extraData={feed}
             stickyHeaderIndices={stickyHeaderIndices}
             onLayout={handleOnLayout}
-            removeClippedSubviews={isAndroid}
+            removeClippedSubviews
             initialNumToRender={3}
             maxToRenderPerBatch={10}
             windowSize={12}
@@ -303,10 +299,6 @@ function ComponentsMapComponent(props: Props) {
             onMomentumScrollEnd={_onMomentumScrollEnd}
             onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}
-            maintainVisibleContentPosition={{
-              minIndexForVisible: 0,
-              autoscrollToTopThreshold: 10,
-            }}
             {...scrollViewExtraProps}
           />
         </ViewportTracker>

package/Components/River/RiverItem.tsx

@@ -48,20 +48,16 @@ const useLoadingState = (
   loadingState: RiverItemType["loadingState"]
 ) => {
   const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
-    loadingState.getValue().index + 1 >= currentIndex
+    loadingState.getValue().index + 1 === currentIndex
   );
 
   useEffect(() => {
     const subscription = loadingState.subscribe(({ index }) => {
-      if (index + 1 >= currentIndex) {
+      if (index + 1 === currentIndex) {
         setReadyToBeDisplayed(true);
       }
     });
 
-    if (loadingState.getValue().index + 1 >= currentIndex) {
-      setReadyToBeDisplayed(true);
-    }
-
     return () => {
       subscription.unsubscribe();
     };

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

@@ -135,12 +135,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       getItemCount={[Function]}
       initialNumToRender={3}
       keyExtractor={[Function]}
-      maintainVisibleContentPosition={
-        {
-          "autoscrollToTopThreshold": 10,
-          "minIndexForVisible": 0,
-        }
-      }
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
       onLayout={[Function]}
@@ -151,7 +145,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       onScrollEndDrag={[Function]}
       overScrollMode="auto"
       refreshControl={null}
-      removeClippedSubviews={false}
+      removeClippedSubviews={true}
       renderItem={[Function]}
       scrollEventThrottle={16}
       scrollIndicatorInsets={

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -17,7 +17,6 @@ export enum PlayerAnimationStateEnum {
   maximize = "maximize",
   drag_player = "drag_player",
   drag_scroll = "drag_scroll",
-  appear_as_docked = "appear_as_docked",
 }
 
 export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;

package/package.json

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