made gradient background move with scroll

src/components/common/AlbumView.tsx

@@ -8,7 +8,7 @@ import { albumAtomFamily } from '../../state/music';
 import colors from '../../styles/colors';
 import text from '../../styles/text';
 import AlbumCover from './AlbumCover';
-import TopTabContainer from './TopTabContainer';
+import GradientBackground from './GradientBackground';
 
 function secondsToTime(s: number): string {
   const seconds = s % 60;
@@ -142,7 +142,9 @@ const AlbumDetails: React.FC<{
         alignItems: 'center',
         paddingTop: coverSize / 8,
       }}
+      overScrollMode='never'
     >
+      <GradientBackground />
       <AlbumCover
         height={coverSize}
         width={coverSize}
@@ -213,11 +215,9 @@ const AlbumView: React.FC<{
   });
 
   return (
-    <TopTabContainer>
+    <React.Suspense fallback={<Text>Loading...</Text>}>
-      <React.Suspense fallback={<Text>Loading...</Text>}>
+      <AlbumDetails id={id} />
-        <AlbumDetails id={id} />
+    </React.Suspense>
-      </React.Suspense>
-    </TopTabContainer>
   );
 };
 

src/components/common/GradientBackground.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useWindowDimensions } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import colors from '../../styles/colors';
+
+const GradientBackground: React.FC<{
+  height?: number | string;
+  width?: number | string;
+  position?: 'relative' | 'absolute';
+}> = ({ height, width, position }) => {
+  const layout = useWindowDimensions();
+
+  return (
+    <LinearGradient
+      colors={[colors.gradient.high, colors.gradient.low]}
+      locations={[0.01,0.7]}
+      style={{
+        width: width || '100%',
+        height: height || layout.height,
+        position: position || 'absolute',
+      }}
+    />
+  );
+};
+
+export default GradientBackground;

src/components/common/GradientFlatList.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FlatList, FlatListProps, useWindowDimensions } from 'react-native';
+import GradientBackground from './GradientBackground';
+
+function GradientFlatList<ItemT>(props: FlatListProps<ItemT>) {
+  const layout = useWindowDimensions();
+
+  return (
+    <FlatList
+      { ...props }
+      ListHeaderComponent={() => <GradientBackground position='relative' />}
+      ListHeaderComponentStyle={{
+        marginBottom: -layout.height,
+      }}
+    />
+  );
+};
+
+export default GradientFlatList;

src/components/library/AlbumsTab.tsx

@@ -1,14 +1,12 @@
 import { useNavigation } from '@react-navigation/native';
 import { useAtomValue } from 'jotai/utils';
 import React, { useEffect } from 'react';
-import { FlatList, Pressable, Text, View } from 'react-native';
+import { Pressable, Text, View } from 'react-native';
-import FastImage from 'react-native-fast-image';
-import LinearGradient from 'react-native-linear-gradient';
 import { Album } from '../../models/music';
 import { albumsAtom, albumsUpdatingAtom, useUpdateAlbums } from '../../state/music';
 import textStyles from '../../styles/text';
 import AlbumCover from '../common/AlbumCover';
-import TopTabContainer from '../common/TopTabContainer';
+import GradientFlatList from '../common/GradientFlatList';
 
 const AlbumItem: React.FC<{
   id: string;
@@ -76,7 +74,7 @@ const AlbumsList = () => {
 
   return (
     <View style={{ flex: 1 }}>
-      <FlatList
+      <GradientFlatList
         data={albums}
         renderItem={AlbumListRenderItem}
         keyExtractor={item => item.id}
@@ -84,17 +82,16 @@ const AlbumsList = () => {
         removeClippedSubviews={true}
         refreshing={updating}
         onRefresh={updateAlbums}
+        overScrollMode='never'
       />
     </View>
   );
 }
 
 const AlbumsTab = () => (
-  <TopTabContainer>
+  <React.Suspense fallback={<Text>Loading...</Text>}>
-    <React.Suspense fallback={<Text>Loading...</Text>}>
+    <AlbumsList />
-      <AlbumsList />
+  </React.Suspense>
-    </React.Suspense>
-  </TopTabContainer>
 );
 
 export default React.memo(AlbumsTab);

src/components/library/ArtistsTab.tsx

@@ -1,10 +1,10 @@
 import { useAtomValue } from 'jotai/utils';
 import React, { useEffect } from 'react';
-import { FlatList, Image, Text, View } from 'react-native';
+import { Image, Text, View } from 'react-native';
 import { Artist } from '../../models/music';
 import { artistsAtom, artistsUpdatingAtom, useUpdateArtists } from '../../state/music';
 import textStyles from '../../styles/text';
-import TopTabContainer from '../common/TopTabContainer';
+import GradientFlatList from '../common/GradientFlatList';
 
 const ArtistItem: React.FC<{ item: Artist } > = ({ item }) => (
   <View style={{
@@ -43,20 +43,19 @@ const ArtistsList = () => {
   );
 
   return (
-    <FlatList
+    <GradientFlatList
       data={artists}
       renderItem={renderItem}
       keyExtractor={item => item.id}
       onRefresh={updateArtists}
       refreshing={updating}
+      overScrollMode='never'
     />
   );
 }
 
 const ArtistsTab = () => (
-  <TopTabContainer>
+  <ArtistsList />
-    <ArtistsList />
-  </TopTabContainer>
 );
 
 export default ArtistsTab;

src/components/library/PlaylistsTab.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import TopTabContainer from '../common/TopTabContainer';
+import GradientBackground from '../common/GradientBackground';
 
 const PlaylistsTab = () => (
-  <TopTabContainer>
+  <GradientBackground />
-  </TopTabContainer>
 );
 
 export default PlaylistsTab;