@applicaster/zapp-react-native-ui-components 14.0.10-alpha.4515005205 → 14.0.10-alpha.7235445407

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -33,6 +33,7 @@ export const GeneralContentScreen = ({
   parentFocus,
   containerHeight,
   preferredFocus = false,
+  isScreenWrappedInScrollView = false,
 }: GeneralContentScreenProps) => {
   const screenData = useScreenData(screenId);
 
@@ -119,6 +120,7 @@ export const GeneralContentScreen = ({
           getStaticComponentFeed={getStaticComponentFeed}
           extraAnchorPointYOffset={extraAnchorPointYOffset}
           isScreenWrappedInContainer={isScreenWrappedInContainer}
+          isScreenWrappedInScrollView={isScreenWrappedInScrollView}
           parentFocus={parentFocus}
           focused={focused}
           containerHeight={containerHeight}

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";
@@ -41,6 +42,7 @@ type Props = {
   pullToRefreshPipesV1RefreshingStateUpdater: () => boolean;
   refreshingPipesV1?: boolean;
   stickyHeaderIndices?: number[];
+  isScreenWrappedInScrollView?: boolean;
 };
 
 const styles = StyleSheet.create({
@@ -60,6 +62,7 @@ function ComponentsMapComponent(props: Props) {
     riverComponents: components,
     scrollViewExtraProps,
     isScreenWrappedInContainer,
+    isScreenWrappedInScrollView = false,
     feed,
     groupId,
     riverId,
@@ -73,6 +76,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 +240,8 @@ function ComponentsMapComponent(props: Props) {
   }, []);
 
   const onScroll = React.useCallback((event) => {
+    hasUserScrolledRef.current = true;
+
     const {
       nativeEvent: {
         contentOffset: { y },
@@ -308,6 +314,14 @@ function ComponentsMapComponent(props: Props) {
                 onScrollEndDrag={_onScrollEndDrag}
                 scrollEventThrottle={16}
                 {...scrollViewExtraProps}
+                onEndReached={
+                  isScreenWrappedInScrollView
+                    ? undefined
+                    : () => {
+                        if (!hasUserScrolledRef.current) return;
+                        emitScrollEndReached();
+                      }
+                }
               />
             </ViewportTracker>
           </ScreenLoadingMeasurements>

package/Components/River/River.tsx

@@ -21,6 +21,7 @@ type Props = ZappScreenProps & {
   setIsScreenWrappedInContainer: (isInsideContainer: boolean) => void;
   screenContext: ZappRiver;
   river: ZappRiver;
+  isScreenWrappedInScrollView?: boolean;
 };
 
 type State = {
@@ -87,6 +88,7 @@ export class RiverComponent extends React.Component<Props, State> {
       isInsideContainer,
       groupId,
       scrollViewExtraProps,
+      isScreenWrappedInScrollView = false,
     } = this.props;
 
     const { id, type } = river;
@@ -123,6 +125,7 @@ export class RiverComponent extends React.Component<Props, State> {
         <GeneralContentScreen
           screenId={id}
           isScreenWrappedInContainer={isInsideContainer}
+          isScreenWrappedInScrollView={isScreenWrappedInScrollView}
           groupId={groupId}
           scrollViewExtraProps={scrollViewExtraProps}
         />
@@ -153,6 +156,7 @@ export class RiverComponent extends React.Component<Props, State> {
               groupId={groupId}
               feed={feed}
               isScreenWrappedInContainer={isInsideContainer}
+              isScreenWrappedInScrollView={isScreenWrappedInScrollView}
               scrollViewExtraProps={scrollViewExtraProps}
               componentsMapExtraProps={{
                 pullToRefreshPipesV1RefreshingStateUpdater:

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/Components/Tabs/TabContent.tsx

@@ -12,6 +12,7 @@ type Props = {
   screenId: string;
   hasUIComponents: boolean;
   backgroundColor: string;
+  isScreenWrappedInScrollView: boolean;
 };
 
 function TabContentComponent(props: Props) {
@@ -23,6 +24,7 @@ function TabContentComponent(props: Props) {
     feedUrl,
     screenId,
     hasUIComponents,
+    isScreenWrappedInScrollView = false,
   } = props;
 
   return (
@@ -42,6 +44,7 @@ function TabContentComponent(props: Props) {
           feedUrl={feedUrl}
           screenId={screenId}
           isInsideContainer={!hasUIComponents}
+          isScreenWrappedInScrollView={isScreenWrappedInScrollView}
         />
       )}
     </View>

package/events/index.ts

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

package/events/scrollEndReached.ts

@@ -0,0 +1,10 @@
+import { Subject } from "rxjs";
+
+const scrollEndReachedSubject = new Subject<void>();
+
+export const scrollEndReached$ = scrollEndReachedSubject.asObservable();
+
+/** Call from scroll container (ComponentsMap or Tabs) when scroll reaches end. */
+export const emitScrollEndReached = (): void => {
+  scrollEndReachedSubject.next();
+};

package/index.d.ts

@@ -18,6 +18,7 @@ type GeneralContentScreenProps = {
   }) => Promise<ZappFeed> | ZappFeed;
   extraAnchorPointYOffset?: number;
   isScreenWrappedInContainer?: boolean;
+  isScreenWrappedInScrollView?: boolean;
   componentsMapExtraProps?: {
     onContentSizeChange?: (cb: { width: number; height: number }) => any;
     onLayout?: (LayoutChangeEvent) => any;

package/package.json

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