From 342d18949f8678169a4fea9cfee74c1e2e0d1967 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 10 Nov 2023 01:52:50 +0000
Subject: [PATCH] Extract a PagerItem component

---
 src/view/com/pager/PagerWithHeader.tsx | 39 +++++++++++++++-----------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
index 86139fb633..7f3ea28df7 100644
--- a/src/view/com/pager/PagerWithHeader.tsx
+++ b/src/view/com/pager/PagerWithHeader.tsx
@@ -181,24 +181,18 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
         {toArray(children)
           .filter(Boolean)
           .map((child, i) => {
-            let output = null
-            if (
-              child != null &&
-              // Defer showing content until we know it won't jump.
-              isHeaderReady &&
-              headerOnlyHeight > 0 &&
-              tabBarHeight > 0
-            ) {
-              output = child({
-                headerHeight,
-                isScrolledDown,
-                onScroll: i === currentPage ? onScroll : noop,
-              })
-            }
-            // Pager children must be noncollapsible plain <View>s.
             return (
               <View key={i} collapsable={false}>
-                {output}
+                <PagerItem
+                  headerHeight={headerHeight}
+                  isScrolledDown={isScrolledDown}
+                  onScroll={i === currentPage ? onScroll : noop}
+                  renderTab={
+                    isHeaderReady && headerOnlyHeight > 0 && tabBarHeight > 0
+                      ? child
+                      : null
+                  }
+                />
               </View>
             )
           })}
@@ -207,6 +201,19 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
   },
 )
 
+function PagerItem(
+  {headerHeight, isScrolledDown, onScroll, renderTab}: any /* TODO */,
+) {
+  if (renderTab == null) {
+    return null
+  }
+  return renderTab({
+    headerHeight,
+    isScrolledDown,
+    onScroll,
+  })
+}
+
 const styles = StyleSheet.create({
   tabBarMobile: {
     position: 'absolute',