From 3075cedfd6726dd31bb0e0d43e601e28235d2c35 Mon Sep 17 00:00:00 2001
From: Marcos Sarges <dev.marcos.sarges@gmail.com>
Date: Sat, 16 Oct 2021 10:44:28 -0300
Subject: [PATCH] fix: change logic animated open collapse

---
 src/ui/collapse/collapse.body.component.tsx | 36 +++++++++++++++++----
 src/ui/collapse/collapse.component.tsx      |  2 --
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/ui/collapse/collapse.body.component.tsx b/src/ui/collapse/collapse.body.component.tsx
index 8733f136..5eb9859c 100644
--- a/src/ui/collapse/collapse.body.component.tsx
+++ b/src/ui/collapse/collapse.body.component.tsx
@@ -1,11 +1,20 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { Animated, Easing, LayoutChangeEvent } from 'react-native';
+import { Animated, Easing, LayoutChangeEvent, StyleSheet } from 'react-native';
 import { useDefaultProps } from '../../utilities/useDefaultProps';
 import { Div } from '../div/div.component';
 
 import { CollapseBodyProps } from './collapse.type';
 
+const { styleCollapseAnimated } = StyleSheet.create({
+  styleCollapseAnimated: {
+    position: 'absolute',
+    zIndex: -1,
+    bottom: 0,
+    width: '100%',
+  },
+});
+
 const CollapseBody: React.FunctionComponent<CollapseBodyProps> = (
   incomingProps
 ) => {
@@ -37,6 +46,11 @@ const CollapseBody: React.FunctionComponent<CollapseBodyProps> = (
     outputRange: [0, bodySectionHeight],
   });
 
+  const bodyOpacity = animatedController.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+
   React.useEffect(() => {
     if (expanded) {
       Animated.timing(animatedController, {
@@ -61,11 +75,21 @@ const CollapseBody: React.FunctionComponent<CollapseBodyProps> = (
   };
 
   return (
-    <Animated.View style={{ height: bodyHeight, overflow: 'hidden' }}>
-      <Div {...props} onLayout={onLayout}>
-        {children}
-      </Div>
-    </Animated.View>
+    <>
+      <Animated.View style={{ height: bodyHeight }} />
+      <Animated.View
+        style={[
+          {
+            opacity: bodyOpacity,
+          },
+          styleCollapseAnimated,
+        ]}
+      >
+        <Div {...props} onLayout={onLayout}>
+          {children}
+        </Div>
+      </Animated.View>
+    </>
   );
 };
 
diff --git a/src/ui/collapse/collapse.component.tsx b/src/ui/collapse/collapse.component.tsx
index 36ef2202..de831b57 100644
--- a/src/ui/collapse/collapse.component.tsx
+++ b/src/ui/collapse/collapse.component.tsx
@@ -11,7 +11,6 @@ import { CollapseGroup } from './group.component';
 
 const Collapse: CompoundedCollapse<CollapseProps> = (incomingProps) => {
   const props = useDefaultProps('Collapse', incomingProps, {
-    bg: 'white',
     flexDir: 'column',
     flexWrap: 'nowrap',
     rounded: 'md',
@@ -79,7 +78,6 @@ const Collapse: CompoundedCollapse<CollapseProps> = (incomingProps) => {
 };
 
 // Collapse.defaultProps = {
-//   bg: 'white',
 //   flexDir: 'column',
 //   flexWrap: 'nowrap',
 //   rounded: 'md',