Allow profile header to overscroll (#5457)

* add allowoverscroll prop

* ensure spinner is visible

* more generic prop for `<List>`

* rename to allowHeaderOverScroll

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -12,15 +12,15 @@ import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 import {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query'
 
+import {useGenerateStarterPackMutation} from '#/lib/generate-starterpack'
+import {useBottomBarOffset} from '#/lib/hooks/useBottomBarOffset'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {NavigationProp} from '#/lib/routes/types'
+import {parseStarterPackUri} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
-import {useGenerateStarterPackMutation} from 'lib/generate-starterpack'
+import {List, ListRef} from '#/view/com/util/List'
-import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
+import {Text} from '#/view/com/util/text/Text'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {atoms as a, ios, useTheme} from '#/alf'
-import {NavigationProp} from 'lib/routes/types'
-import {parseStarterPackUri} from 'lib/strings/starter-pack'
-import {List, ListRef} from 'view/com/util/List'
-import {Text} from 'view/com/util/text/Text'
-import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
@@ -132,6 +132,7 @@ export const ProfileStarterPacks = React.forwardRef<
         keyExtractor={keyExtractor}
         refreshing={isPTRing}
         headerOffset={headerOffset}
+        progressViewOffset={ios(0)}
         contentContainerStyle={{paddingBottom: headerOffset + bottomBarOffset}}
         indicatorStyle={t.name === 'light' ? 'black' : 'white'}
         removeClippedSubviews={true}

src/screens/Profile/Header/index.tsx

@@ -7,18 +7,22 @@ import {
   RichText as RichTextAPI,
 } from '@atproto/api'
 
-import {usePalette} from 'lib/hooks/usePalette'
+import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
-import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
+import {useTheme} from '#/alf'
 import {ProfileHeaderLabeler} from './ProfileHeaderLabeler'
 import {ProfileHeaderStandard} from './ProfileHeaderStandard'
 
 let ProfileHeaderLoading = (_props: {}): React.ReactNode => {
-  const pal = usePalette('default')
+  const t = useTheme()
   return (
-    <View style={pal.view}>
+    <View style={t.atoms.bg}>
       <LoadingPlaceholder width="100%" height={150} style={{borderRadius: 0}} />
       <View
-        style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}>
+        style={[
+          t.atoms.bg,
+          {borderColor: t.atoms.bg.backgroundColor},
+          styles.avi,
+        ]}>
         <LoadingPlaceholder width={90} height={90} style={styles.br45} />
       </View>
       <View style={styles.content}>

src/screens/Profile/Sections/Feed.tsx

@@ -4,17 +4,18 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
+import {usePalette} from '#/lib/hooks/usePalette'
 import {isNative} from '#/platform/detection'
 import {FeedDescriptor} from '#/state/queries/post-feed'
 import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
 import {truncateAndInvalidate} from '#/state/queries/util'
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
+import {Feed} from '#/view/com/posts/Feed'
-import {usePalette} from 'lib/hooks/usePalette'
+import {EmptyState} from '#/view/com/util/EmptyState'
+import {ListRef} from '#/view/com/util/List'
+import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
 import {Text} from '#/view/com/util/text/Text'
-import {Feed} from 'view/com/posts/Feed'
+import {ios} from '#/alf'
-import {EmptyState} from 'view/com/util/EmptyState'
-import {ListRef} from 'view/com/util/List'
-import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
 import {SectionRef} from './types'
 
 interface FeedSectionProps {
@@ -82,6 +83,7 @@ export const ProfileFeedSection = React.forwardRef<
         onScrolledDownChange={setIsScrolledDown}
         renderEmptyState={renderPostsEmpty}
         headerOffset={headerHeight}
+        progressViewOffset={ios(0)}
         renderEndOfFeed={ProfileEndOfFeed}
         ignoreFilterFor={ignoreFilterFor}
         initialNumToRender={

src/view/com/feeds/ProfileFeedgens.tsx

@@ -15,9 +15,9 @@ import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
+import {EmptyState} from '#/view/com/util/EmptyState'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
-import {EmptyState} from 'view/com/util/EmptyState'
+import {atoms as a, ios, useTheme} from '#/alf'
-import {atoms as a, useTheme} from '#/alf'
 import * as FeedCard from '#/components/FeedCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List, ListRef} from '../util/List'
@@ -191,6 +191,7 @@ export const ProfileFeedgens = React.forwardRef<
         refreshing={isPTRing}
         onRefresh={onRefresh}
         headerOffset={headerOffset}
+        progressViewOffset={ios(0)}
         contentContainerStyle={isNative && {paddingBottom: headerOffset + 100}}
         indicatorStyle={t.name === 'light' ? 'black' : 'white'}
         removeClippedSubviews={true}

src/view/com/lists/ProfileLists.tsx

@@ -10,14 +10,14 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists'
-import {useAnalytics} from 'lib/analytics/analytics'
+import {EmptyState} from '#/view/com/util/EmptyState'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
-import {EmptyState} from 'view/com/util/EmptyState'
+import {atoms as a, ios, useTheme} from '#/alf'
-import {atoms as a, useTheme} from '#/alf'
 import * as ListCard from '#/components/ListCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List, ListRef} from '../util/List'
@@ -192,6 +192,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
           refreshing={isPTRing}
           onRefresh={onRefresh}
           headerOffset={headerOffset}
+          progressViewOffset={ios(0)}
           contentContainerStyle={
             isNative && {paddingBottom: headerOffset + 100}
           }

src/view/com/pager/PagerWithHeader.tsx

@@ -19,8 +19,8 @@ import Animated, {
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {ScrollProvider} from '#/lib/ScrollContext'
-import {isIOS} from 'platform/detection'
+import {isIOS} from '#/platform/detection'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager'
 import {ListMethods} from '../util/List'
 import {TabBar} from './TabBar'
 
@@ -41,6 +41,7 @@ export interface PagerWithHeaderProps {
   initialPage?: number
   onPageSelected?: (index: number) => void
   onCurrentPageSelected?: (index: number) => void
+  allowHeaderOverScroll?: boolean
 }
 export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
   function PageWithHeaderImpl(
@@ -53,6 +54,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
       initialPage,
       onPageSelected,
       onCurrentPageSelected,
+      allowHeaderOverScroll,
     }: PagerWithHeaderProps,
     ref,
   ) {
@@ -92,6 +94,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
             onSelect={props.onSelect}
             scrollY={scrollY}
             testID={testID}
+            allowHeaderOverScroll={allowHeaderOverScroll}
           />
         )
       },
@@ -106,6 +109,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
         onHeaderOnlyLayout,
         scrollY,
         testID,
+        allowHeaderOverScroll,
       ],
     )
 
@@ -216,6 +220,7 @@ let PagerTabBar = ({
   onTabBarLayout,
   onCurrentPageSelected,
   onSelect,
+  allowHeaderOverScroll,
 }: {
   currentPage: number
   headerOnlyHeight: number
@@ -228,14 +233,20 @@ let PagerTabBar = ({
   onTabBarLayout: (e: LayoutChangeEvent) => void
   onCurrentPageSelected?: (index: number) => void
   onSelect?: (index: number) => void
+  allowHeaderOverScroll?: boolean
 }): React.ReactNode => {
-  const headerTransform = useAnimatedStyle(() => ({
+  const headerTransform = useAnimatedStyle(() => {
+    const translateY = Math.min(scrollY.value, headerOnlyHeight) * -1
+    return {
       transform: [
         {
-        translateY: Math.min(Math.min(scrollY.value, headerOnlyHeight) * -1, 0),
+          translateY: allowHeaderOverScroll
+            ? translateY
+            : Math.min(translateY, 0),
         },
       ],
-  }))
+    }
+  })
   const headerRef = React.useRef(null)
   return (
     <Animated.View

src/view/com/pager/PagerWithHeader.web.tsx

@@ -4,7 +4,7 @@ import {useAnimatedRef} from 'react-native-reanimated'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
+import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager'
 import {ListMethods} from '../util/List'
 import {TabBar} from './TabBar'
 

src/view/com/posts/Feed.tsx

@@ -14,8 +14,11 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {useAnalytics} from '#/lib/analytics/analytics'
 import {DISCOVER_FEED_URI, KNOWN_SHUTDOWN_FEEDS} from '#/lib/constants'
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {logEvent, useGate} from '#/lib/statsig/statsig'
+import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {listenPostCreated} from '#/state/events'
@@ -30,9 +33,6 @@ import {
   usePostFeedQuery,
 } from '#/state/queries/post-feed'
 import {useSession} from '#/state/session'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {useTheme} from 'lib/ThemeContext'
 import {
   ProgressGuide,
   SuggestedFeeds,
@@ -167,6 +167,7 @@ let Feed = ({
   renderEndOfFeed,
   testID,
   headerOffset = 0,
+  progressViewOffset,
   desktopFixedHeightOffset,
   ListHeaderComponent,
   extraData,
@@ -187,6 +188,7 @@ let Feed = ({
   renderEndOfFeed?: () => JSX.Element
   testID?: string
   headerOffset?: number
+  progressViewOffset?: number
   desktopFixedHeightOffset?: number
   ListHeaderComponent?: () => JSX.Element
   extraData?: any
@@ -548,6 +550,7 @@ let Feed = ({
         refreshing={isPTRing}
         onRefresh={onRefresh}
         headerOffset={headerOffset}
+        progressViewOffset={progressViewOffset}
         contentContainerStyle={{
           minHeight: Dimensions.get('window').height * 1.5,
         }}

src/view/com/util/List.tsx

@@ -4,11 +4,11 @@ import {runOnJS, useSharedValue} from 'react-native-reanimated'
 import {updateActiveVideoViewAsync} from '@haileyok/bluesky-video'
 
 import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
-import {usePalette} from '#/lib/hooks/usePalette'
+import {useDedupe} from '#/lib/hooks/useDedupe'
 import {useScrollHandlers} from '#/lib/ScrollContext'
-import {useDedupe} from 'lib/hooks/useDedupe'
+import {addStyle} from '#/lib/styles'
-import {addStyle} from 'lib/styles'
+import {isIOS} from '#/platform/detection'
-import {isIOS} from 'platform/detection'
+import {useTheme} from '#/alf'
 import {FlatList_INTERNAL} from './Views'
 
 export type ListMethods = FlatList_INTERNAL
@@ -44,12 +44,13 @@ function ListImpl<ItemT>(
     onItemSeen,
     headerOffset,
     style,
+    progressViewOffset,
     ...props
   }: ListProps<ItemT>,
   ref: React.Ref<ListMethods>,
 ) {
   const isScrolledDown = useSharedValue(false)
-  const pal = usePalette('default')
+  const t = useTheme()
   const dedupe = useDedupe(400)
 
   function handleScrolledDownChange(didScrollDown: boolean) {
@@ -120,9 +121,9 @@ function ListImpl<ItemT>(
       <RefreshControl
         refreshing={refreshing ?? false}
         onRefresh={onRefresh}
-        tintColor={pal.colors.text}
+        tintColor={t.atoms.text.color}
-        titleColor={pal.colors.text}
+        titleColor={t.atoms.text.color}
-        progressViewOffset={headerOffset}
+        progressViewOffset={progressViewOffset ?? headerOffset}
       />
     )
   }

src/view/screens/Profile.tsx

@@ -37,11 +37,11 @@ import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
 import {useComposerControls} from '#/state/shell/composer'
 import {ProfileFeedgens} from '#/view/com/feeds/ProfileFeedgens'
 import {ProfileLists} from '#/view/com/lists/ProfileLists'
+import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {FAB} from '#/view/com/util/fab/FAB'
 import {ListRef} from '#/view/com/util/List'
 import {CenteredView} from '#/view/com/util/Views'
-import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
 import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
 import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
 import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
@@ -363,7 +363,8 @@ function ProfileScreenLoaded({
         items={sectionTitles}
         onPageSelected={onPageSelected}
         onCurrentPageSelected={onCurrentPageSelected}
-        renderHeader={renderHeader}>
+        renderHeader={renderHeader}
+        allowHeaderOverScroll>
         {showFiltersTab
           ? ({headerHeight, isFocused, scrollElRef}) => (
               <ProfileLabelsSection