Fix animation in trasnaction list, small UI fixes

android/app/build.gradle

@@ -95,7 +95,7 @@ android {
         applicationId "com.minibits_wallet"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 58033
+        versionCode 58034
         versionName "0.2.2"
     }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "minibits_wallet",
-  "version": "0.2.2-beta.4",
+  "version": "0.2.2-beta.5",
   "private": true,
   "scripts": {
     "android:clean": "cd android && ./gradlew clean",

src/components/Card.tsx

@@ -308,7 +308,7 @@ export const Card = function (props: CardProps) {
 const $containerBase: ViewStyle = {
   borderRadius: spacing.medium,
   paddingHorizontal: spacing.medium,
-  paddingVertical: spacing.small,
+  paddingVertical: spacing.extraSmall,
  // borderWidth: 1,
   shadowColor: colors.palette.neutral600,
   shadowOffset: { width: 0, height: 10 },

src/components/ListItem.tsx

@@ -135,8 +135,7 @@ interface ListItemActionProps {
  *
  * - [Documentation and Examples](https://github.com/infinitered/ignite/blob/master/docs/Components-ListItem.md)
  */
-export const ListItem = function (props: ListItemProps) {
-  const colorScheme = useColorScheme()  
+export const ListItem = function (props: ListItemProps) { 
 
   const {
     bottomSeparator,
@@ -179,7 +178,7 @@ export const ListItem = function (props: ListItemProps) {
   const $containerStyles = [
     topSeparator && $separatorTop, { borderTopColor: separatorColor },
     bottomSeparator && $separatorBottom, { borderBottomColor: separatorColor },
-    $containerStyleOverride, {paddingVertical: spacing.tiny - 2},
+    $containerStyleOverride, {paddingVertical: spacing.tiny},
   ]
 
   const $touchableStyles = [$touchableStyle, { minHeight: height }, style]

src/screens/DeveloperScreen.tsx

@@ -315,7 +315,7 @@ Sentry id: ${walletProfileStore.walletId}
           <Card
             label='Danger zone'
             labelStyle={{marginTop: spacing.medium}}
-            style={[$card]}
+            style={[$card, {marginBottom: spacing.large}]}
             HeadingComponent={
               <>
                 <ListItem

src/screens/SettingsScreen.tsx

@@ -284,7 +284,7 @@ export const SettingsScreen = observer(function SettingsScreen({ route }: Props)
     
     return (
       <Screen contentContainerStyle={$screen} preset='fixed'>
-          <View style={[$headerContainer, {backgroundColor: headerBg}]}>
+          <View style={[isHeaderVisible ? $headerContainer : $headerCollapsed, {backgroundColor: headerBg}]}>
            <Text
             preset='heading'
             tx='settingsScreen.title'
@@ -444,7 +444,7 @@ export const SettingsScreen = observer(function SettingsScreen({ route }: Props)
             }
           />
           <Card
-            style={[$card, {marginTop: spacing.large}]}
+            style={[$card, {marginVertical: spacing.large}]}
             ContentComponent={
               <>
                 <ListItem
@@ -559,7 +559,6 @@ export const SettingsScreen = observer(function SettingsScreen({ route }: Props)
 )
 
 const $screen: ViewStyle = {
-  
 
 }
 
@@ -569,9 +568,16 @@ const $headerContainer: TextStyle = {
   height: spacing.screenHeight * 0.20,
 }
 
+const $headerCollapsed: TextStyle = {
+  alignItems: 'center',
+  paddingBottom: spacing.medium,
+  height: spacing.screenHeight * 0.08,
+}
+
 const $contentContainer: TextStyle = {
   marginTop: -spacing.extraLarge * 2,
   padding: spacing.extraSmall,
+  
 }
 
 const $card: ViewStyle = {

src/screens/TranHistoryScreen.tsx

@@ -10,6 +10,11 @@ import {
   UIManager,
   LayoutAnimation,
 } from 'react-native'
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+} from 'react-native-reanimated'
 import {formatDistance, toDate} from 'date-fns'
 import {useThemeColor, spacing, colors, typography} from '../theme'
 import {
@@ -175,16 +180,17 @@ export const TranHistoryScreen = observer(function TranHistoryScreen({ route }:
         }
     }
 
-    
-    const collapseHeader = function () {
-        LayoutAnimation.easeInEaseOut()        
-        setIsHeaderVisible(false)
-        
-    }
+    const headerHeight = useSharedValue(spacing.screenHeight * 0.20); // Initial height
+    const isVisible = useSharedValue(true);
 
-    const expandHeader = function () {
-        LayoutAnimation.easeInEaseOut()
-        setIsHeaderVisible(true)
+    const collapseHeader = () => {
+        headerHeight.value = spacing.screenHeight * 0.08
+        isVisible.value = false
+    }
+    
+    const expandHeader = () => {
+        headerHeight.value = spacing.screenHeight * 0.20
+        isVisible.value = true
     }
 
     const onDelete = function (status: TransactionStatus) {
@@ -210,6 +216,12 @@ export const TranHistoryScreen = observer(function TranHistoryScreen({ route }:
         setError(e)
     }
 
+    const animatedHeader = useAnimatedStyle(() => {
+        return {
+          height: withTiming(headerHeight.value, { duration: 300 }),
+          // opacity: withTiming(isVisible.value ? 1 : 0, { duration: 300 }),
+        }
+    })
     const headerBg = useThemeColor('header')
     const iconColor = useThemeColor('textDim')    
     const activeIconColor = useThemeColor('button')    
@@ -225,9 +237,9 @@ export const TranHistoryScreen = observer(function TranHistoryScreen({ route }:
 
     return (
       <Screen contentContainerStyle={$screen}>        
-        <View style={[isHeaderVisible ? $headerContainer : $headerCollapsed, {backgroundColor: headerBg}]}>
+        <Animated.View style={[animatedHeader, $headerContainer, {backgroundColor: headerBg}]}>
             <Text preset="heading" text="History" style={{color: headerTitle}} />
-        </View>
+        </Animated.View>
             
         <View style={$contentContainer}>
             <Card
@@ -302,7 +314,7 @@ export const TranHistoryScreen = observer(function TranHistoryScreen({ route }:
                 ListFooterComponent={
                     <>
                     {sections.length > 0 && (
-                        <View style={{alignItems: 'center', marginVertical: spacing.small}}>
+                        <View style={{alignItems: 'center'}}>
                             {!showPendingOnly && isAll || showPendingOnly && pendingIsAll ? (
                                 <Text tx="tranHistory.listIsComplete" size="xs" />
                             ) : (
@@ -318,8 +330,8 @@ export const TranHistoryScreen = observer(function TranHistoryScreen({ route }:
                     )}                    
                     </>
                 }                        
-                onScrollBeginDrag={collapseHeader}
-                onStartReached={expandHeader}
+                onEndReached={collapseHeader}
+                onStartReached={expandHeader}                
                 stickySectionHeadersEnabled={false}
                 keyExtractor={(item, index) => String(item.id) as string}
                 ListEmptyComponent={            
@@ -333,7 +345,7 @@ export const TranHistoryScreen = observer(function TranHistoryScreen({ route }:
                         style={$card}                
                     />
                 }
-                style={{maxHeight: spacing.screenHeight * 0.6}}                                
+                style={{maxHeight: spacing.screenHeight * 0.62}}                                
             />    
           {isLoading && <Loading shiftedUp={true} />}
         </View>