feat: scroll to top on bottom tab press

Author: khushal87

examples/SampleApp/src/components/BottomTabs.tsx

@@ -80,6 +80,11 @@ export const BottomTabs: React.FC<BottomTabBarProps> = (props) => {
         const isFocused = state.index === index;
 
         const onPress = () => {
+          navigation.emit({
+            target: route.key,
+            type: 'tabPress',
+            canPreventDefault: true,
+          });
           if (!isFocused) {
             navigation.navigate(route.name);
           }

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

@@ -72,7 +72,7 @@ export type MessageSearchListProps = {
   refreshing: boolean;
   refreshList: () => void;
   showResultCount?: boolean;
-  scrollRef?: React.Ref<FlatList>;
+  scrollRef: React.Ref<FlatList<any>>;
 };
 export const MessageSearchList: React.FC<MessageSearchListProps> = ({
   EmptySearchIndicator,

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useRef, useState } from 'react';
-import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { useNavigation, useScrollToTop } from '@react-navigation/native';
 import { ChannelList, CircleClose, Search, useTheme } from 'stream-chat-react-native';
 
@@ -76,7 +76,7 @@ export const ChannelListScreen: React.FC = () => {
   } = useTheme();
 
   const searchInputRef = useRef<TextInput | null>(null);
-  const scrollRef = useRef(null);
+  const scrollRef = useRef<FlatList<any>>(null);
 
   const [searchInputText, setSearchInputText] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
@@ -108,6 +108,10 @@ export const ChannelListScreen: React.FC = () => {
 
   if (!chatClient) return null;
 
+  const setScrollRef = (ref: React.RefObject<FlatList<any>>) => {
+    scrollRef.current = ref;
+  };
+
   return (
     <View
       style={[
@@ -205,7 +209,7 @@ export const ChannelListScreen: React.FC = () => {
               options={options}
               Preview={ChannelPreview}
               sort={sort}
-              setFlatListRef={(ref) => (scrollRef.current = ref)}
+              setFlatListRef={setScrollRef}
             />
           </View>
         </View>

examples/SampleApp/src/screens/MentionsScreen.tsx

@@ -62,7 +62,7 @@ export const MentionsScreen: React.FC<MentionsScreenProps> = () => {
     [chatClient],
   );
 
-  const scrollRef = useRef<FlatList>(null);
+  const scrollRef = useRef<FlatList<any>>(null);
 
   useScrollToTop(scrollRef);