Update AnimatedFlatList component in AnimatedFlatList.tsx, ScrollView…

… component in ScrollView.tsx, and Site component in Site.tsx
plahteenlahti · Apr 27, 2024 · 8fe4d6c · 8fe4d6c
1 parent a3fad89
commit 8fe4d6c
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 40 deletions.
diff --git a/src/components/layout/AnimatedFlatList.tsx b/src/components/layout/AnimatedFlatList.tsx
@@ -3,20 +3,29 @@ import { FlatListProps, RefreshControl, StyleSheet, View } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
 import Animated, {
   Extrapolation,
-  FadeInLeft,
-  FadeOutRight,
   interpolate,
   interpolateColor,
   useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue
 } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import {
+  Defs,
+  LinearGradient,
+  Mask,
+  Rect,
+  Stop,
+  Svg,
+  Text,
+  Use
+} from 'react-native-svg'
 
 type Props<T> = {
   refreshing: boolean
   onRefresh: () => void
   extraElement?: React.ReactNode
+  withLogo?: boolean
   title: string
 } & FlatListProps<T>
 
@@ -30,6 +39,7 @@ export const AnimatedFlatList = <T,>({
   extraElement,
   refreshing,
   onRefresh,
+  withLogo,
   ...rest
 }: Props<T>) => {
   const { top } = useSafeAreaInsets()
@@ -72,24 +82,64 @@ export const AnimatedFlatList = <T,>({
   return (
     <View className="flex-1">
       <Animated.FlatList
-        className="bg-blue-500"
+        className="bg-white"
         onScroll={scrollHandler}
-        // refreshControl={
-        //   <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        // }
-        ListFooterComponent={<View className="h-28" />}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
         ListHeaderComponent={
-          <Animated.View
-            className="flex-row mb-12 pl-2 bg-red-300"
-            style={[largeTitleStyle, s.largeTitleContainer, { paddingTop }]}>
-            {extraElement}
-            <Animated.Text
-              className={`text-3xl font-display font-semibold ${
-                !!extraElement && 'ml-2'
-              }`}>
-              {title}
-            </Animated.Text>
-          </Animated.View>
+          <>
+            <Animated.View
+              className="mb-12 pl-2"
+              style={[largeTitleStyle, s.largeTitleContainer, { paddingTop }]}>
+              <Svg height={30} width={80} viewBox="0 0 800 300">
+                <Defs>
+                  <LinearGradient
+                    id="Gradient"
+                    gradientUnits="userSpaceOnUse"
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="300">
+                    <Stop offset="0" stopColor="white" stopOpacity="0.8" />
+                    <Stop offset="1" stopColor="white" stopOpacity="1" />
+                  </LinearGradient>
+                  <Mask
+                    id="Mask"
+                    maskUnits="userSpaceOnUse"
+                    x="0"
+                    y="0"
+                    width="800"
+                    height="300">
+                    <Rect
+                      x="0"
+                      y="0"
+                      width="800"
+                      height="300"
+                      fill="url(#Gradient)"
+                    />
+                  </Mask>
+                  <Text
+                    id="Text"
+                    x="400"
+                    y="200"
+                    fontFamily="Verdana"
+                    fontSize="100"
+                    textAnchor="middle">
+                    Netli.fyi
+                  </Text>
+                </Defs>
+                <Use href="#Text" fill="#333" mask="url(#Mask)" />
+              </Svg>
+
+              <Animated.Text
+                className={`text-3xl font-display font-semibold text-gray-800 ${
+                  !!extraElement && 'ml-2'
+                }`}>
+                {title}
+              </Animated.Text>
+            </Animated.View>
+          </>
         }
         {...rest}
       />
@@ -108,7 +158,7 @@ export const AnimatedFlatList = <T,>({
           <View className="flex-1 justify-center">
             <TouchableOpacity />
           </View>
-          <View className="flex-1 justify-center items-center">
+          <View className="flex-1">
             <Animated.Text className="text-gray-800 font-medium text-base">
               {title}
             </Animated.Text>

diff --git a/src/components/layout/ScrollView.tsx b/src/components/layout/ScrollView.tsx
@@ -79,14 +79,13 @@ export const AnimatedScrollView = ({
   return (
     <View className="flex-1">
       <Animated.ScrollView
-        className="bg-blue-400"
         onScroll={scrollHandler}
-        // refreshControl={
-        //   <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        // }
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
         {...rest}>
         <Animated.View
-          className="flex-row pl-2 mb-12 bg-red-200"
+          className="flex-row pl-2 mb-1"
           style={[largeTitleStyle, s.largeTitleContainer, { paddingTop }]}>
           {extraElement}
           <Animated.Text

diff --git a/src/views/Site.tsx b/src/views/Site.tsx
@@ -1,29 +1,18 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 
-import {
-  FlatList,
-  Image,
-  ListRenderItem,
-  RefreshControl,
-  ScrollView,
-  View
-} from 'react-native'
+import { Image, RefreshControl, ScrollView, View } from 'react-native'
 import { BuildSettings } from '../components/BuildSettings'
+import { Card } from '../components/Card'
 import { DeploysPreview } from '../components/DeploysPreview'
+import { NoPreview } from '../components/NoPreview'
 import { SiteInformation } from '../components/SiteInformation'
 import { SubmissionsPreview } from '../components/SubmissionsPreview'
 import { HooksPreview } from '../components/previews/hook'
-import { Text } from '../components/text/Text'
 import { useDeploys } from '../hooks/deploy'
 import { useHooks } from '../hooks/hook'
 import { useSite } from '../hooks/site'
 import { useSubmissions } from '../hooks/submissions'
 import { RootStackParamList } from '../navigators/RootStack'
-import Animated from 'react-native-reanimated'
-import { CardTitle } from '../components/CardTitle'
-import { Card } from '../components/Card'
-import { NoPreview } from '../components/NoPreview'
-import { HStack } from '../components/layout/HStack'
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Site'>
 

diff --git a/src/views/Sites.tsx b/src/views/Sites.tsx
@@ -35,8 +35,7 @@ export const Sites = ({
 
   return (
     <AnimatedFlatList
-      title="Netli.fyi"
-      contentInsetAdjustmentBehavior="automatic"
+      title="Sites"
       onRefresh={sites.refetch}
       refreshing={sites.isRefetching}
       data={sites.data}