@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1740103407 → 16.0.0-alpha.1803625751

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/insertButtonsBetweenLabels.test.ts

@@ -3,18 +3,20 @@ import { insertButtonsBetweenLabels } from "..";
 describe("insertButtonsBetweenLabels - depthlevel 1", () => {
   const buttons = "buttons";
 
-  const labels = [
-    { name: "label_1" },
-    { name: "label_2" },
-    { name: "label_3" },
+  const slots = [
+    { name: "label_1", element: { id: "label_1" } },
+    { name: "label_2", element: { id: "label_2" } },
+    { name: "label_3", element: { id: "label_3" } },
   ];
 
+  const labels = slots.map((slot) => slot.element);
+
   it("put buttons on top", () => {
     const configuration = {
       tv_buttons_container_position: "on_top",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([buttons, ...labels]);
   });
@@ -24,7 +26,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "unknown_position",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([...labels, buttons]);
   });
@@ -34,7 +36,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_1",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], buttons, labels[1], labels[2]]);
   });
@@ -44,7 +46,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_2",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], labels[1], buttons, labels[2]]);
   });
@@ -54,22 +56,52 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_3",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], labels[1], labels[2], buttons]);
   });
 
-  it("put underneath all", () => {
+  it("put above label_2", () => {
+    const configuration = {
+      tv_buttons_container_position: "above_label_2",
+    };
+
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
+
+    expect(result).toEqual([labels[0], buttons, labels[1], labels[2]]);
+  });
+
+  it("keeps the slot when its label is empty (null element)", () => {
+    const slotsWithEmpty = [
+      { name: "label_1", element: { id: "label_1" } },
+      { name: "label_2", element: null },
+      { name: "label_3", element: { id: "label_3" } },
+    ];
+
+    const configuration = {
+      tv_buttons_container_position: "above_label_2",
+    };
+
+    const result = insertButtonsBetweenLabels(
+      configuration,
+      buttons,
+      slotsWithEmpty
+    );
+
+    expect(result).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
+  });
+
+  it("appends buttons when the target is unknown", () => {
     const configuration = {
       tv_buttons_container_position: "label_X",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], labels[1], labels[2], buttons]);
   });
 
-  it("put underneath all", () => {
+  it("appends buttons when there are no slots", () => {
     const configuration = {
       tv_buttons_container_position: "label_X",
     };
@@ -88,7 +120,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_X",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, null, labels);
+    const result = insertButtonsBetweenLabels(configuration, null, slots);
 
     expect(result).toEqual(labels);
   });

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/index.ts

@@ -34,7 +34,7 @@ export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
 export const insertButtonsBetweenLabels = (
   configuration: Record<string, unknown>,
   buttons,
-  labels = []
+  slots = [] // { name, element } per canonical text label slot
 ) =>
   insertBetweenLabels(
     {
@@ -45,7 +45,7 @@ export const insertButtonsBetweenLabels = (
       appendWhenMissing: true,
     },
     buttons,
-    labels
+    slots
   );
 
 export const insertButtonsBetweenLabelContainers = (

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/Helpers/ComponentCellSelectionHelper/index.js

@@ -1,4 +1,3 @@
-import { sendTapCellEvent, sendTapMenuItem } from "../Analytics";
 import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 
@@ -12,7 +11,6 @@ export function onCellPress(
   itemIndex,
   layoutVersion = "v1"
 ) {
-  sendTapCellEvent(entry, component, headerTitle, itemIndex);
   const componentScreenType = screenTypeFromComponent(component);
   const entryScreenType = screenTypeFromEntry(entry);
   const itemType = getItemType(entry, layoutVersion);
@@ -37,7 +35,3 @@ function screenTypeFromComponent(component) {
 function screenTypeFromEntry(entry) {
   return entry && entry.screen_type;
 }
-
-export function onMenuItemFocus({ item, index, isHome }) {
-  sendTapMenuItem({ item, index, isHome });
-}

package/Helpers/index.js

@@ -7,42 +7,3 @@ export const ASSETS = {
     amazon: "tv_app_background",
   }),
 };
-
-export const ANALYTICS_CORE_EVENTS = {
-  TAP_CELL: "Tap Cell",
-  PLAY_VOD_ITEM: "Play VOD Item",
-  VOD_ITEM_PLAY_WAS_TRIGGERED: "VOD Item: Play Was Triggered",
-  CHANNEL_ITEM_PLAY_WAS_TRIGGERED: "Channel Item: Play Was Triggered",
-  PROGRAM_ITEM_PLAY_WAS_TRIGGERED: "Program Item: Play Was Triggered",
-  TAP_MENU_ICON: "Tap Menu Item",
-  HOME_SCREEN_VIEWED: "Home Screen: Viewed",
-  ITEM_NOT_AVAILABLE: "N/A",
-};
-
-export const ANALYTICS_ENTRY_EVENTS = {
-  ITEM_TYPE: "Item Type",
-  ITEM_TITLE: "Item Name",
-  ITEM_ID: "Item ID",
-  ITEM_LINK: "Item Link",
-  ITEM_INDEX: "Item Number",
-  ITEM_TIME_PLAYED: "Item Total Time Played",
-  ITEM_TOTAL_TIME_PLAYED: "Item Total Time Played",
-  ITEM_PLAY_COMPLETED: "Completed",
-  ITEM_CUSTOM_PROPERTY: "Custom Property",
-};
-
-export const ANALYTICS_COMPONENT_EVENTS = {
-  COMPONENT_ID: "Component ID",
-  COMPONENT_TYPE: "Component Type",
-  CELL_STYLE: "Cell Style",
-  HEADER_TITLE: "Header Name",
-  COMPONENT_SOURCE: "Component Source",
-};
-
-export const ANALYTICS_MENU_ITEM_EVENTS = {
-  ITEM_TYPE: "Item Type",
-  ITEM_TITLE: "Item Name",
-  ITEM_ID: "Item ID",
-  ITEM_HOME_SCREEN: "Home Screen",
-  ITEM_INDEX: "Item Number",
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-alpha.1740103407",
+  "version": "16.0.0-alpha.1803625751",
   "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.1740103407",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.1740103407",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.1740103407",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1740103407",
+    "@applicaster/applicaster-types": "16.0.0-alpha.1803625751",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.1803625751",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.1803625751",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.1803625751",
     "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>
-  );
-}