add animated view

src/screens/wallet/screen/walletScreen.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import Swiper from 'react-native-swiper';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView, Animated, ScrollView, Text } from 'react-native';
 
 // Containers
 import { LoggedInContainer } from '../../../containers';
@@ -14,18 +14,31 @@ import SbdView from './sbdView';
 
 // Styles
 import globalStyles from '../../../globalStyles';
+import styles from './walletScreenStyles';
+
+const HEADER_EXPANDED_HEIGHT = 260;
+const HEADER_COLLAPSED_HEIGHT = 20;
+const WALLETS = ['ESTM', 'STEEM', 'SBD', 'SP'];
 
 const WalletScreen = () => {
   const [selectedUserActivities, setSelectedUserActivities] = useState(null);
   const [isLoading, setIsLoading] = useState('points');
   const [currentIndex, setCurrentIndex] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
+  const [scrollY] = useState(new Animated.Value(0));
+  const [isScroll, setScroll] = useState(false);
 
   const _handleSwipeItemChange = (userActivities, _isLoading) => {
     setSelectedUserActivities(userActivities);
     setIsLoading(_isLoading);
   };
 
+  const headerHeight = scrollY.interpolate({
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
+    extrapolate: 'clamp',
+  });
+
   return (
     <Fragment>
       <Header />
@@ -33,6 +46,7 @@ const WalletScreen = () => {
         <LoggedInContainer>
           {() => (
             <>
+              <Animated.View style={[styles.header, { height: headerHeight }]}>
                 <Swiper
                   loop={false}
                   showsPagination={true}
@@ -64,6 +78,20 @@ const WalletScreen = () => {
                     currentIndex={currentIndex}
                   />
                 </Swiper>
+              </Animated.View>
+              <ScrollView
+                contentContainerStyle={styles.scrollContainer}
+                onScroll={Animated.event([
+                  {
+                    nativeEvent: {
+                      contentOffset: {
+                        y: scrollY,
+                      },
+                    },
+                  },
+                ])}
+                scrollEventThrottle={16}
+              >
                 <Transaction
                   type="wallet"
                   transactions={selectedUserActivities}
@@ -71,6 +99,7 @@ const WalletScreen = () => {
                   setRefreshing={setRefreshing}
                   isLoading={isLoading}
                 />
+              </ScrollView>
             </>
           )}
         </LoggedInContainer>

src/screens/wallet/screen/walletScreenStyles.js

@@ -0,0 +1,32 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+import { Dimensions } from 'react-native';
+
+const HEADER_EXPANDED_HEIGHT = 260;
+const HEADER_COLLAPSED_HEIGHT = 20;
+
+const { width: SCREEN_WIDTH } = Dimensions.get('screen');
+
+export default EStyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#eaeaea',
+  },
+  scrollContainer: {
+    padding: 0,
+    paddingTop: HEADER_EXPANDED_HEIGHT,
+  },
+  header: {
+    position: 'absolute',
+    width: SCREEN_WIDTH,
+    backgroundColor: '$primaryBackgroundColor',
+    top: 0,
+    left: 0,
+    zIndex: 9999,
+  },
+  title: {
+    marginVertical: 16,
+    color: 'black',
+    fontWeight: 'bold',
+    fontSize: 24,
+  },
+});