Fix/layout animation in expandable section (#977)

* add onPress prop to expandableSection

* typing

Author: lidord-wix

demo/src/screens/componentScreens/ExpandableSectionScreen.tsx

@@ -54,14 +54,14 @@ class ExpandableSectionScreen extends PureComponent {
 
   getHeaderElement() {
     return (
-      <TouchableOpacity onPress={() => this.onExpand()}>
+      <View>
         <Text margin-10 dark10 text60>
           ExpandableSection's sectionHeader
         </Text>
         <View style={styles.header}>
           <Image style={styles.icon} source={!this.state.expanded ? chevronUp : chevronDown} />
         </View>
-      </TouchableOpacity>
+      </View>
     );
   }
 
@@ -84,7 +84,7 @@ class ExpandableSectionScreen extends PureComponent {
 
     return (
       <ScrollView>
-        <ExpandableSection expanded={expanded} sectionHeader={this.getHeaderElement()}>
+        <ExpandableSection expanded={expanded} sectionHeader={this.getHeaderElement()} onPress={() => this.onExpand()}>
           {this.getBodyElement()}
         </ExpandableSection>
         <ListItem>

generatedTypes/components/expandableSection/index.d.ts

@@ -12,6 +12,10 @@ export declare type ExpandableSectionProps = {
      * should the expandableSection be expanded
      */
     expanded?: boolean;
+    /**
+     * action for when pressing the header of the expandableSection
+     */
+    onPress?: () => void;
 };
 declare function ExpandableSection(props: ExpandableSectionProps): JSX.Element;
 export default ExpandableSection;

src/components/expandableSection/index.tsx

@@ -1,7 +1,8 @@
 import _ from 'lodash';
-import React, {useEffect} from 'react';
+import React from 'react';
 import {LayoutAnimation, StyleSheet} from 'react-native';
 import View from '../view';
+import TouchableOpacity from '../touchableOpacity'
 
 export type ExpandableSectionProps = {
   /**
@@ -16,19 +17,23 @@ export type ExpandableSectionProps = {
    * should the expandableSection be expanded
    */
   expanded?: boolean;
+  /**
+   * action for when pressing the header of the expandableSection
+   */
+  onPress?: () => void;
 };
 
 function ExpandableSection(props: ExpandableSectionProps) {
   const {expanded, sectionHeader, children} = props;
 
-  useEffect(() => {
-    LayoutAnimation.configureNext({...LayoutAnimation.Presets.easeInEaseOut, duration: 300});
-  }, [expanded]);
-
+const onPress = () => {
+  props.onPress?.();
+  LayoutAnimation.configureNext({...LayoutAnimation.Presets.easeInEaseOut, duration: 300});
+  }
 
   return (
     <View style={styles.container}>
-      {sectionHeader}
+      <TouchableOpacity onPress={onPress}>{sectionHeader}</TouchableOpacity>
       {expanded && children}
     </View>
   );