diff --git a/screen/wallets/WalletTransactions.tsx b/screen/wallets/WalletTransactions.tsx index 38349c3f4..aacafe2b6 100644 --- a/screen/wallets/WalletTransactions.tsx +++ b/screen/wallets/WalletTransactions.tsx @@ -1,4 +1,4 @@ -import { RouteProp, useFocusEffect, useRoute } from '@react-navigation/native'; +import { RouteProp, useFocusEffect, useRoute, useIsFocused } from '@react-navigation/native'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { ActivityIndicator, @@ -80,6 +80,8 @@ const WalletTransactions: React.FC = ({ route }) => { outputRange: [0, -HEADER_HEIGHT], extrapolate: 'clamp', }); + const flatListRef = useRef(null); + const isFocused = useIsFocused(); const stylesHook = StyleSheet.create({ listHeaderText: { @@ -93,6 +95,21 @@ const WalletTransactions: React.FC = ({ route }) => { }, [route, setOptions]), ); + // Reset header position when navigating away from screen + useFocusEffect( + useCallback(() => { + return () => { + // This will run when screen loses focus + scrollY.setValue(0); + // Reset FlatList scroll position to top + if (flatListRef.current) { + flatListRef.current.scrollToOffset({ offset: 0, animated: false }); + } + setOptions(getWalletTransactionsOptions({ route })); + }; + }, [scrollY, setOptions, route]), + ); + const onBarCodeRead = useCallback( (ret?: { data?: any }) => { if (!isLoading) { @@ -421,7 +438,7 @@ const WalletTransactions: React.FC = ({ route }) => { }, [wallet, wallet?.hideBalance, wallet?.preferredBalanceUnit, balance]); const handleScroll = useCallback( - (event: any) => { + (event: any) => { const offsetY = event.nativeEvent.contentOffset.y; const combinedHeight = 180; if (offsetY < combinedHeight) { @@ -491,6 +508,7 @@ const WalletTransactions: React.FC = ({ route }) => { + ref={flatListRef} getItemLayout={getItemLayout} updateCellsBatchingPeriod={30} onEndReachedThreshold={0.3}