fix: Add gradient to Galleries for You banner (#9058)

artsy · Jul 26, 2023 · 2e8417b · 2e8417b
1 parent 078f41c
commit 2e8417b
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/app/Scenes/Home/Components/GalleriesForYouBanner.tsx b/src/app/Scenes/Home/Components/GalleriesForYouBanner.tsx
@@ -10,6 +10,7 @@ import {
 import { navigate } from "app/system/navigation/navigate"
 import { isPad } from "app/utils/hardware"
 import { Image } from "react-native"
+import LinearGradient from "react-native-linear-gradient"
 import { useTracking } from "react-tracking"
 
 const IMAGE_ASPECT_RATIO = 0.74
@@ -41,6 +42,17 @@ export const GalleriesForYouBanner: React.FC<GalleriesForYouBannerProps> = ({ mb
               style={{ width: width, height: width / IMAGE_ASPECT_RATIO }}
               resizeMode={isTablet ? "contain" : "cover"}
             />
+            <LinearGradient
+              colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.5)"]}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 0, y: 1 }}
+              style={{
+                position: "absolute",
+                width: "100%",
+                height: "40%",
+                bottom: 0,
+              }}
+            />
           </Flex>
 
           <Flex justifyContent="flex-end" height="100%" px={2} pb={2}>