Pull animated scroll handler down from pager (#1827)

2023-11-07 16:46:39 +00:00 · 2023-11-07 16:46:39 +00:00 · 7b2a7db83c
parent fa821943da
commit 7b2a7db83c
3 changed files with 114 additions and 87 deletions
--- 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,
--- 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>
  )
 })

--- 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 && (