From 3a600ca6fe18a84c9dcdd358fe9b944d5b30f026 Mon Sep 17 00:00:00 2001
From: "Madd.is" <github@madd.is>
Date: Sun, 27 May 2018 06:18:18 +0200
Subject: [PATCH] Add onAnimationEnd prop (#198)

* support onAnimationEnd

* add to defaultProps
---
 Accordion.js   | 8 ++++++++
 Collapsible.js | 4 +++-
 README.md      | 2 ++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/Accordion.js b/Accordion.js
index 9a597b5..2b1834a 100644
--- a/Accordion.js
+++ b/Accordion.js
@@ -27,6 +27,7 @@ export default class Accordion extends Component {
     touchableProps: PropTypes.object,
     disabled: PropTypes.bool,
     expandFromBottom: PropTypes.bool,
+    onAnimationEnd: PropTypes.func,
   };
 
   static defaultProps = {
@@ -35,6 +36,7 @@ export default class Accordion extends Component {
     expandFromBottom: false,
     touchableComponent: TouchableHighlight,
     renderSectionTitle: () => null,
+    onAnimationEnd: () => {},
   };
 
   constructor(props) {
@@ -96,6 +98,12 @@ export default class Accordion extends Component {
       <Collapsible
         collapsed={this.state.activeSection !== key}
         {...collapsibleProps}
+        onAnimationEnd={() => {
+          const { onAnimationEnd } = this.props
+          if(onAnimationEnd) {
+            onAnimationEnd(section, key)
+          }
+        }}
       >
         {this.props.renderContent(
           section,
diff --git a/Collapsible.js b/Collapsible.js
index 1b09fc8..0ad66d1 100644
--- a/Collapsible.js
+++ b/Collapsible.js
@@ -13,6 +13,7 @@ export default class Collapsible extends Component {
     duration: PropTypes.number,
     easing: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     style: ViewPropTypes.style,
+    onAnimationEnd: PropTypes.func,
     children: PropTypes.node,
   };
 
@@ -22,6 +23,7 @@ export default class Collapsible extends Component {
     collapsedHeight: 0,
     duration: 300,
     easing: 'easeOutCubic',
+    onAnimationEnd: () => {},
   };
 
   constructor(props) {
@@ -142,7 +144,7 @@ export default class Collapsible extends Component {
       toValue: height,
       duration,
       easing,
-    }).start(() => this.setState({ animating: false }));
+    }).start(() => this.setState({ animating: false }, this.props.onAnimationEnd));
   }
 
   _handleLayoutChange = event => {
diff --git a/README.md b/README.md
index 535d594..13b9bfb 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,7 @@ import Collapsible from 'react-native-collapsible';
 | **`duration`**        | Duration of transition in milliseconds                                                                                                                                                                                                                                                                                  | `300`          |
 | **`easing`**          | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
 | **`style`**           | Optional styling for the container                                                                                                                                                                                                                                                                                      |                |
+| **`onAnimationEnd`**  | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation                                                                                                                                                                                                                   | `() => {}`    |
 
 ## Accordion Usage
 
@@ -62,6 +63,7 @@ import Accordion from 'react-native-collapsible/Accordion';
 | **`align`**                                             | See `Collapsible`                                                                                               |
 | **`duration`**                                          | See `Collapsible`                                                                                               |
 | **`easing`**                                            | See `Collapsible`                                                                                               |
+| **`onAnimationEnd(key, index)`**                        | See `Collapsible`.                                                                                              |
 | **`expandFromBottom`**                                  | Expand content from the bottom instead of the top                                                               |
 
 ## Demo