From 40500cc002f35f3cd6bb330e98b9a787100bb71d Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 14 Aug 2024 19:20:19 +0300
Subject: [PATCH 1/2] StackAggregator - several fixes

---
 .../StackAggregatorScreen.tsx                 |  2 +-
 src/components/stackAggregator/index.tsx      | 26 ++++++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/demo/src/screens/componentScreens/StackAggregatorScreen.tsx b/demo/src/screens/componentScreens/StackAggregatorScreen.tsx
index e122872aff..d24b494b11 100644
--- a/demo/src/screens/componentScreens/StackAggregatorScreen.tsx
+++ b/demo/src/screens/componentScreens/StackAggregatorScreen.tsx
@@ -68,7 +68,7 @@ export default class StackAggregatorScreen extends Component {
           containerStyle={{marginTop: 12}}
           onItemPress={this.onItemPress}
           collapsed={false}
-          contentContainerStyle={{backgroundColor: Colors.red70}}
+          backgroundColor={Colors.red70}
           // itemBorderRadius={10}
           // buttonProps={{color: Colors.green30, labelStyle: {...Typography.text80, fontWeight: '500'}}}
         >
diff --git a/src/components/stackAggregator/index.tsx b/src/components/stackAggregator/index.tsx
index 3da6c796c0..df1813d6b7 100644
--- a/src/components/stackAggregator/index.tsx
+++ b/src/components/stackAggregator/index.tsx
@@ -71,6 +71,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
     disablePresses,
     onItemPress,
     contentContainerStyle,
+    backgroundColor,
     itemBorderRadius,
     onCollapseWillChange,
     onCollapseChanged
@@ -83,11 +84,11 @@ const StackAggregator = (props: StackAggregatorProps) => {
     setIsCollapsed(collapsed);
   }, [collapsed]);
 
-  useDidUpdate(() => {
+  useDidUpdate(async () => {
     onCollapseWillChange?.(isCollapsed);
-    animate();
+    await animate();
     onCollapseChanged?.(isCollapsed);
-  }, [isCollapsed, onCollapseWillChange, onCollapseChanged]);
+  }, [isCollapsed, itemsCount]);
 
   /** Animations */
 
@@ -100,10 +101,11 @@ const StackAggregator = (props: StackAggregatorProps) => {
 
   const getItemScale = useCallback((index: number) => {
     if (isCollapsed) {
-      if (index === itemsCount - 2) {
+      if (index === 1) {
         return 0.95;
       }
-      if (index === itemsCount - 1) {
+
+      if (index === 2) {
         return 0.9;
       }
     }
@@ -185,10 +187,11 @@ const StackAggregator = (props: StackAggregatorProps) => {
   const getTop = (index: number) => {
     let start = 0;
 
-    if (index === itemsCount - 2) {
+    if (index === 1) {
       start += PEEP;
     }
-    if (index === itemsCount - 1) {
+
+    if (index === 2) {
       start += PEEP * 2;
     }
 
@@ -218,6 +221,10 @@ const StackAggregator = (props: StackAggregatorProps) => {
     ];
   }, [firstItemHeight, itemsCount]);
 
+  const cardStyle = useMemo(() => {
+    return backgroundColor ? [styles.card, {backgroundColor}] : styles.card;
+  }, [backgroundColor]);
+
   /** Events */
 
   const _onItemPress = (index: number) => {
@@ -256,7 +263,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
         ]}
         collapsable={false}
       >
-        <Card style={styles.card} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
+        <Card style={cardStyle} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
           <Animated.View style={index !== 0 ? {opacity: animatedContentOpacity} : undefined} collapsable={false}>
             {item}
           </Animated.View>
@@ -324,8 +331,7 @@ const styles = StyleSheet.create({
   },
   card: {
     overflow: 'hidden',
-    flexShrink: 1,
-    backgroundColor: 'transparent'
+    flexShrink: 1
   },
   button: {
     zIndex: 100

From 42d9d27e1d5c66944840969ac0879eb69e1a1982 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Wed, 11 Sep 2024 13:38:47 +0300
Subject: [PATCH 2/2] Remove extra shadows on iOS

---
 src/components/stackAggregator/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/stackAggregator/index.tsx b/src/components/stackAggregator/index.tsx
index df1813d6b7..ac2532dd17 100644
--- a/src/components/stackAggregator/index.tsx
+++ b/src/components/stackAggregator/index.tsx
@@ -248,7 +248,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
       <Animated.View
         onLayout={index === 0 ? onLayout : undefined}
         style={[
-          Constants.isIOS && styles.containerShadow,
+          Constants.isIOS && (index === 0 || index === 1 || index === 2 || !isCollapsed) && styles.containerShadow,
           contentContainerStyle,
           //@ts-expect-error 'position' doesn't match AnimatedInterpolation type
           getItemStyle(index),