diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx
index 842a4574..701b5287 100644
--- a/src/view/com/pager/PagerWithHeader.tsx
+++ b/src/view/com/pager/PagerWithHeader.tsx
@@ -1,9 +1,13 @@
import * as React from 'react'
-import {LayoutChangeEvent, StyleSheet, View} from 'react-native'
+import {
+ LayoutChangeEvent,
+ NativeScrollEvent,
+ StyleSheet,
+ View,
+} from 'react-native'
import Animated, {
Easing,
useAnimatedReaction,
- useAnimatedScrollHandler,
useAnimatedStyle,
useSharedValue,
withTiming,
@@ -12,13 +16,12 @@ import Animated, {
import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {TabBar} from './TabBar'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
const SCROLLED_DOWN_LIMIT = 200
interface PagerWithHeaderChildParams {
headerHeight: number
- onScroll: OnScrollCb
+ onScroll: (e: NativeScrollEvent) => void
isScrolledDown: boolean
}
@@ -140,12 +143,18 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
],
)
- // props to pass into children render functions
- const onScroll = useAnimatedScrollHandler({
- onScroll(e) {
+ // Ideally we'd call useAnimatedScrollHandler here but we can't safely do that
+ // due to https://github.com/software-mansion/react-native-reanimated/issues/5345.
+ // So instead we pass down a worklet, and individual pages will have to call it.
+ const onScroll = React.useCallback(
+ (e: NativeScrollEvent) => {
+ 'worklet'
scrollY.value = e.contentOffset.y
},
- })
+ [scrollY],
+ )
+
+ // props to pass into children render functions
const childProps = React.useMemo<PagerWithHeaderChildParams>(() => {
return {
headerHeight,
diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx
index dcfec116..a4d146d6 100644
--- a/src/view/screens/ProfileFeed.tsx
+++ b/src/view/screens/ProfileFeed.tsx
@@ -1,7 +1,14 @@
import React, {useMemo, useCallback} from 'react'
-import {FlatList, StyleSheet, View, ActivityIndicator} from 'react-native'
+import {
+ FlatList,
+ NativeScrollEvent,
+ StyleSheet,
+ View,
+ ActivityIndicator,
+} from 'react-native'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {useNavigation} from '@react-navigation/native'
+import {useAnimatedScrollHandler} from 'react-native-reanimated'
import {usePalette} from 'lib/hooks/usePalette'
import {HeartIcon, HeartIconSolid} from 'lib/icons'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -26,7 +33,6 @@ import {EmptyState} from 'view/com/util/EmptyState'
import * as Toast from 'view/com/util/Toast'
import {useSetTitle} from 'lib/hooks/useSetTitle'
import {useCustomFeed} from 'lib/hooks/useCustomFeed'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {shareUrl} from 'lib/sharing'
import {toShareUrl} from 'lib/strings/url-helpers'
import {Haptics} from 'lib/haptics'
@@ -345,17 +351,14 @@ export const ProfileFeedScreenInner = observer(
/>
)}
{({onScroll, headerHeight}) => (
- <ScrollView
+ <AboutSection
+ feedOwnerDid={feedOwnerDid}
+ feedRkey={rkey}
+ feedInfo={feedInfo}
+ headerHeight={headerHeight}
+ onToggleLiked={onToggleLiked}
onScroll={onScroll}
- scrollEventThrottle={1}
- contentContainerStyle={{paddingTop: headerHeight}}>
- <AboutSection
- feedOwnerDid={feedOwnerDid}
- feedRkey={rkey}
- feedInfo={feedInfo}
- onToggleLiked={onToggleLiked}
- />
- </ScrollView>
+ />
)}
</PagerWithHeader>
<FAB
@@ -379,7 +382,7 @@ export const ProfileFeedScreenInner = observer(
interface FeedSectionProps {
feed: PostsFeedModel
- onScroll: OnScrollCb
+ onScroll: (e: NativeScrollEvent) => void
headerHeight: number
isScrolledDown: boolean
}
@@ -404,12 +407,13 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
return <EmptyState icon="feed" message="This feed is empty!" />
}, [])
+ const scrollHandler = useAnimatedScrollHandler({onScroll})
return (
<View>
<Feed
feed={feed}
scrollElRef={scrollElRef}
- onScroll={onScroll}
+ onScroll={scrollHandler}
scrollEventThrottle={5}
renderEmptyState={renderPostsEmpty}
headerOffset={headerHeight}
@@ -430,82 +434,93 @@ const AboutSection = observer(function AboutPageImpl({
feedOwnerDid,
feedRkey,
feedInfo,
+ headerHeight,
onToggleLiked,
+ onScroll,
}: {
feedOwnerDid: string
feedRkey: string
feedInfo: FeedSourceModel | undefined
+ headerHeight: number
onToggleLiked: () => void
+ onScroll: (e: NativeScrollEvent) => void
}) {
const pal = usePalette('default')
+ const scrollHandler = useAnimatedScrollHandler({onScroll})
if (!feedInfo) {
return <View />
}
+
return (
- <View
- style={[
- {
- borderTopWidth: 1,
- paddingVertical: 20,
- paddingHorizontal: 20,
- gap: 12,
- },
- pal.border,
- ]}>
- {feedInfo.descriptionRT ? (
- <RichText
- testID="listDescription"
- type="lg"
- style={pal.text}
- richText={feedInfo.descriptionRT}
- />
- ) : (
- <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
- No description
- </Text>
- )}
- <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
- <Button
- type="default"
- testID="toggleLikeBtn"
- accessibilityLabel="Like this feed"
- accessibilityHint=""
- onPress={onToggleLiked}
- style={{paddingHorizontal: 10}}>
- {feedInfo?.isLiked ? (
- <HeartIconSolid size={19} style={styles.liked} />
- ) : (
- <HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
- )}
- </Button>
- {typeof feedInfo.likeCount === 'number' && (
- <TextLink
- href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')}
- text={`Liked by ${feedInfo.likeCount} ${pluralize(
- feedInfo.likeCount,
- 'user',
- )}`}
- style={[pal.textLight, s.semiBold]}
+ <ScrollView
+ scrollEventThrottle={1}
+ contentContainerStyle={{paddingTop: headerHeight}}
+ onScroll={scrollHandler}>
+ <View
+ style={[
+ {
+ borderTopWidth: 1,
+ paddingVertical: 20,
+ paddingHorizontal: 20,
+ gap: 12,
+ },
+ pal.border,
+ ]}>
+ {feedInfo.descriptionRT ? (
+ <RichText
+ testID="listDescription"
+ type="lg"
+ style={pal.text}
+ richText={feedInfo.descriptionRT}
/>
- )}
- </View>
- <Text type="md" style={[pal.textLight]} numberOfLines={1}>
- Created by{' '}
- {feedInfo.isOwner ? (
- 'you'
) : (
- <TextLink
- text={sanitizeHandle(feedInfo.creatorHandle, '@')}
- href={makeProfileLink({
- did: feedInfo.creatorDid,
- handle: feedInfo.creatorHandle,
- })}
- style={pal.textLight}
- />
+ <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
+ No description
+ </Text>
)}
- </Text>
- </View>
+ <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
+ <Button
+ type="default"
+ testID="toggleLikeBtn"
+ accessibilityLabel="Like this feed"
+ accessibilityHint=""
+ onPress={onToggleLiked}
+ style={{paddingHorizontal: 10}}>
+ {feedInfo?.isLiked ? (
+ <HeartIconSolid size={19} style={styles.liked} />
+ ) : (
+ <HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
+ )}
+ </Button>
+ {typeof feedInfo.likeCount === 'number' && (
+ <TextLink
+ href={makeCustomFeedLink(feedOwnerDid, feedRkey, 'liked-by')}
+ text={`Liked by ${feedInfo.likeCount} ${pluralize(
+ feedInfo.likeCount,
+ 'user',
+ )}`}
+ style={[pal.textLight, s.semiBold]}
+ />
+ )}
+ </View>
+ <Text type="md" style={[pal.textLight]} numberOfLines={1}>
+ Created by{' '}
+ {feedInfo.isOwner ? (
+ 'you'
+ ) : (
+ <TextLink
+ text={sanitizeHandle(feedInfo.creatorHandle, '@')}
+ href={makeProfileLink({
+ did: feedInfo.creatorDid,
+ handle: feedInfo.creatorHandle,
+ })}
+ style={pal.textLight}
+ />
+ )}
+ </Text>
+ </View>
+ </ScrollView>
)
})
diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
index 69259659..594e9fd2 100644
--- a/src/view/screens/ProfileList.tsx
+++ b/src/view/screens/ProfileList.tsx
@@ -2,6 +2,7 @@ import React, {useCallback, useMemo} from 'react'
import {
ActivityIndicator,
FlatList,
+ NativeScrollEvent,
Pressable,
StyleSheet,
View,
@@ -10,6 +11,7 @@ import {useFocusEffect} from '@react-navigation/native'
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
import {useNavigation} from '@react-navigation/native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useAnimatedScrollHandler} from 'react-native-reanimated'
import {observer} from 'mobx-react-lite'
import {RichText as RichTextAPI} from '@atproto/api'
import {withAuthRequired} from 'view/com/auth/withAuthRequired'
@@ -33,7 +35,6 @@ import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useSetTitle} from 'lib/hooks/useSetTitle'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
import {NavigationProp} from 'lib/routes/types'
import {toShareUrl} from 'lib/strings/url-helpers'
import {shareUrl} from 'lib/sharing'
@@ -544,7 +545,7 @@ const Header = observer(function HeaderImpl({
interface FeedSectionProps {
feed: PostsFeedModel
- onScroll: OnScrollCb
+ onScroll: (e: NativeScrollEvent) => void
headerHeight: number
isScrolledDown: boolean
}
@@ -568,13 +569,14 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
return <EmptyState icon="feed" message="This feed is empty!" />
}, [])
+ const scrollHandler = useAnimatedScrollHandler({onScroll})
return (
<View>
<Feed
testID="listFeed"
feed={feed}
scrollElRef={scrollElRef}
- onScroll={onScroll}
+ onScroll={scrollHandler}
scrollEventThrottle={1}
renderEmptyState={renderPostsEmpty}
headerOffset={headerHeight}
@@ -598,7 +600,7 @@ interface AboutSectionProps {
isCurateList: boolean | undefined
isOwner: boolean | undefined
onPressAddUser: () => void
- onScroll: OnScrollCb
+ onScroll: (e: NativeScrollEvent) => void
headerHeight: number
isScrolledDown: boolean
}
@@ -723,6 +725,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
)
}, [])
+ const scrollHandler = useAnimatedScrollHandler({onScroll})
return (
<View>
<ListItems
@@ -732,7 +735,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
renderEmptyState={renderEmptyState}
list={list}
headerOffset={headerHeight}
- onScroll={onScroll}
+ onScroll={scrollHandler}
scrollEventThrottle={1}
/>
{isScrolledDown && (