Fixes and tickets

src/components/FeatureCarousel/FeatureCarousel.web.js

@@ -8,7 +8,7 @@ import React, {
 } from "react";
 import {
   Animated,
-  Image,
+  ImageBackground,
   Platform,
   StyleSheet,
   View,
@@ -43,8 +43,6 @@ const STAGE_CARD_CONTENT = [
 
 const WEB_SCROLL_INACTIVE_DELTA = 0.05;
 const HOME_BACKGROUND_COLOR = "#425B87"; // Derived from the bottom color of the home hero image
-const AnimatedImage = Animated.createAnimatedComponent(Image);
-
 const FeatureCarousel = ({
   style,
   selectedProject,
@@ -117,16 +115,6 @@ const FeatureCarousel = ({
   );
   const onActiveIndexChangeRef = useRef(onActiveIndexChange);
   const scrollY = useRef(new Animated.Value(0)).current;
-  const parallaxTranslateY = useMemo(() => {
-    if (!itemHeight) {
-      return null;
-    }
-    return scrollY.interpolate({
-      inputRange: [0, itemHeight],
-      outputRange: [0, -itemHeight * 0.25],
-      extrapolate: "clamp",
-    });
-  }, [itemHeight, scrollY]);
 
   useEffect(() => {
     onActiveIndexChangeRef.current = onActiveIndexChange;
@@ -319,10 +307,19 @@ const FeatureCarousel = ({
     [updateSnapHeight]
   );
 
+  const hasBackgroundImage = !!backgroundImage;
+
   const renderContent = useMemo(
     () =>
-      carouselItems.map((item, index) => {
-        const card = (
+      carouselItems.map((item, index) => (
+        <View
+          key={item.key}
+          style={[
+            styles.slide,
+            hasBackgroundImage ? styles.slideTransparent : styles.slideColored,
+            itemHeight ? { height: itemHeight } : { minHeight: 1 },
+          ]}
+        >
           <View style={styles.cardWrapper}>
             <PersonaCard
               item={item}
@@ -331,55 +328,9 @@ const FeatureCarousel = ({
               height={itemHeight}
             />
           </View>
-        );
-
-        const containerStyle = [styles.backgroundItem, { height: itemHeight }];
-        const isFirstItem = index === 0 && backgroundImage;
-
-        if (isFirstItem) {
-          const parallaxStyles = [
-            styles.parallaxImage,
-            itemHeight ? { height: itemHeight * 1.2 } : null,
-            itemHeight ? { top: -itemHeight * 0.1 } : null,
-            { width: "100%" },
-          ].filter(Boolean);
-          if (parallaxTranslateY) {
-            parallaxStyles.push({
-              transform: [{ translateY: parallaxTranslateY }],
-            });
-          }
-          return (
-            <View
-              key={item.key}
-              style={[...containerStyle, styles.parallaxContainer]}
-            >
-              <AnimatedImage
-                source={backgroundImage}
-                style={parallaxStyles}
-                resizeMode="cover"
-              />
-              <LinearGradient
-                colors={[
-                  "rgba(66, 91, 135, 0)",
-                  "rgba(66, 91, 135, 0.4)",
-                  HOME_BACKGROUND_COLOR,
-                ]}
-                locations={[0, 0.75, 1]}
-                style={styles.backgroundGradient}
-                pointerEvents="none"
-              />
-              {card}
-            </View>
-          );
-        }
-
-        return (
-          <View key={item.key} style={[containerStyle, styles.plainBackground]}>
-            {card}
-          </View>
-        );
-      }),
-    [backgroundImage, carouselItems, itemHeight, parallaxTranslateY]
+        </View>
+      )),
+    [carouselItems, hasBackgroundImage, itemHeight]
   );
 
   const snapOffsets = useMemo(() => {
@@ -398,11 +349,39 @@ const FeatureCarousel = ({
     [isWeb]
   );
 
+  const containerProps = hasBackgroundImage
+    ? {
+        source: backgroundImage,
+        resizeMode: "cover",
+        imageStyle: styles.backgroundImage,
+      }
+    : {};
+
+  const ContainerComponent = hasBackgroundImage ? ImageBackground : View;
+
   return (
-    <View
-      style={[styles.container, isWeb && styles.containerWeb, style]}
+    <ContainerComponent
+      {...containerProps}
+      style={[
+        styles.container,
+        isWeb && styles.containerWeb,
+        hasBackgroundImage ? styles.containerTransparent : styles.containerColored,
+        style,
+      ]}
       onLayout={handleLayout}
     >
+      {hasBackgroundImage && (
+        <LinearGradient
+          colors={[
+            "rgba(66, 91, 135, 0)",
+            "rgba(66, 91, 135, 0.4)",
+            HOME_BACKGROUND_COLOR,
+          ]}
+          locations={[0, 0.75, 1]}
+          style={styles.backgroundGradient}
+          pointerEvents="none"
+        />
+      )}
       <Animated.ScrollView
         ref={scrollViewRef}
         showsVerticalScrollIndicator={false}
@@ -440,7 +419,7 @@ const FeatureCarousel = ({
           baseDotSize={8}
         />
       </BlurView>
-    </View>
+    </ContainerComponent>
   );
 };
 
@@ -451,37 +430,38 @@ const styles = StyleSheet.create({
     flex: 1,
     width: "100%",
     flexDirection: "row",
-    backgroundColor: HOME_BACKGROUND_COLOR,
   },
   containerWeb: {
     // paddingRight: 56,
   },
+  containerColored: {
+    backgroundColor: HOME_BACKGROUND_COLOR,
+  },
+  containerTransparent: {
+    backgroundColor: "transparent",
+  },
   list: {
     flex: 1,
   },
   scrollContent: {
     flexGrow: 1,
   },
-  backgroundItem: {
-    width: "100%",
-    justifyContent: "flex-start",
-  },
-  parallaxContainer: {
-    overflow: "hidden",
-    position: "relative",
-    backgroundColor: HOME_BACKGROUND_COLOR,
-  },
-  parallaxImage: {
-    position: "absolute",
-    left: 0,
-    right: 0,
+  backgroundImage: {
+    ...StyleSheet.absoluteFillObject,
   },
   backgroundGradient: {
     ...StyleSheet.absoluteFillObject,
   },
-  plainBackground: {
+  slide: {
+    width: "100%",
+    justifyContent: "flex-start",
+  },
+  slideColored: {
     backgroundColor: HOME_BACKGROUND_COLOR,
   },
+  slideTransparent: {
+    backgroundColor: "transparent",
+  },
   cardWrapper: {
     flex: 1,
     width: "60%",