Fix iOS jump in the new pager

bluesky-social · Nov 6, 2023 · 061227c · 061227c
1 parent 4c00fc5
commit 061227c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import {LayoutChangeEvent, StyleSheet} from 'react-native'
+import {LayoutChangeEvent, StyleSheet, View} from 'react-native'
 import Animated, {
   Easing,
   useAnimatedReaction,
@@ -131,7 +131,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
     // props to pass into children render functions
     const onScroll = useAnimatedScrollHandler({
       onScroll(e) {
-        scrollY.value = e.contentOffset.y
+        scrollY.value = e.contentOffset.y + (e.contentInset?.top ?? 0)
       },
     })
     const childProps = React.useMemo<PagerWithHeaderChildParams>(() => {
@@ -175,9 +175,17 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
         tabBarPosition="top">
         {toArray(children)
           .filter(Boolean)
-          .map(child => {
+          .map((child, i) => {
             if (child) {
-              return child(childProps)
+              return (
+                <View
+                  key={i}
+                  style={{
+                    opacity: headerHeight > 0 ? 1 : 0,
+                  }}>
+                  {child(childProps)}
+                </View>
+              )
             }
             return null
           })}

diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
@@ -2,6 +2,7 @@ import React, {MutableRefObject} from 'react'
 import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
+  Platform,
   RefreshControl,
   StyleProp,
   StyleSheet,
@@ -177,13 +178,14 @@ export const Feed = observer(function Feed({
           />
         }
         contentContainerStyle={s.contentContainer}
-        style={{paddingTop: headerOffset}}
         onScroll={onScroll}
         scrollEventThrottle={scrollEventThrottle}
         indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
         onEndReached={onEndReached}
         onEndReachedThreshold={2}
         removeClippedSubviews={true}
+        style={{paddingTop: Platform.OS === 'ios' ? 0 : headerOffset}}
+        contentInset={{top: headerOffset}}
         contentOffset={{x: 0, y: headerOffset * -1}}
         extraData={extraData}
         // @ts-ignore our .web version only -prf