@applicaster/zapp-react-native-ui-components 14.0.10 → 14.0.11

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -23,6 +23,7 @@ import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useShallow } from "zustand/react/shallow";
+import { emitScrollEndReached } from "@applicaster/zapp-react-native-ui-components/events";
 
 import { isAndroidPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { ComponentsMapHeightContext } from "./ContextProviders/ComponentsMapHeightContext";
@@ -73,6 +74,7 @@ function ComponentsMapComponent(props: Props) {
 
   const flatListRef = React.useRef<FlatList | null>(null);
   const flatListWrapperRef = React.useRef<View | null>(null);
+  const hasUserScrolledRef = React.useRef(false);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -236,6 +238,8 @@ function ComponentsMapComponent(props: Props) {
   }, []);
 
   const onScroll = React.useCallback((event) => {
+    hasUserScrolledRef.current = true;
+
     const {
       nativeEvent: {
         contentOffset: { y },
@@ -308,6 +312,17 @@ function ComponentsMapComponent(props: Props) {
                 onScrollEndDrag={_onScrollEndDrag}
                 scrollEventThrottle={16}
                 {...scrollViewExtraProps}
+                /* 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. */
+                onEndReached={
+                  isScreenWrappedInContainer
+                    ? undefined
+                    : () => {
+                        if (!hasUserScrolledRef.current) return;
+                        emitScrollEndReached();
+                      }
+                }
               />
             </ViewportTracker>
           </ScreenLoadingMeasurements>

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

@@ -137,6 +137,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       keyExtractor={[Function]}
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
+      onEndReached={[Function]}
       onLayout={[Function]}
       onMomentumScrollBegin={[Function]}
       onMomentumScrollEnd={[Function]}

package/events/index.ts

@@ -7,3 +7,5 @@ export enum QBUIComponentEvents {
   focusOnSelectedTopMenuItem = "focusOnSelectedTopMenuItem",
   scrollToTopForScreenWrappedInContainer = "scrollToTopForScreenWrappedInContainer",
 }
+
+export { scrollEndReached$, emitScrollEndReached } from "./scrollEndReached";

package/events/scrollEndReached.ts

@@ -0,0 +1,15 @@
+import { Subject } from "rxjs";
+import { throttleTime } from "rxjs/operators";
+
+const SCROLL_END_THROTTLE_MS = 1000;
+const scrollEndReachedSubject = new Subject<void>();
+
+/* Throttle so we only emit at most once per second; RN often fires onEndReached repeatedly (e.g. on Android) when near the bottom. */
+export const scrollEndReached$ = scrollEndReachedSubject.pipe(
+  throttleTime(SCROLL_END_THROTTLE_MS)
+);
+
+/* Call from scroll container (ComponentsMap or Tabs) when scroll reaches end. */
+export const emitScrollEndReached = (): void => {
+  scrollEndReachedSubject.next();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.10",
+  "version": "14.0.11",
   "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": "14.0.10",
-    "@applicaster/zapp-react-native-bridge": "14.0.10",
-    "@applicaster/zapp-react-native-redux": "14.0.10",
-    "@applicaster/zapp-react-native-utils": "14.0.10",
+    "@applicaster/applicaster-types": "14.0.11",
+    "@applicaster/zapp-react-native-bridge": "14.0.11",
+    "@applicaster/zapp-react-native-redux": "14.0.11",
+    "@applicaster/zapp-react-native-utils": "14.0.11",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",