Fix/expandable section animation (#1798)

* screen fixes

* animate on any expanded change

* use useDidUpdate instaed of useEffect

Author: lidord-wix

demo/src/screens/componentScreens/ExpandableSectionScreen.tsx

@@ -8,45 +8,45 @@ const cardImage = require('../../assets/images/card-example.jpg');
 const chevronDown = require('../../assets/icons/chevronDown.png');
 const chevronUp = require('../../assets/icons/chevronUp.png');
 
-const elements = [
-  <Card style={{marginBottom: 10}} onPress={() => {}}>
-    <Card.Section
-      content={[
-        {text: 'Card #1', text70: true, grey10: true},
-        {text: 'card description', text90: true, grey50: true}
-      ]}
-      style={{padding: 20}}
-    />
-    <Card.Section source={cardImage2} imageStyle={{height: 120}} />
-  </Card>,
-  <Card style={{marginBottom: 10}} onPress={() => {}}>
-    <Card.Section
-      content={[
-        {text: 'Card #2', text70: true, grey10: true},
-        {text: 'card description', text90: true, grey50: true}
-      ]}
-      style={{padding: 20}}
-    />
-    <Card.Section source={cardImage} imageStyle={{height: 120}} />
-  </Card>,
-  <Card style={{marginBottom: 10}} onPress={() => {}}>
-    <Card.Section
-      content={[
-        {text: 'Card #3', text70: true, grey10: true},
-        {text: 'card description', text90: true, grey50: true}
-      ]}
-      style={{padding: 20}}
-    />
-    <Card.Section source={cardImage2} imageStyle={{height: 120}} />
-  </Card>
-];
-
 class ExpandableSectionScreen extends PureComponent {
   state = {
     expanded: false,
     top: false
   };
 
+  elements = [
+    <Card key={0} style={{marginBottom: 10}} onPress={() => this.onExpand()}>
+      <Card.Section
+        content={[
+          {text: 'Card #1', text70: true, grey10: true},
+          {text: 'card description', text90: true, grey50: true}
+        ]}
+        style={{padding: 20}}
+      />
+      <Card.Section imageSource={cardImage2} imageStyle={{height: 120}}/>
+    </Card>,
+    <Card key={1} style={{marginBottom: 10}} onPress={() => this.onExpand()}>
+      <Card.Section
+        content={[
+          {text: 'Card #2', text70: true, grey10: true},
+          {text: 'card description', text90: true, grey50: true}
+        ]}
+        style={{padding: 20}}
+      />
+      <Card.Section imageSource={cardImage} imageStyle={{height: 120}}/>
+    </Card>,
+    <Card key={2} style={{marginBottom: 10}} onPress={() => this.onExpand()}>
+      <Card.Section
+        content={[
+          {text: 'Card #3', text70: true, grey10: true},
+          {text: 'card description', text90: true, grey50: true}
+        ]}
+        style={{padding: 20}}
+      />
+      <Card.Section imageSource={cardImage2} imageStyle={{height: 120}}/>
+    </Card>
+  ];
+
   onExpand() {
     this.setState({
       expanded: !this.state.expanded
@@ -74,7 +74,7 @@ class ExpandableSectionScreen extends PureComponent {
   getBodyElement() {
     return (
       <Carousel pageWidth={350} itemSpacings={Spacings.s2}>
-        {_.map(elements, (element, key) => {
+        {_.map(this.elements, (element, key) => {
           return (
             <View key={key} margin-12>
               {element}
@@ -99,7 +99,7 @@ class ExpandableSectionScreen extends PureComponent {
             onValueChange={() => {
               this.setState({top: !this.state.top});
             }}
-          ></Switch>
+          />
         </View>
         <ExpandableSection
           top={top}

src/components/expandableSection/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {LayoutAnimation, StyleSheet} from 'react-native';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
+import {useDidUpdate} from 'hooks';
 
 export type ExpandableSectionProps = {
   /**
@@ -35,11 +36,23 @@ export type ExpandableSectionProps = {
 function ExpandableSection(props: ExpandableSectionProps) {
   const {expanded, sectionHeader, children, top} = props;
 
+  /**
+   * TODO: move to reanimated LayoutAnimation after updating to version 2.3.0
+   * after migration, trigger the animation only in useDidUpdate.
+   */
+  const animate = () => {
+    LayoutAnimation.configureNext({...LayoutAnimation.Presets.easeInEaseOut, duration: 300});
+  };
+
   const onPress = () => {
     props.onPress?.();
-    LayoutAnimation.configureNext({...LayoutAnimation.Presets.easeInEaseOut, duration: 300});
+    animate();
   };
 
+  useDidUpdate(() => {
+    animate();
+  }, [expanded]);
+
   return (
     <View style={styles.container}>
       {top && expanded && children}