feat: scroll to top on bottom tab press

Author: khushal87

examples/SampleApp/src/components/MessageSearch/MessageSearchList.tsx

@@ -72,6 +72,7 @@ export type MessageSearchListProps = {
   refreshing: boolean;
   refreshList: () => void;
   showResultCount?: boolean;
+  scrollRef?: React.Ref<FlatList>;
 };
 export const MessageSearchList: React.FC<MessageSearchListProps> = ({
   EmptySearchIndicator,
@@ -81,6 +82,7 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = ({
   refreshing,
   refreshList,
   showResultCount = false,
+  scrollRef,
 }) => {
   const {
     theme: {
@@ -124,6 +126,7 @@ export const MessageSearchList: React.FC<MessageSearchListProps> = ({
         onEndReached={loadMore}
         onRefresh={refreshList}
         refreshing={refreshing}
+        ref={scrollRef}
         renderItem={({ item }) => (
           <TouchableOpacity
             onPress={() => {

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useMemo, useRef, useState } from 'react';
 import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useScrollToTop } from '@react-navigation/native';
 import { ChannelList, CircleClose, Search, useTheme } from 'stream-chat-react-native';
 
 import { ChannelPreview } from '../components/ChannelPreview';
@@ -76,6 +76,8 @@ export const ChannelListScreen: React.FC = () => {
   } = useTheme();
 
   const searchInputRef = useRef<TextInput | null>(null);
+  const scrollRef = useRef(null);
+
   const [searchInputText, setSearchInputText] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -93,6 +95,8 @@ export const ChannelListScreen: React.FC = () => {
     [chatClientUserId],
   );
 
+  useScrollToTop(scrollRef);
+
   const EmptySearchIndicator = () => (
     <View style={styles.emptyIndicatorContainer}>
       <Search height={112} pathFill={grey_gainsboro} width={112} />
@@ -168,6 +172,7 @@ export const ChannelListScreen: React.FC = () => {
             refreshing={refreshing}
             refreshList={refreshList}
             showResultCount
+            scrollRef={scrollRef}
           />
         )}
         <View style={{ flex: searchQuery ? 0 : 1 }}>
@@ -200,6 +205,7 @@ export const ChannelListScreen: React.FC = () => {
               options={options}
               Preview={ChannelPreview}
               sort={sort}
+              setFlatListRef={(ref) => (scrollRef.current = ref)}
             />
           </View>
         </View>

examples/SampleApp/src/screens/MentionsScreen.tsx

@@ -1,10 +1,11 @@
-import React, { useContext, useMemo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useContext, useMemo, useRef } from 'react';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
 import { AtMentions, useTheme } from 'stream-chat-react-native';
 
 import { ChatScreenHeader } from '../components/ChatScreenHeader';
 import { MessageSearchList } from '../components/MessageSearch/MessageSearchList';
 import { usePaginatedSearchedMessages } from '../hooks/usePaginatedSearchedMessages';
+import { useScrollToTop } from '@react-navigation/native';
 
 import type { StackNavigationProp } from '@react-navigation/stack';
 
@@ -61,6 +62,10 @@ export const MentionsScreen: React.FC<MentionsScreenProps> = () => {
     [chatClient],
   );
 
+  const scrollRef = useRef<FlatList>(null);
+
+  useScrollToTop(scrollRef);
+
   const { loading, loadMore, messages, refreshing, refreshList } =
     usePaginatedSearchedMessages(messageFilters);
 
@@ -74,16 +79,15 @@ export const MentionsScreen: React.FC<MentionsScreenProps> = () => {
       ]}
     >
       <ChatScreenHeader />
-      <View style={styles.container}>
-        <MessageSearchList
-          EmptySearchIndicator={EmptyMentionsSearchIndicator}
-          loading={loading}
-          loadMore={loadMore}
-          messages={messages}
-          refreshing={refreshing}
-          refreshList={refreshList}
-        />
-      </View>
+      <MessageSearchList
+        EmptySearchIndicator={EmptyMentionsSearchIndicator}
+        loading={loading}
+        loadMore={loadMore}
+        messages={messages}
+        refreshing={refreshing}
+        refreshList={refreshList}
+        scrollRef={scrollRef}
+      />
     </View>
   );
 };