From 3ca0398714d8aca9d78f5e55cc8874fc917062be Mon Sep 17 00:00:00 2001
From: Rahul <62512215+rahulnr7@users.noreply.github.com>
Date: Wed, 17 Apr 2024 14:15:41 +0530
Subject: [PATCH] fix(wallet-mobile): Non sticky max address message (#3202)

---
 .../useCases/ListMultipleAddressesScreen.tsx  | 56 ++++++++++++++++---
 1 file changed, 47 insertions(+), 9 deletions(-)

diff --git a/apps/wallet-mobile/src/features/Receive/useCases/ListMultipleAddressesScreen.tsx b/apps/wallet-mobile/src/features/Receive/useCases/ListMultipleAddressesScreen.tsx
index f9ca8e751d..c1c1519f92 100644
--- a/apps/wallet-mobile/src/features/Receive/useCases/ListMultipleAddressesScreen.tsx
+++ b/apps/wallet-mobile/src/features/Receive/useCases/ListMultipleAddressesScreen.tsx
@@ -1,7 +1,16 @@
 import {useFocusEffect} from '@react-navigation/native'
 import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
-import {StyleSheet, View, ViewToken} from 'react-native'
+import {
+  InteractionManager,
+  LayoutAnimation,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  StyleSheet,
+  View,
+  ViewToken,
+} from 'react-native'
 import Animated, {Layout} from 'react-native-reanimated'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
@@ -72,10 +81,32 @@ export const ListMultipleAddressesScreen = () => {
     }, [track]),
   )
 
+  const [showAddressLimitInfo, setShowAddressLimitInfo] = React.useState(true)
+  const scrollViewRef = React.useRef<ScrollView>(null)
+
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (event.nativeEvent.contentOffset.y <= 0) {
+      InteractionManager.runAfterInteractions(() => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+        setShowAddressLimitInfo(true)
+      })
+    } else if (showAddressLimitInfo && event.nativeEvent.contentOffset.y > 0) {
+      setShowAddressLimitInfo(false)
+    }
+  }
+  React.useEffect(() => {
+    if (hasReachedGapLimit) {
+      InteractionManager.runAfterInteractions(() => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+        setShowAddressLimitInfo(true)
+      })
+    }
+  }, [hasReachedGapLimit])
+
   return (
     <SafeAreaView style={styles.root} edges={['left', 'right', 'bottom']}>
       <View style={styles.content}>
-        {hasReachedGapLimit && (
+        {showAddressLimitInfo && hasReachedGapLimit && (
           <>
             <ShowAddressLimitInfo />
 
@@ -83,14 +114,21 @@ export const ListMultipleAddressesScreen = () => {
           </>
         )}
 
-        <Animated.FlatList
-          data={addressInfos}
-          keyExtractor={(addressInfo) => addressInfo.address}
-          renderItem={renderAddressInfo}
-          layout={Layout}
+        <ScrollView
+          ref={scrollViewRef}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
           showsVerticalScrollIndicator={false}
-          onViewableItemsChanged={onViewableItemsChanged}
-        />
+        >
+          <Animated.FlatList
+            data={addressInfos}
+            keyExtractor={(addressInfo) => addressInfo.address}
+            renderItem={renderAddressInfo}
+            layout={Layout}
+            showsVerticalScrollIndicator={false}
+            onViewableItemsChanged={onViewableItemsChanged}
+          />
+        </ScrollView>
       </View>
 
       <Animated.View