@applicaster/zapp-react-native-ui-components 16.0.0-alpha.2320942372 → 16.0.0-alpha.2628821467

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { FlatList, StyleSheet, View } from "react-native";
+import { FlatList, ScrollView, ScrollViewProps, View } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -36,18 +36,16 @@ type Props = {
   groupId?: string;
   isScreenWrappedInContainer?: boolean;
   riverComponents: ZappUIComponent[];
-  scrollViewExtraProps?: {};
+  scrollViewExtraProps?: Partial<ScrollViewProps>;
   riverId?: string;
-  getStaticComponentFeed: any;
+  getStaticComponentFeed: (args: {
+    component: ZappUIComponent;
+    index: number;
+  }) => ZappFeed | Promise<ZappFeed>;
   stickyHeaderIndices?: number[];
+  useScrollView?: boolean;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
 const getNearestValue = (value, optionA, optionB) =>
   Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
@@ -64,11 +62,14 @@ function ComponentsMapComponent(props: Props) {
     riverId,
     getStaticComponentFeed,
     stickyHeaderIndices,
+    useScrollView,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
+  const scrollViewRef = React.useRef<ScrollView | null>(null);
   const flatListWrapperRef = React.useRef<View | null>(null);
   const hasUserScrolledRef = React.useRef(false);
+  const scrollEndReachedRef = React.useRef(false);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -87,7 +88,7 @@ function ComponentsMapComponent(props: Props) {
 
   const onLoadDone = React.useCallback(() => {
     logTimestamp(riverId?.toString());
-  }, [logTimestamp]);
+  }, [logTimestamp, riverId]);
 
   const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
     useLoadingState(riverComponents.length, onLoadDone);
@@ -116,7 +117,17 @@ function ComponentsMapComponent(props: Props) {
         </ScreenLoadingMeasurementsListItemWrapper>
       );
     },
-    [feed, getStaticComponentFeed, onLoadFailed, onLoadFinished]
+    [
+      feed,
+      getStaticComponentFeed,
+      groupId,
+      isScreenWrappedInContainer,
+      loadingState,
+      onLoadFailed,
+      onLoadFinished,
+      riverComponents.length,
+      riverId,
+    ]
   );
 
   const screenStyle = React.useMemo(
@@ -138,7 +149,13 @@ function ComponentsMapComponent(props: Props) {
         R.prop("screen_padding_right")(theme)
       ),
     }),
-    [riverId]
+    [
+      screenConfig.paddingTop,
+      screenConfig.paddingBottom,
+      screenConfig.paddingLeft,
+      screenConfig.paddingRight,
+      theme,
+    ]
   );
 
   const handleOnLayout = React.useCallback(
@@ -173,55 +190,50 @@ function ComponentsMapComponent(props: Props) {
     canMomentum.current = true;
   }, []);
 
-  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
-  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
-    if (!canMomentum.current) return;
-    canMomentum.current = false;
+  /* Snap the navbar to its expanded/collapsed state based on current offset. */
+  const snapToHeaderState = React.useCallback(
+    (rawOffsetY: number) => {
+      const { height: headerHeight, scrollState } = navBarStore.getState();
 
-    const { height: headerHeight, scrollState } = navBarStore.getState();
+      // Already fully expanded or fully collapsed — nothing to snap.
+      if (scrollState === 0 || scrollState === -headerHeight) return;
+      if (!flatListRef.current) return;
 
-    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+      const offsetY = Math.max(0, rawOffsetY);
 
-    if (
-      !(scrollState === 0 || scrollState === -headerHeight) &&
-      flatListRef.current
-    ) {
-      const offset =
+      const snapsToCollapsed =
         getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
-        -headerHeight
-          ? Math.round(offsetY + scrollState + headerHeight)
-          : Math.round(offsetY + scrollState);
-
-      flatListRef.current.scrollToOffset({
-        animated: true,
-        offset,
-      });
-    }
-  }, []);
+        -headerHeight;
 
-  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
-  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
-    const { height: headerHeight, scrollState } = navBarStore.getState();
+      const offset = snapsToCollapsed
+        ? Math.round(offsetY + scrollState + headerHeight)
+        : Math.round(offsetY + scrollState);
 
-    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+      flatListRef.current.scrollToOffset({ animated: true, offset });
+    },
+    [navBarStore]
+  );
 
-    if (
-      !(scrollState === 0 || scrollState === -headerHeight) &&
-      flatListRef.current &&
-      nativeEvent.velocity.y === 0
-    ) {
-      const offset =
-        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
-        -headerHeight
-          ? Math.round(offsetY + scrollState + headerHeight)
-          : Math.round(offsetY + scrollState);
-
-      flatListRef.current.scrollToOffset({
-        animated: true,
-        offset,
-      });
-    }
-  }, []);
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(
+    ({ nativeEvent }) => {
+      if (!canMomentum.current) return;
+      canMomentum.current = false;
+      snapToHeaderState(nativeEvent.contentOffset.y);
+    },
+    [snapToHeaderState]
+  );
+
+  /* onScrollEndDrag: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(
+    ({ nativeEvent }) => {
+      // Only snap on drag-end if there's no momentum to follow;
+      // otherwise _onMomentumScrollEnd handles it.
+      if (nativeEvent.velocity?.y !== 0) return;
+      snapToHeaderState(nativeEvent.contentOffset.y);
+    },
+    [snapToHeaderState]
+  );
 
   const onScroll = React.useCallback((event) => {
     hasUserScrolledRef.current = true;
@@ -245,8 +257,42 @@ function ComponentsMapComponent(props: Props) {
     }
   }, []);
 
+  const onScrollWithEndReached = React.useCallback(
+    (event) => {
+      onScroll(event);
+
+      if (!hasUserScrolledRef.current) return;
+      if (isScreenWrappedInContainer) return;
+
+      const {
+        nativeEvent: {
+          contentOffset: { y },
+          layoutMeasurement: { height },
+          contentSize: { height: contentHeight },
+        },
+      } = event;
+
+      const distanceFromEnd = contentHeight - y - height;
+
+      if (distanceFromEnd <= height * 0.5) {
+        if (!scrollEndReachedRef.current) {
+          scrollEndReachedRef.current = true;
+          emitScrollEndReached();
+        }
+      } else {
+        scrollEndReachedRef.current = false;
+      }
+    },
+    [onScroll, isScreenWrappedInContainer]
+  );
+
   const contentContainerStyle = React.useMemo(
-    () => (isScreenWrappedInContainer ? {} : screenStyle),
+    () =>
+      isScreenWrappedInContainer
+        ? {
+            flexGrow: 1,
+          }
+        : screenStyle,
     [isScreenWrappedInContainer, screenStyle]
   );
 
@@ -257,61 +303,98 @@ function ComponentsMapComponent(props: Props) {
   // TODO: support both "isScreenWrappedInContainer" and hasScreenPicker().
   // The Screen Picker in Mobile is completly different than the TV
   // so the various offsets / margins in TV do not apply here.
+  // Fix for WebView rerender crashes on Android API 28+
+  // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+  const sharedScrollProps = {
+    overScrollMode: isAndroid ? ("never" as const) : ("auto" as const),
+    scrollIndicatorInsets,
+    onLayout: handleOnLayout,
+    contentContainerStyle,
+    refreshControl,
+    onScrollBeginDrag,
+    onMomentumScrollEnd: _onMomentumScrollEnd,
+    onScrollEndDrag: _onScrollEndDrag,
+    scrollEventThrottle: 16,
+    ...scrollViewExtraProps,
+  };
+
+  const listContent = useScrollView ? (
+    <ScrollView
+      testID="components-map-scroll-view"
+      // ViewportTracker clones this child and calls its `ref` as a function
+      // (childrenRef.current.ref(node)), so a callback ref is required here
+      // — an object ref would throw "ref is not a function".
+      ref={(ref) => {
+        scrollViewRef.current = ref;
+      }}
+      onScroll={onScrollWithEndReached}
+      {...sharedScrollProps}
+    >
+      {riverComponents.map((item, index) => (
+        <React.Fragment key={keyExtractor(item)}>
+          {renderRiverItem({ item, index })}
+        </React.Fragment>
+      ))}
+      <RiverFooter
+        flatListHeight={flatListHeight}
+        loadingState={loadingState}
+      />
+    </ScrollView>
+  ) : (
+    <FlatList
+      testID="components-map-flat-list"
+      // ViewportTracker clones this child and calls its `ref` as a function
+      // (childrenRef.current.ref(node)), so a callback ref is required here
+      // — an object ref would throw "ref is not a function".
+      ref={(ref) => {
+        flatListRef.current = ref;
+      }}
+      extraData={feed}
+      stickyHeaderIndices={stickyHeaderIndices}
+      removeClippedSubviews={isAndroid}
+      initialNumToRender={3}
+      maxToRenderPerBatch={10}
+      windowSize={12}
+      keyExtractor={keyExtractor}
+      renderItem={renderRiverItem}
+      data={riverComponents}
+      ListFooterComponent={
+        <RiverFooter
+          flatListHeight={flatListHeight}
+          loadingState={loadingState}
+        />
+      }
+      onScroll={onScroll}
+      onEndReached={
+        /* TODO: end-reached detection is inconsistent between the two paths:
+        the ScrollView branch uses manual pixel-offset math (onScrollWithEndReached)
+        with a scrollEndReachedRef debounce, while this FlatList relies on the
+        native onEndReached. Consider unifying the threshold/debounce behavior. */
+        /* When wrapped in a parent ScrollView (e.g. tabs),
+        this FlatList doesn't scroll so onEndReached can fire repeatedly;
+        skip it here and let the parent ScrollView emit scroll-end instead. */
+        isScreenWrappedInContainer
+          ? undefined
+          : () => {
+              if (!hasUserScrolledRef.current) return;
+              emitScrollEndReached();
+            }
+      }
+      {...sharedScrollProps}
+    />
+  );
+
   return (
-    <View style={styles.container} ref={flatListWrapperRef}>
+    // Wrapper View exists only to expose a ref (via ComponentsMapRefContext)
+    // for measuring the list's position/height; it intentionally has no style.
+    <View ref={flatListWrapperRef}>
       <ComponentsMapHeightContext.Provider value={flatListHeight}>
         <ComponentsMapRefContext.Provider value={flatListWrapperRef}>
           <ScreenLoadingMeasurements
             riverId={riverId}
             numberOfComponents={riverComponents.length}
           >
-            <ViewportTracker>
-              <FlatList
-                testID="components-map-flat-list"
-                ref={(ref) => {
-                  flatListRef.current = ref;
-                }}
-                // 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"}
-                scrollIndicatorInsets={scrollIndicatorInsets}
-                extraData={feed}
-                stickyHeaderIndices={stickyHeaderIndices}
-                removeClippedSubviews={isAndroid}
-                onLayout={handleOnLayout}
-                initialNumToRender={3}
-                maxToRenderPerBatch={10}
-                windowSize={12}
-                keyExtractor={keyExtractor}
-                renderItem={renderRiverItem}
-                data={riverComponents}
-                contentContainerStyle={contentContainerStyle}
-                ListFooterComponent={
-                  <RiverFooter
-                    flatListHeight={flatListHeight}
-                    loadingState={loadingState}
-                  />
-                }
-                refreshControl={refreshControl}
-                onScrollBeginDrag={onScrollBeginDrag}
-                onScroll={onScroll}
-                onMomentumScrollEnd={_onMomentumScrollEnd}
-                onScrollEndDrag={_onScrollEndDrag}
-                scrollEventThrottle={16}
-                {...scrollViewExtraProps}
-                onEndReached={
-                  /* When wrapped in a parent ScrollView (e.g. tabs),
-                  this FlatList doesn't scroll so onEndReached can fire repeatedly;
-                  skip it here and let the parent ScrollView emit scroll-end instead. */
-                  isScreenWrappedInContainer
-                    ? undefined
-                    : () => {
-                        if (!hasUserScrolledRef.current) return;
-                        emitScrollEndReached();
-                      }
-                }
-              />
-            </ViewportTracker>
+            <ViewportTracker>{listContent}</ViewportTracker>
           </ScreenLoadingMeasurements>
         </ComponentsMapRefContext.Provider>
       </ComponentsMapHeightContext.Provider>

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

@@ -1,20 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`componentsMap renders renders components map correctly 1`] = `
-<View
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
+<View>
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
   >
     <RCTScrollView
       ListFooterComponent={
@@ -167,11 +156,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           >
             <View />
           </View>
@@ -183,11 +167,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           />
         </View>
         <View

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-alpha.2320942372",
+  "version": "16.0.0-alpha.2628821467",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.2320942372",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.2320942372",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.2320942372",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.2320942372",
+    "@applicaster/applicaster-types": "16.0.0-alpha.2628821467",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.2628821467",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.2628821467",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.2628821467",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",