@applicaster/zapp-react-native-ui-components 16.0.0-alpha.5365234026 → 16.0.0-alpha.5402127570

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -1,13 +1,16 @@
-import React from "react";
-import { TouchableOpacity } from "react-native";
+import React, { useCallback } from "react";
+import { Pressable } from "react-native";
+import { PressedStateContext } from "../contexts/PressedStateContext";
 
 type Props = {
   children?: React.ReactNode;
   style?: Record<string, unknown>;
+  pressedStyle?: Record<string, unknown>;
   testID?: string;
   accessibilityLabel?: string;
   accessibilityHint?: string;
   onPress?: () => void;
+  testOnly_pressed?: boolean;
 };
 
 export function PressableView({
@@ -16,19 +19,36 @@ export function PressableView({
   testID,
   accessibilityLabel,
   accessibilityHint,
+  pressedStyle,
   onPress,
+  testOnly_pressed = false,
 }: Props) {
   return (
-    <TouchableOpacity
-      activeOpacity={1}
+    <Pressable
+      testOnly_pressed={testOnly_pressed}
       onPress={onPress}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       accessible={!!(testID || accessibilityLabel)}
-      style={style}
+      style={useCallback(
+        ({ pressed }) => [
+          style,
+          pressed && {
+            opacity: 1,
+          },
+          pressed && pressedStyle,
+        ],
+        [style, pressedStyle]
+      )}
     >
-      {children}
-    </TouchableOpacity>
+      {({ pressed }) => {
+        return (
+          <PressedStateContext.Provider value={pressed}>
+            {children}
+          </PressedStateContext.Provider>
+        );
+      }}
+    </Pressable>
   );
 }

package/Components/MasterCell/DefaultComponents/Text/hooks/useText.ts

@@ -83,6 +83,10 @@ export const useTextLabel = ({ label, entry }): string => {
   return prepareHebrewText(label, isRTL);
 };
 
+/**
+ * use `otherProps.state` to set focused or default styles (focusedStyles or normalStyles) to the text component
+ * for mobile buttons state using usePressedState() and passing isPressed to `state`
+ * */
 export const withFocusedStyles = ({ style, otherProps }) => {
   const state = R.path(["state"], otherProps);
 

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ActionButton.tsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { PressableView } from "../../PressableView";
+import { usePressedState } from "../../../hooks";
 
 import { ActionButtonController } from "../../ActionButtonsCore/components";
 
@@ -20,7 +21,137 @@ const isValidElement = (
 ): child is React.ReactElement<ChildElementProps> =>
   React.isValidElement(child);
 
-export const ActionButton = ({ style, children, action, entry, ...props }) => {
+type ActionButtonContentProps = {
+  style: any;
+  children: React.ReactNode;
+  action: any;
+  focusedStyles: any;
+  entry: any;
+  props: Record<string, any>;
+  actionContext: any;
+  actionState: any;
+  isActive: boolean;
+  onPress: () => any;
+};
+
+const ActionButtonContent = ({
+  children,
+  action,
+  entry,
+  actionContext,
+  actionState,
+  isActive,
+}: ActionButtonContentProps) => {
+  const isPressed = usePressedState();
+
+  const supportsEntryState =
+    typeof actionContext?.initialEntryState === "function";
+
+  const shouldRenderAsset = Boolean(
+    supportsEntryState ? actionState?.mobileButtonAssets : false
+  );
+
+  const shouldRenderLabel = Boolean(
+    supportsEntryState && resolveLabelText(actionState?.label)
+  );
+
+  const _cloneChildrenWithState = useCallback(
+    (nodes?: React.ReactNode): React.ReactNode => {
+      return React.Children.map(nodes, (child) => {
+        if (!isValidElement(child)) {
+          return child;
+        }
+
+        const role = child.props.mobileActionRole;
+
+        const nextChildren = _cloneChildrenWithState(child.props.children);
+
+        // Prevents of the asset rendering when the action doesn't provide asset for current entry state
+        if (role === "asset" && !shouldRenderAsset) {
+          return null;
+        }
+
+        // Prevents of the label rendering when the action doesn't provide label for current entry state.
+        // Also prevents of the label container when it doesn't have children to avoid unnecessary empty space.
+        if (role === "label" && !shouldRenderLabel) {
+          return null;
+        }
+
+        // Prevents of the label container rendering when it doesn't have children to avoid unnecessary empty space.
+        if (
+          role === "label_container" &&
+          React.Children.count(nextChildren) === 0
+        ) {
+          return null;
+        }
+
+        const nextProps: Partial<ChildElementProps> = {};
+
+        // Inject asset or uri to Asset component with role asset
+        if (role === "asset") {
+          const resolvedAsset = selectByAssetFlavour(
+            actionState,
+            action.flavour,
+            isActive
+          );
+
+          if (typeof resolvedAsset === "function") {
+            const AssetComponent = resolvedAsset as CellActionAssetComponent;
+
+            nextProps.asset = (
+              <AssetComponent
+                flavour={action.flavour || "flavour_1"}
+                width={action.width}
+                height={action.height}
+              />
+            );
+          } else {
+            nextProps.uri = resolvedAsset;
+          }
+        }
+
+        // Inject state and entry to Text component with role label
+        // Use isPressed state for mobile buttons to set focused state on mobile
+        if (role === "label") {
+          nextProps.state = isActive || isPressed ? "focused" : "default";
+          nextProps.entry = entry;
+        }
+
+        if (nextChildren !== child.props.children) {
+          nextProps.children = nextChildren;
+        }
+
+        return React.cloneElement(child, nextProps);
+      });
+    },
+    [
+      shouldRenderAsset,
+      shouldRenderLabel,
+      actionState,
+      action.flavour,
+      action.width,
+      action.height,
+      isActive,
+      isPressed,
+      entry,
+    ]
+  );
+
+  if (!shouldRenderAsset && !shouldRenderLabel) {
+    return null;
+  }
+
+  return _cloneChildrenWithState(children);
+};
+
+export const ActionButton = ({
+  style,
+  children,
+  action,
+  focusedStyles,
+  entry,
+  ...props
+}) => {
   return (
     <ActionButtonController
       action={action}
@@ -31,105 +162,28 @@ export const ActionButton = ({ style, children, action, entry, ...props }) => {
         );
       }}
     >
-      {({ actionContext, actionState, isActive, onPress }) => {
-        const supportsEntryState =
-          typeof actionContext?.initialEntryState === "function";
-
-        const shouldRenderAsset = Boolean(
-          supportsEntryState ? actionState?.mobileButtonAssets : false
-        );
-
-        const shouldRenderLabel = Boolean(
-          supportsEntryState && resolveLabelText(actionState?.label)
-        );
-
-        const _cloneChildrenWithState = (
-          nodes?: React.ReactNode
-        ): React.ReactNode => {
-          return React.Children.map(nodes, (child) => {
-            if (!isValidElement(child)) {
-              return child;
-            }
-
-            const role = child.props.mobileActionRole;
-
-            const nextChildren = _cloneChildrenWithState(child.props.children);
-
-            // Prevents of the asset rendering when the action doesn't provide asset for current entry state
-            if (role === "asset" && !shouldRenderAsset) {
-              return null;
-            }
-
-            // Prevents of the label rendering when the action doesn't provide label for current entry state.
-            // Also prevents of the label container when it doesn't have children to avoid unnecessary empty space.
-            if (role === "label" && !shouldRenderLabel) {
-              return null;
-            }
-
-            // Prevents of the label container rendering when it doesn't have children to avoid unnecessary empty space.
-            if (
-              role === "label_container" &&
-              React.Children.count(nextChildren) === 0
-            ) {
-              return null;
-            }
-
-            const nextProps: Partial<ChildElementProps> = {};
-
-            // Inject asset or uri to Asset component with role asset
-            if (role === "asset") {
-              const resolvedAsset = selectByAssetFlavour(
-                actionState,
-                action.flavour,
-                isActive
-              );
-
-              if (typeof resolvedAsset === "function") {
-                const AssetComponent =
-                  resolvedAsset as CellActionAssetComponent;
-
-                nextProps.asset = (
-                  <AssetComponent
-                    flavour={action.flavour || "flavour_1"}
-                    width={action.width}
-                    height={action.height}
-                  />
-                );
-              } else {
-                nextProps.uri = resolvedAsset;
-              }
-            }
-
-            // Inject state and entry to Text component with role label
-            if (role === "label") {
-              nextProps.state = isActive ? "focused" : "default";
-              nextProps.entry = entry;
-            }
-
-            if (nextChildren !== child.props.children) {
-              nextProps.children = nextChildren;
-            }
-
-            return React.cloneElement(child, nextProps);
-          });
-        };
-
-        if (!shouldRenderAsset && !shouldRenderLabel) {
-          return null;
-        }
-
-        return (
-          <PressableView
-            testID={props.testID || `${entry?.id}`}
-            style={isActive ? { ...style, ...props.focusedStyles } : style}
-            onPress={onPress}
-            accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
-            accessibilityHint={props.accessibilityHint}
+      {(renderProps) => (
+        <PressableView
+          testOnly_pressed={props.testOnly_pressed}
+          testID={props.testID || `${entry?.id}`}
+          style={style}
+          pressedStyle={focusedStyles}
+          onPress={renderProps.onPress}
+          accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
+          accessibilityHint={props.accessibilityHint}
+        >
+          <ActionButtonContent
+            style={style}
+            action={action}
+            focusedStyles={focusedStyles}
+            entry={entry}
+            props={props}
+            {...renderProps}
           >
-            {_cloneChildrenWithState(children)}
-          </PressableView>
-        );
-      }}
+            {children}
+          </ActionButtonContent>
+        </PressableView>
+      )}
     </ActionButtonController>
   );
 };

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/TextLabelsContainer.ts

@@ -26,7 +26,6 @@ export const TextLabelsContainer = ({
             context: actionIdentifier,
             name: "label_1",
           },
-          state: "default",
           mobileActionRole: "label",
           testID: testID ? `${testID}-label` : undefined,
           ...extraProps,

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text as RNText, TouchableOpacity, View } from "react-native";
+import { Pressable, Text as RNText, View } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -8,6 +8,11 @@ import { elementMapper } from "../../../../elementMapper";
 import { defaultComponents } from "../../../index";
 import { MobileActionButtons } from "..";
 import { AssetComponent } from "../AssetComponent";
+import { usePressedState } from "../../../../hooks/usePressedState";
+
+jest.mock("../../../../hooks/usePressedState", () => ({
+  usePressedState: jest.fn(),
+}));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
   useActions: jest.fn(),
@@ -136,6 +141,7 @@ const baseNode = {
       borderColor: "rgba(4,4,4,1)",
     },
     testID: "mobile-action-button",
+    testOnly_pressed: false,
   },
   elements: [
     {
@@ -190,14 +196,20 @@ const baseNode = {
 describe("MobileActionButton", () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    (usePressedState as jest.Mock).mockReturnValue(false);
   });
 
-  const renderNode = (node = baseNode) =>
-    render(
+  const renderNode = ({ node = baseNode, pressed = false } = {}) => {
+    if (pressed) {
+      node.props.testOnly_pressed = true;
+    }
+
+    return render(
       <React.Fragment>
         {elementMapper(defaultComponents)(node as never)}
       </React.Fragment>
     );
+  };
 
   it("renders nested image and text children through elementMapper", () => {
     mockUseActions.mockReturnValue(buildActionContext());
@@ -210,12 +222,13 @@ describe("MobileActionButton", () => {
   });
 
   it("applies focused styles when action entry state is active", () => {
+    (usePressedState as jest.Mock).mockReturnValue(true);
     mockUseActions.mockReturnValue(buildActionContext({ active: true }));
 
-    const { getByTestId, getByText } = renderNode();
+    const { getByTestId, getByText } = renderNode({ pressed: true });
 
     expect(
-      getByTestId("mobile-action-button").props.style.backgroundColor
+      getByTestId("mobile-action-button").props.style[2].backgroundColor
     ).toBe("rgba(3,3,3,1)");
 
     expect(getByText("Play").props.style).toEqual(
@@ -253,6 +266,8 @@ describe("MobileActionButton", () => {
       })
     );
 
+    node.props.testOnly_pressed = false;
+
     const { UNSAFE_getAllByType, UNSAFE_getByType, getByTestId, getByText } =
       render(
         <React.Fragment>
@@ -260,14 +275,14 @@ describe("MobileActionButton", () => {
         </React.Fragment>
       );
 
-    const pressable = UNSAFE_getByType(TouchableOpacity);
+    const pressable = UNSAFE_getByType(Pressable);
     const label = getByText("Play");
     const asset = getByTestId("mobile_action_button_1-asset");
 
     expect(pressable.props.testID).toBe("mobile_action_button_1");
     expect(pressable.props.accessibilityLabel).toBe("entry-1");
 
-    expect(pressable.props.style).toMatchObject({
+    expect(pressable.props.style({ pressed: false })[0]).toMatchObject({
       backgroundColor: "rgba(1,1,1,1)",
       borderColor: "rgba(2,2,2,1)",
       borderWidth: 1,
@@ -278,15 +293,11 @@ describe("MobileActionButton", () => {
       height: 24,
     });
 
-    expect(label.props.style).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          color: "rgba(10,10,10,1)",
-          fontSize: 15,
-          lineHeight: 24,
-        }),
-      ])
-    );
+    expect(label.props.style[0]).toMatchObject({
+      color: "rgba(10,10,10,1)",
+      fontSize: 15,
+      lineHeight: 24,
+    });
 
     expect(UNSAFE_getAllByType(View).length).toBeGreaterThan(0);
     expect(UNSAFE_getAllByType(RNText).length).toBeGreaterThan(0);
@@ -324,7 +335,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: MockAssetComponent })
       );
 
-      const { getByTestId } = renderNode(nodeWithFlavour1);
+      const { getByTestId } = renderNode({ node: nodeWithFlavour1 });
 
       expect(MockAssetComponent).toHaveBeenCalled();
       expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
@@ -339,7 +350,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: MockAssetComponent })
       );
 
-      renderNode(nodeWithFlavour1);
+      renderNode({ node: nodeWithFlavour1 });
 
       expect(MockAssetComponent).toHaveBeenCalledWith(
         expect.objectContaining({ flavour: "flavour_1" }),
@@ -356,7 +367,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: MockAssetComponent })
       );
 
-      renderNode(nodeWithFlavour2);
+      renderNode({ node: nodeWithFlavour2 });
 
       expect(MockAssetComponent).toHaveBeenCalledWith(
         expect.objectContaining({ flavour: "flavour_2" }),
@@ -369,7 +380,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: undefined })
       );
 
-      const { queryByTestId } = renderNode(nodeWithFlavour1);
+      const { queryByTestId } = renderNode({ node: nodeWithFlavour1 });
 
       expect(queryByTestId("mobile-action-button-asset")).toBeNull();
     });
@@ -385,7 +396,7 @@ describe("MobileActionButton", () => {
         })
       );
 
-      const { getByTestId } = renderNode(nodeWithFlavour1);
+      const { getByTestId } = renderNode({ node: nodeWithFlavour1 });
 
       expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
     });

package/Components/MasterCell/contexts/PressedStateContext.ts

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const PressedStateContext = React.createContext<boolean>(false);

package/Components/MasterCell/hooks/index.ts

@@ -1 +1,3 @@
 export { useAsyncRendering } from "./useAsyncRendering";
+
+export { usePressedState } from "./usePressedState";

package/Components/MasterCell/hooks/usePressedState.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PressedStateContext } from "../contexts/PressedStateContext";
+
+export const usePressedState = () => React.useContext(PressedStateContext);

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { FlatList, ScrollView, ScrollViewProps, View } from "react-native";
+import { FlatList, StyleSheet, View } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -36,16 +36,18 @@ type Props = {
   groupId?: string;
   isScreenWrappedInContainer?: boolean;
   riverComponents: ZappUIComponent[];
-  scrollViewExtraProps?: Partial<ScrollViewProps>;
+  scrollViewExtraProps?: {};
   riverId?: string;
-  getStaticComponentFeed: (args: {
-    component: ZappUIComponent;
-    index: number;
-  }) => ZappFeed | Promise<ZappFeed>;
+  getStaticComponentFeed: any;
   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;
 
@@ -62,14 +64,11 @@ 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;
@@ -88,7 +87,7 @@ function ComponentsMapComponent(props: Props) {
 
   const onLoadDone = React.useCallback(() => {
     logTimestamp(riverId?.toString());
-  }, [logTimestamp, riverId]);
+  }, [logTimestamp]);
 
   const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
     useLoadingState(riverComponents.length, onLoadDone);
@@ -117,17 +116,7 @@ function ComponentsMapComponent(props: Props) {
         </ScreenLoadingMeasurementsListItemWrapper>
       );
     },
-    [
-      feed,
-      getStaticComponentFeed,
-      groupId,
-      isScreenWrappedInContainer,
-      loadingState,
-      onLoadFailed,
-      onLoadFinished,
-      riverComponents.length,
-      riverId,
-    ]
+    [feed, getStaticComponentFeed, onLoadFailed, onLoadFinished]
   );
 
   const screenStyle = React.useMemo(
@@ -149,13 +138,7 @@ function ComponentsMapComponent(props: Props) {
         R.prop("screen_padding_right")(theme)
       ),
     }),
-    [
-      screenConfig.paddingTop,
-      screenConfig.paddingBottom,
-      screenConfig.paddingLeft,
-      screenConfig.paddingRight,
-      theme,
-    ]
+    [riverId]
   );
 
   const handleOnLayout = React.useCallback(
@@ -190,50 +173,55 @@ function ComponentsMapComponent(props: Props) {
     canMomentum.current = true;
   }, []);
 
-  /* Snap the navbar to its expanded/collapsed state based on current offset. */
-  const snapToHeaderState = React.useCallback(
-    (rawOffsetY: number) => {
-      const { height: headerHeight, scrollState } = navBarStore.getState();
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
+    if (!canMomentum.current) return;
+    canMomentum.current = false;
 
-      // Already fully expanded or fully collapsed — nothing to snap.
-      if (scrollState === 0 || scrollState === -headerHeight) return;
-      if (!flatListRef.current) return;
+    const { height: headerHeight, scrollState } = navBarStore.getState();
 
-      const offsetY = Math.max(0, rawOffsetY);
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
-      const snapsToCollapsed =
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current
+    ) {
+      const offset =
         getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
-        -headerHeight;
-
-      const offset = snapsToCollapsed
-        ? Math.round(offsetY + scrollState + headerHeight)
-        : Math.round(offsetY + scrollState);
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
 
-      flatListRef.current.scrollToOffset({ animated: true, offset });
-    },
-    [navBarStore]
-  );
+  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
+    const { height: headerHeight, scrollState } = navBarStore.getState();
 
-  /* 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]
-  );
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
-  /* 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]
-  );
+    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,
+      });
+    }
+  }, []);
 
   const onScroll = React.useCallback((event) => {
     hasUserScrolledRef.current = true;
@@ -257,42 +245,8 @@ 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
-        ? {
-            flexGrow: 1,
-          }
-        : screenStyle,
+    () => (isScreenWrappedInContainer ? {} : screenStyle),
     [isScreenWrappedInContainer, screenStyle]
   );
 
@@ -303,98 +257,61 @@ 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 (
-    // 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}>
+    <View style={styles.container} ref={flatListWrapperRef}>
       <ComponentsMapHeightContext.Provider value={flatListHeight}>
         <ComponentsMapRefContext.Provider value={flatListWrapperRef}>
           <ScreenLoadingMeasurements
             riverId={riverId}
             numberOfComponents={riverComponents.length}
           >
-            <ViewportTracker>{listContent}</ViewportTracker>
+            <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>
           </ScreenLoadingMeasurements>
         </ComponentsMapRefContext.Provider>
       </ComponentsMapHeightContext.Provider>

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

@@ -1,9 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`componentsMap renders renders components map correctly 1`] = `
-<View>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     onLayout={[Function]}
+    style={
+      {
+        "flex": 1,
+      }
+    }
   >
     <RCTScrollView
       ListFooterComponent={
@@ -156,6 +167,11 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
+            style={
+              {
+                "flex": 1,
+              }
+            }
           >
             <View />
           </View>
@@ -167,6 +183,11 @@ 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.5365234026",
+  "version": "16.0.0-alpha.5402127570",
   "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.5365234026",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.5365234026",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.5365234026",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.5365234026",
+    "@applicaster/applicaster-types": "16.0.0-alpha.5402127570",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.5402127570",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.5402127570",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.5402127570",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/Layout/FullWidthRow.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-import { StyleSheet, View } from "react-native";
-
-const styles = StyleSheet.create({
-  row: { flexDirection: "row" },
-  basis: {
-    maxWidth: "100%",
-    flexBasis: "100%",
-  },
-});
-
-type Props = {
-  children: React.ReactNode;
-};
-
-/**
- * Constrains its child to exactly the available parent width.
- *
- * UI components such as Hero and List render their items inside a parent
- * `ScrollView` (e.g. when wrapped by tabs). A child placed directly in a
- * scroll container can size itself to its own content rather than to the
- * viewport, which causes items to be measured at a stale width and resize
- * unexpectedly after layout changes such as device rotation.
- *
- * Wrapping the content in a `flexDirection: "row"` parent with a
- * `flexBasis: "100%"` / `maxWidth: "100%"` child forces the child to
- * re-derive its width from the parent on every layout pass instead of
- * caching a measured pixel width, keeping it full-width and stable.
- *
- * @param children - The content to render at full parent width.
- */
-export function FullWidthRow({ children }: Props) {
-  return (
-    <View style={styles.row}>
-      <View style={styles.basis}>{children}</View>
-    </View>
-  );
-}