StackAggregator - several fixes - see #3210

Author: M-i-k-e-l

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'}}}
         >

src/components/stackAggregator/index.tsx

@@ -70,6 +70,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
     collapsed = true,
     disablePresses = false,
     onItemPress,
+    backgroundColor,
     contentContainerStyle,
     itemBorderRadius = 0,
     onCollapseWillChange,
@@ -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) => {
@@ -241,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),
@@ -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>
@@ -319,8 +326,7 @@ const styles = StyleSheet.create({
   },
   card: {
     overflow: 'hidden',
-    flexShrink: 1,
-    backgroundColor: 'transparent'
+    flexShrink: 1
   },
   button: {
     zIndex: 100