Scroll to top of feed on tap retap

Changelog: enhancement

Author: markharding

apps/polycentric/src/common/components/List.tsx

@@ -9,8 +9,10 @@ import {
 } from '@shopify/flash-list';
 import React, {
   cloneElement,
+  forwardRef,
   isValidElement,
   useEffect,
+  useImperativeHandle,
   useRef,
   useState,
 } from 'react';
@@ -43,22 +45,39 @@ export type ListProps<T> = FlashListProps<T> & {
     | undefined;
 };
 
-export function List<T extends PostData = PostData>(props: ListProps<T>) {
+/** Imperative handle exposed by `List` (and `FeedList`). */
+export type ListRef = { scrollToTop: () => void };
+
+export const List = forwardRef(function List<T extends PostData = PostData>(
+  props: ListProps<T>,
+  ref: React.Ref<ListRef>,
+) {
   if (isWeb) {
-    return <WebFeedViewer<T> {...props} />;
+    return <WebFeedViewer<T> {...props} listRef={ref} />;
   }
 
-  return <NativeList<T> {...props} />;
-}
+  return <NativeList<T> {...props} listRef={ref} />;
+}) as <T extends PostData = PostData>(
+  props: ListProps<T> & { ref?: React.Ref<ListRef> },
+) => React.ReactElement;
 
 function NativeList<T>({
   HeaderComponent,
   contentContainerStyle,
   refreshControl,
   onScroll: _ignoredOnScroll,
+  listRef,
   ...rest
-}: ListProps<T>) {
+}: ListProps<T> & { listRef?: React.Ref<ListRef> }) {
   const ref = useRef<FlashListRef<T>>(null);
+  useImperativeHandle(
+    listRef,
+    () => ({
+      scrollToTop: () =>
+        ref.current?.scrollToOffset({ offset: 0, animated: true }),
+    }),
+    [],
+  );
   const lastScrollY = useSharedValue(0);
   const headerTranslate = useSharedValue(0);
   const headerHeightShared = useSharedValue(0);
@@ -139,6 +158,7 @@ function NativeList<T>({
       ) : null}
 
       <AnimatedFlashList
+        ref={ref as React.Ref<FlashListRef<unknown>>}
         {...(rest as FlashListProps<unknown>)}
         refreshControl={adjustedRefreshControl}
         onScroll={onScroll}
@@ -166,8 +186,20 @@ function WebFeedViewer<T>({
   onEndReached,
   contentContainerStyle,
   stickyHeaderIndices,
-}: ListProps<T>) {
+  listRef,
+}: ListProps<T> & { listRef?: React.Ref<ListRef> }) {
   const sentinelRef = useRef<View>(null);
+  useImperativeHandle(
+    listRef,
+    () => ({
+      scrollToTop: () => {
+        if (typeof window !== 'undefined') {
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+      },
+    }),
+    [],
+  );
   const items = (data as readonly T[] | null | undefined) ?? [];
   const [visibleCount, setVisibleCount] = useState(WEB_INITIAL_VISIBLE);
 

apps/polycentric/src/features/feed/ExploreScreen.tsx

@@ -13,8 +13,9 @@ import {
 } from '@/src/common/theme';
 import { isIOS, isWeb } from '@/src/common/util/platform';
 import { useFocusEffect } from 'expo-router';
-import { useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Alert, Pressable, View } from 'react-native';
+import type { ListRef } from '@/src/common/components/List';
 import { ComposerInput } from '../composer';
 import FeedList from './FeedList';
 import { useExploreFeed } from './hooks/useExploreFeed';
@@ -72,12 +73,20 @@ export default function ExploreScreen() {
 
   const [enabled, setEnabled] = useState<boolean>(false);
   const feed = useExploreFeed({ enabled });
+  const listRef = useRef<ListRef>(null);
 
   useFocusEffect(() => {
     setEnabled(true);
   });
 
-  useFocusedRefresh(feed.refresh);
+  // Re-tapping the active tab scrolls to the top and refreshes.
+  const { refresh } = feed;
+  useFocusedRefresh(
+    useCallback(() => {
+      listRef.current?.scrollToTop();
+      refresh();
+    }, [refresh]),
+  );
 
   if (feed.error) {
     return (
@@ -101,7 +110,7 @@ export default function ExploreScreen() {
   return (
     <Screen>
       <Screen.PrimaryColumn>
-        <FeedList feed={feed} HeaderComponent={ListHeader} />
+        <FeedList ref={listRef} feed={feed} HeaderComponent={ListHeader} />
         {showComposeFab ? (
           <Fab
             onPress={openCompose}

apps/polycentric/src/features/feed/FeedList.tsx

@@ -1,7 +1,9 @@
+import { forwardRef } from 'react';
 import { ActivityIndicator, RefreshControl, View } from 'react-native';
 import {
   List,
   type ListProps,
+  type ListRef,
   type ListRenderItem,
 } from '../../common/components/List';
 import type { FeedHookResult } from './hooks/types';
@@ -25,19 +27,23 @@ const defaultRenderItem: ListRenderItem<PostData> = ({ item }) => (
   <Post post={item} />
 );
 
-export default function FeedList({
-  feed,
-  emptyMessage = 'No posts yet',
-  renderItem = defaultRenderItem,
-  keyExtractor = defaultKeyExtractor,
-  ...rest
-}: FeedListProps) {
+const FeedList = forwardRef<ListRef, FeedListProps>(function FeedList(
+  {
+    feed,
+    emptyMessage = 'No posts yet',
+    renderItem = defaultRenderItem,
+    keyExtractor = defaultKeyExtractor,
+    ...rest
+  },
+  ref,
+) {
   const { theme } = useTheme();
 
   const insets = useSafeAreaInsets();
 
   return (
     <List<PostData>
+      ref={ref}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
       data={feed.items}
@@ -84,4 +90,6 @@ export default function FeedList({
       {...rest}
     />
   );
-}
+});
+
+export default FeedList;

apps/polycentric/src/features/feed/FeedScreen.tsx

@@ -9,8 +9,9 @@ import { Atoms } from '@/src/common/theme';
 import { isIOS, isWeb } from '@/src/common/util/platform';
 import { ComposerInput } from '@/src/features/composer';
 import { useFocusEffect } from 'expo-router';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { View } from 'react-native';
+import type { ListRef } from '@/src/common/components/List';
 import FeedList from './FeedList';
 import { useFollowingFeed } from './hooks/useFollowingFeed';
 
@@ -29,14 +30,22 @@ export default function FeedScreen() {
 
   const [enabled, setEnabled] = useState<boolean>(false);
   const feed = useFollowingFeed({ enabled });
+  const listRef = useRef<ListRef>(null);
 
   useFocusEffect(
     useCallback(() => {
       setEnabled(true);
     }, [setEnabled]),
   );
 
-  useFocusedRefresh(feed.refresh);
+  // Re-tapping the active tab scrolls to the top and refreshes.
+  const { refresh } = feed;
+  useFocusedRefresh(
+    useCallback(() => {
+      listRef.current?.scrollToTop();
+      refresh();
+    }, [refresh]),
+  );
 
   if (feed.error) {
     return (
@@ -60,7 +69,7 @@ export default function FeedScreen() {
   return (
     <Screen>
       <Screen.PrimaryColumn>
-        <FeedList feed={feed} HeaderComponent={ListHeader} />
+        <FeedList ref={listRef} feed={feed} HeaderComponent={ListHeader} />
         {showComposeFab ? (
           <Fab
             onPress={openCompose}