Scroll to top when tapping on the active tab.

src/navigation/card/components/CardDashboard.tsx

@@ -1,4 +1,8 @@
-import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import {
+  useFocusEffect,
+  useNavigation,
+  useScrollToTop,
+} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useLayoutEffect, useMemo} from 'react';
 import {useRef, useState} from 'react';
@@ -360,6 +364,9 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
     });
   }
 
+  const flatListRef = useRef<FlatList>(null);
+  useScrollToTop(flatListRef);
+
   return (
     <>
       <FlatList
@@ -419,6 +426,7 @@ const CardDashboard: React.FC<CardDashboardProps> = props => {
         }
         ListFooterComponent={listFooterComponent}
         ListEmptyComponent={listEmptyComponent}
+        ref={flatListRef}
       />
       <FloatingActionButtonContainer>
         <FloatingActionButton

src/navigation/card/components/CardIntro.tsx

@@ -1,5 +1,5 @@
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useLayoutEffect} from 'react';
+import React, {useLayoutEffect, useRef} from 'react';
 import {useTranslation} from 'react-i18next';
 import {ScrollView, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
@@ -28,6 +28,7 @@ import {CardStackParamList} from '../CardStack';
 import CardFeatureTabs from './CardIntroFeatureTabs';
 import CardIntroHeroImg from './CardIntroHeroImage';
 import CardHighlights from './CardIntroHighlights';
+import {useScrollToTop} from '@react-navigation/native';
 
 interface CardIntroProps {
   navigation: StackNavigationProp<CardStackParamList, 'CardHome'>;
@@ -94,9 +95,13 @@ const CardIntro: React.FC<CardIntroProps> = props => {
     });
   }, [navigation]);
 
+  const scrollViewRef = useRef<ScrollView>(null);
+  useScrollToTop(scrollViewRef);
+
   return (
     <>
       <ScrollView
+        ref={scrollViewRef}
         style={{
           marginTop: insets.top,
         }}>

src/navigation/tabs/home/HomeRoot.tsx

@@ -1,5 +1,9 @@
-import {useNavigation, useTheme} from '@react-navigation/native';
-import React, {useEffect, useMemo, useState} from 'react';
+import {
+  useNavigation,
+  useScrollToTop,
+  useTheme,
+} from '@react-navigation/native';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {RefreshControl, ScrollView} from 'react-native';
 import {STATIC_CONTENT_CARDS_ENABLED} from '../../../constants/config';
 import {SupportedCurrencyOptions} from '../../../constants/SupportedCurrencyOptions';
@@ -183,10 +187,14 @@ const HomeRoot = () => {
     }
   }, [dispatch, keyMigrationFailure, keyMigrationFailureModalHasBeenShown]);
 
+  const scrollViewRef = useRef<ScrollView>(null);
+  useScrollToTop(scrollViewRef);
+
   return (
     <HomeContainer>
       {appIsLoading ? null : (
         <ScrollView
+          ref={scrollViewRef}
           refreshControl={
             <RefreshControl
               tintColor={theme.dark ? White : SlateDark}

src/navigation/tabs/settings/SettingsRoot.tsx

@@ -1,7 +1,7 @@
 import {StackScreenProps} from '@react-navigation/stack';
-import React, {ReactElement, useMemo} from 'react';
+import React, {ReactElement, useMemo, useRef} from 'react';
 import {useTranslation} from 'react-i18next';
-import {View, LayoutAnimation} from 'react-native';
+import {View, LayoutAnimation, ScrollView} from 'react-native';
 import styled from 'styled-components/native';
 import AngleRight from '../../../../assets/img/angle-right.svg';
 import Avatar from '../../../components/avatar/BitPayIdAvatar';
@@ -33,6 +33,7 @@ import {useSelector} from 'react-redux';
 import Crypto from './components/Crypto';
 import WalletsAndKeys from './components/WalletsAndKeys';
 import {SettingsStackParamList} from './SettingsStack';
+import {useScrollToTop} from '@react-navigation/native';
 
 interface HomeSetting {
   id: SettingsListType;
@@ -218,9 +219,12 @@ const SettingsHomeScreen: React.VFC<SettingsHomeProps> = ({route}) => {
     );
   }, [dispatch, memoizedSettingsConfigs, hideList]);
 
+  const scrollViewRef = useRef<ScrollView>(null);
+  useScrollToTop(scrollViewRef);
+
   return (
     <SettingsContainer>
-      <SettingsHome>
+      <SettingsHome ref={scrollViewRef}>
         <BitPayIdSettingsLink
           style={{paddingHorizontal: 15}}
           onPress={() => {

src/navigation/tabs/shop/ShopHome.tsx

@@ -24,7 +24,7 @@ import {useAppSelector} from '../../../utils/hooks';
 import {StackScreenProps} from '@react-navigation/stack';
 import {ShopScreens, ShopStackParamList} from './ShopStack';
 import {useTranslation} from 'react-i18next';
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useScrollToTop} from '@react-navigation/native';
 import {logSegmentEvent} from '../../../store/app/app.effects';
 
 export enum ShopTabs {
@@ -107,7 +107,9 @@ const ShopHome: React.FC<
     [purchasedGiftCards],
   );
   const categoriesAndCurations = useAppSelector(selectCategoriesAndCurations);
+
   const scrollViewRef = useRef<ScrollView>(null);
+  useScrollToTop(scrollViewRef);
 
   const availableGiftCards = useMemo(
     () =>

src/navigation/tabs/shop/gift-card/screens/ArchivedGiftCards.tsx

@@ -1,5 +1,5 @@
-import React, {useCallback, useEffect} from 'react';
-import {useNavigation} from '@react-navigation/native';
+import React, {useCallback, useEffect, useRef} from 'react';
+import {useNavigation, useScrollToTop} from '@react-navigation/native';
 import {StackScreenProps} from '@react-navigation/stack';
 import {SectionContainer} from '../../components/styled/ShopTabComponents';
 import {GiftCardScreens} from '../GiftCardStack';
@@ -57,12 +57,17 @@ const ArchivedGiftCards = ({
     },
     [navigator, supportedGiftCardMap],
   );
+
+  const flatListRef = useRef<FlatList>(null);
+  useScrollToTop(flatListRef);
+
   return (
     <SectionContainer>
       <FlatList
         data={giftCards}
         renderItem={renderItem}
         keyExtractor={item => item.invoiceId}
+        ref={flatListRef}
       />
     </SectionContainer>
   );