@applicaster/zapp-react-native-ui-components 12.0.0-rc.55 → 12.0.0-rc.57

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -51,9 +51,7 @@ export const CollapsibleTextContainer = ({
         func: (data) => {
           return getColorFromData({
             data,
-            getValue,
-            key: "background_color",
-            defaultColor: additionalStyles.backgroundColor,
+            valueFromLayout: additionalStyles.backgroundColor,
           });
         },
         propName: "backgroundColor",

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -671,6 +671,7 @@ const PlayerContainerComponent = (props: Props) => {
                         setNextVideoPreloadThresholdPercentage={
                           setNextVideoPreloadThresholdPercentage
                         }
+                        startComponentsAnimation={startComponentsAnimation}
                       >
                         {renderApplePlayer(applePlayerProps)}
                       </Player>

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, StyleSheet, Platform, Animated, 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";
@@ -217,7 +217,7 @@ function ComponentsMapComponent(props: Props) {
 
     const { height: headerHeight, scrollState } = navBarStore.getState();
 
-    const offsetY = nativeEvent.contentOffset.y;
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
     if (
       !(scrollState === 0 || scrollState === -headerHeight) &&
@@ -240,7 +240,7 @@ function ComponentsMapComponent(props: Props) {
   const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
     const { height: headerHeight, scrollState } = navBarStore.getState();
 
-    const offsetY = nativeEvent.contentOffset.y;
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
     if (
       !(scrollState === 0 || scrollState === -headerHeight) &&
@@ -260,6 +260,20 @@ function ComponentsMapComponent(props: Props) {
     }
   }, []);
 
+  const onScroll = React.useCallback((event) => {
+    const {
+      nativeEvent: {
+        contentOffset: { y },
+        layoutMeasurement: { height },
+        contentSize: { height: contentHeight },
+      },
+    } = event;
+
+    if (y >= 0 && y + height <= contentHeight) {
+      scrollY.setValue(y);
+    }
+  }, []);
+
   if (shouldShowLoadingError) {
     return <RiverError />;
   }
@@ -298,20 +312,7 @@ function ComponentsMapComponent(props: Props) {
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
             onScrollBeginDrag={onScrollBeginDrag}
-            onScroll={Animated.event(
-              [
-                {
-                  nativeEvent: {
-                    contentOffset: {
-                      y: scrollY,
-                    },
-                  },
-                },
-              ],
-              {
-                useNativeDriver: false,
-              }
-            )}
+            onScroll={onScroll}
             onMomentumScrollEnd={_onMomentumScrollEnd}
             onScrollEndDrag={_onScrollEndDrag}
             scrollEventThrottle={16}

package/Components/River/RefreshControl.tsx

@@ -1,5 +1,9 @@
 import * as React from "react";
-import { RefreshControl as RNRefreshControl } from "react-native";
+import {
+  Platform,
+  RefreshControl as RNRefreshControl,
+  StyleSheet,
+} from "react-native";
 import * as R from "ramda";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
@@ -8,10 +12,30 @@ import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-nativ
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useDispatch } from "react-redux";
+import { useShallow } from "zustand/react/shallow";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
 const BELOW_DEFAULT_COLOR = "white";
+const BASE_INDICATOR_HEIGHT = 40;
+const BASE_INDICATOR_OFFSET = 16;
+
+/** Return spacing required to position indicator below the navbar bottom line (Android only) */
+const getRefreshControlOffset = () => {
+  return Platform.OS === "ios"
+    ? 0
+    : BASE_INDICATOR_HEIGHT + BASE_INDICATOR_OFFSET;
+};
+
+const styles = StyleSheet.create({
+  // eslint-disable-next-line react-native/no-color-literals
+  control: {
+    zIndex: 1,
+    backgroundColor: "transparent",
+  },
+});
 
 const getBrightness = (RGBcolor) => {
   const RGBvalues = RGBcolor.substring(
@@ -91,6 +115,34 @@ export const usePullToRefresh = (
   };
 };
 
+/** Returns the offset for the progress view of the RefreshControl component
+ *  based on navbar content position */
+export const useGetProgressViewOffset = () => {
+  const { _navBarStore } = useScreenContextV2();
+  const { top } = useSafeAreaInsets();
+
+  const offset = getRefreshControlOffset();
+
+  const { height, contentPosition } = _navBarStore(
+    useShallow(({ contentPosition, height }) => ({ contentPosition, height }))
+  );
+
+  if (height === 0) {
+    return offset;
+  }
+
+  switch (contentPosition) {
+    case "on_bottom_status_bar":
+      // navbar height
+      return offset + height - top;
+    case "on_top_screen":
+      // navbar height + status bar height
+      return offset + height;
+    default:
+      return offset;
+  }
+};
+
 export function RefreshControl(props: {
   pullToRefreshPipesV1RefreshingStateUpdater?: (refreshing: boolean) => void;
   refreshingPipesV1?: boolean;
@@ -211,6 +263,7 @@ export function RefreshControl(props: {
       refreshing={refreshing}
       onRefresh={onRefreshHandler}
       colors={[preparedIndicatorColor]}
+      progressViewOffset={useGetProgressViewOffset()}
       progressBackgroundColor={preparedIndicatorBackgroundColor}
       // @ts-ignore in RN68 this `size` became string
       size={indicatorSize}
@@ -222,6 +275,7 @@ export function RefreshControl(props: {
           : null
       }
       titleColor={preparedTitleUnderIndicatorColor}
+      style={styles.control}
     />
   );
 }

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,7 +1,10 @@
 import React, { useContext } from "react";
 import { Animated } from "react-native";
 
-import { useSafeAreaFrame } from "react-native-safe-area-context";
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { useConfiguration } from "../utils";
@@ -91,8 +94,16 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const dragVideoPlayerY = React.useRef(new Animated.Value(0)).current;
 
   const { height } = useSafeAreaFrame();
+  const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
-  const minValue = height - minimisedHeight - bottomTabBarHeight;
+
+  /*
+    If bottomTabBarHeight is equal 0 it means an app does not use bottomTabBar.
+    Because of this we need to minus bottom SafeArea offset.
+  */
+  const minValue =
+    height - minimisedHeight - (bottomTabBarHeight || bottomSafeArea);
+
   const modalSnapPoints = React.useMemo(() => [0, minValue], [minValue]);
   // Last snap state which will helps us to make smooth responder to scrollview animation
   const [lastSnap, setLastSnap] = React.useState<number>(modalSnapPoints[0]);

package/Components/VideoModal/VideoModal.tsx

@@ -129,17 +129,17 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <AnimatedPlayerModalWrapper
-      style={[
-        styles.container,
-        {
-          backgroundColor,
-        },
-      ]}
-    >
-      <ScreenContextProvider pathname={pathname}>
-        <PathnameContext.Provider value={pathname}>
-          {itemIdHooksFinished === item?.id ? (
+    <ScreenContextProvider pathname={pathname}>
+      <PathnameContext.Provider value={pathname}>
+        {itemIdHooksFinished === item?.id ? (
+          <AnimatedPlayerModalWrapper
+            style={[
+              styles.container,
+              {
+                backgroundColor,
+              },
+            ]}
+          >
             <HandlePlayable
               item={item}
               isModal={mode !== "PIP"}
@@ -147,14 +147,14 @@ const VideoModalComponent = () => {
               modalWidth={modalSize.width}
               mode={mode}
             />
-          ) : (
-            <View style={styles.loaderContainer}>
-              <Spinner />
-            </View>
-          )}
-        </PathnameContext.Provider>
-      </ScreenContextProvider>
-    </AnimatedPlayerModalWrapper>
+          </AnimatedPlayerModalWrapper>
+        ) : (
+          <View style={styles.loaderContainer}>
+            <Spinner />
+          </View>
+        )}
+      </PathnameContext.Provider>
+    </ScreenContextProvider>
   );
 };
 

package/Contexts/ScreenContext/index.tsx

@@ -26,7 +26,7 @@ interface NavBarStoreState {
   setSummary: (subtitle: string) => void;
   height: number;
   scrollState: number;
-  isOnBottomNavBar: boolean;
+  contentPosition: string;
   scrollYAnimated: Animated.Value;
 }
 
@@ -52,7 +52,7 @@ const createStore = () =>
     visible: true,
     height: 0,
     scrollState: 0,
-    isOnBottomNavBar: true,
+    contentPosition: "",
     scrollYAnimated: new Animated.Value(0),
     setTitle(title) {
       set({ title });

package/package.json

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