fix: 🔥 remove parallax header

ed-software · Nov 5, 2022 · 16eb8fe · 16eb8fe
1 parent 513d8ec
commit 16eb8fe
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 52 deletions.
diff --git a/app.json b/app.json
@@ -15,7 +15,9 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "app.greeneggs.mobile"
@@ -29,6 +31,11 @@
     },
     "web": {
       "favicon": "./src/assets/images/icon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "bb23947f-78b9-45d6-bae0-4a8c4045caa6"
+      }
     }
   }
 }
diff --git a/eas.json b/eas.json
@@ -0,0 +1,20 @@
+{
+  "cli": {
+    "version": ">= 2.6.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "node": "16.18.0"
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "@apollo/client": "^3.7.0",
     "@eva-design/eva": "^2.0.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fabfit/react-native-parallax-header": "^0.4.0",
     "@react-navigation/bottom-tabs": "6.4.0",
     "@react-navigation/material-top-tabs": "^6.3.0",
     "@react-navigation/native": "~6.0.13",

diff --git a/src/screens/recipe/recipe-details-card.tsx b/src/screens/recipe/recipe-details-card.tsx
@@ -1,10 +1,10 @@
 /**
  * Author: Dimitri Zvolinski
  */
-import { ReactElement } from 'react';
+import { ReactElement } from 'react'
 import { noAvatar } from '@greeneggs/assets'
 import { convertTimeEstimate } from '@greeneggs/utils'
-import { View, Pressable } from 'react-native'
+import { View, Pressable, Image } from 'react-native'
 import { recipe_recipe_data } from '@greeneggs/types/graphql'
 import { Text, Card, Avatar } from '@ui-kitten/components'
 import { RecipeCategoriesTags } from './recipe-categories-tags'
@@ -31,6 +31,7 @@ export function RecipeDetailsCard({
   id,
   liked,
   comments,
+  coverImage,
 }: recipe_recipe_data): ReactElement {
   const navigation = useNavigation<LoggedInNavigationProp>()
   const navigateToDescription = () => {
@@ -45,22 +46,25 @@ export function RecipeDetailsCard({
   return (
     <Card
       header={() => (
-        <View style={{ padding: 16 }}>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-            <Text category='h5' style={{ flexShrink: 1 }}>
-              {title}
-            </Text>
-            {timeEstimate ? (
-              <LabelledIcon
-                label={`${convertTimeEstimate(timeEstimate).toUpperCase()} PREP`}
-                iconName='clock-outline'
-              />
-            ) : undefined}
+        <>
+          <Image source={{ uri: coverImage }} style={{ width: '100%', height: undefined, aspectRatio: 1 / 1 }} />
+          <View style={{ padding: 16 }}>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+              <Text category='h5' style={{ flexShrink: 1 }}>
+                {title}
+              </Text>
+              {timeEstimate ? (
+                <LabelledIcon
+                  label={`${convertTimeEstimate(timeEstimate).toUpperCase()} PREP`}
+                  iconName='clock-outline'
+                />
+              ) : undefined}
+            </View>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
+              <RecipeCategoriesTags categories={categories} />
+            </View>
           </View>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
-            <RecipeCategoriesTags categories={categories} />
-          </View>
-        </View>
+        </>
       )}
       footer={() => (
         <View style={{ padding: 16 }}>

diff --git a/src/screens/recipe/recipe.tsx b/src/screens/recipe/recipe.tsx
@@ -3,12 +3,10 @@
  */
 import { useContext, useState } from 'react'
 import { useQuery } from '@apollo/client'
-import { ImageBackground, View } from 'react-native'
+import { ImageBackground, ScrollView, View } from 'react-native'
 import { Queries } from '@greeneggs/graphql'
 import { Button, IndexPath, SelectItem, Text } from '@ui-kitten/components'
 import { recipe, recipeVariables } from '@greeneggs/types/graphql'
-import ParallaxHeader from '@fabfit/react-native-parallax-header'
-import { LinearGradient } from 'expo-linear-gradient'
 import { RecipeDetailsCard } from './recipe-details-card'
 import { RecipeAllergies } from './recipe-allergies'
 import { RecipeIngredients } from './recipe-ingredients'
@@ -52,34 +50,16 @@ export function Recipe() {
   const { data: recipe } = data.recipe
 
   return (
-    <ParallaxHeader
-      maxHeight={300}
-      minHeight={128}
-      renderOverlay={() => (
-        <TopNavigation
-          style={{ height: 64, alignItems: 'flex-start' }}
-          accessoryRight={() => (
-            <>
-              <SaveRecipeButton recipeId={recipeId} saved={recipe.saved} />
-              {me?.id === recipe.submittedBy.id ? <RecipeMoreButton recipeId={recipeId} /> : undefined}
-            </>
-          )}
-        />
-      )}
-      renderHeader={() => (
-        <>
-          <ImageBackground
-            source={{ uri: recipe.coverImage }}
-            style={{ width: '100%', height: undefined, aspectRatio: 1 / 1 }}
-          />
-          <LinearGradient
-            colors={['rgba(255, 255, 255,1)', 'transparent']}
-            style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '100%' }}
-          />
-        </>
-      )}
-    >
-      <Background style={{ padding: 16 }}>
+    <Background style={{ paddingBottom: 24 }}>
+      <TopNavigation
+        accessoryRight={() => (
+          <>
+            <SaveRecipeButton recipeId={recipeId} saved={recipe.saved} />
+            {me?.id === recipe.submittedBy.id ? <RecipeMoreButton recipeId={recipeId} /> : undefined}
+          </>
+        )}
+      />
+      <ScrollView style={{ paddingHorizontal: 16 }}>
         <RecipeDetailsCard {...recipe} />
         <View style={{ marginVertical: 16 }}>
           <RecipeAllergies allergies={recipe.allergies} />
@@ -164,7 +144,7 @@ export function Recipe() {
         <View style={{ marginTop: 24 }}>
           <RecipeAddComment recipeId={recipe.id} />
         </View>
-      </Background>
-    </ParallaxHeader>
+      </ScrollView>
+    </Background>
   )
 }