fix(wallet-mobile): Non sticky max address message (#3202)

Emurgo · Apr 17, 2024 · 3ca0398 · 3ca0398
1 parent 053292a
commit 3ca0398
Showing 1 changed file with 47 additions and 9 deletions.
diff --git 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,25 +81,54 @@ 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 />
 
             <Spacer height={16} />
           </>
         )}
 
-        <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