@applicaster/zapp-react-native-ui-components 13.0.0-alpha.1244047241 → 13.0.0-alpha.1290120403

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -22,6 +22,7 @@ type Props = {
       audio_player_title_color?: string;
       audio_player_summary_color?: string;
       audio_player_rtl?: boolean;
+      audio_player_background_image_query?: string;
       audio_player_background_image_default_color?: string;
       start_time?: string;
       end_time?: string;
@@ -32,6 +33,7 @@ type Props = {
     audio_player_title_color?: string;
     audio_player_summary_color?: string;
     audio_player_rtl?: string;
+    audio_player_background_image_query?: string;
     audio_player_background_image_default_color?: string;
     audio_player_background_image?: string;
     audio_player_artwork_aspect_ratio?: string;
@@ -73,6 +75,10 @@ export function AudioPlayer(props: Props) {
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
 
+    const audioPlayerBackgroundImageQuery = getProp(
+      "audio_player_background_image_query"
+    );
+
     const audioPlayerBackgroundImageDefaultColor = getProp(
       "audio_player_background_image_default_color"
     );
@@ -153,6 +159,7 @@ export function AudioPlayer(props: Props) {
       runTimeFontSize,
       artworkAspectRatio,
       channelIcon,
+      audioPlayerBackgroundImageQuery,
       audioPlayerBackgroundImageDefaultColor,
     };
   }, [getProp]);

package/Components/AudioPlayer/helpers.tsx

@@ -4,6 +4,7 @@ const defaults = {
   audio_player_background_color: "black",
   audio_player_artwork_aspect_ratio: "1:1",
   audio_player_rtl: false,
+  audio_player_background_image_query: "",
   audio_player_background_image_default_color: "",
 };
 

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, ScrollView, Platform } from "react-native";
+import { View, ScrollView, StyleSheet, Platform } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
@@ -39,6 +39,12 @@ type ModalComponentProps = {
   iconPlacement?: "left" | "right";
 };
 
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: "100%",
+  },
+});
+
 export function BottomSheetModalContent(props: ModalComponentProps) {
   const {
     items,
@@ -90,10 +96,12 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
 
   return (
     <View
-      style={{
-        maxHeight: props.maxHeight,
-        paddingTop: paddingTop,
-      }}
+      style={[
+        styles.container,
+        {
+          paddingTop: paddingTop,
+        },
+      ]}
     >
       <ModalHeader
         dismiss={dismiss}
@@ -104,7 +112,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
       <ScrollView
         contentContainerStyle={{
           paddingBottom:
-            paddingBottom + (Platform.OS === "ios" ? bottomInset : 0),
+            Platform.OS === "ios" ? paddingBottom + bottomInset : paddingBottom,
         }}
       >
         {items.map((item, index) => (

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/AnimatedScrollModal.tsx

@@ -329,14 +329,6 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     }
   }, [playerAnimationState]);
 
-  React.useEffect(() => {
-    setScrollModalAnimatedValue(
-      translateYOffset,
-      modalSnapPoints[1],
-      setLastSnap
-    );
-  }, [modalSnapPoints[1]]);
-
   React.useEffect(() => {
     const lastScrollYListenerId = lastScrollY.addListener(({ value }) => {
       lastScrollYValue.current = value;

package/package.json

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