0.12.0 #199

oblador · Jun 7, 2018 · a975d22 · a975d22
2 parents ed6283a + 51772ad
commit a975d22
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 8 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -22,7 +22,7 @@
     "import",
     "react",
     "react-native",
-    "prettier",
+    "prettier"
   ],
   "rules": {
     "constructor-super": "error",
@@ -137,6 +137,6 @@
     "prettier/prettier": ["error", {
       "trailingComma": "es5",
       "singleQuote": true
-    }],
+    }]
   }
 }
diff --git 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: () => null,
   };
 
   constructor(props) {
@@ -96,6 +98,7 @@ export default class Accordion extends Component {
       <Collapsible
         collapsed={this.state.activeSection !== key}
         {...collapsibleProps}
+        onAnimationEnd={() => this.props.onAnimationEnd(section, key)}
       >
         {this.props.renderContent(
           section,

diff --git a/Collapsible.js b/Collapsible.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Animated, Easing, View } from 'react-native';
+import { Animated, Easing } from 'react-native';
 import { ViewPropTypes } from './config';
 
 const ANIMATED_EASING_PREFIXES = ['easeInOut', 'easeOut', 'easeIn'];
@@ -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: () => null,
   };
 
   constructor(props) {
@@ -142,7 +144,9 @@ 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 => {
@@ -198,9 +202,7 @@ export default class Collapsible extends Component {
           style={[this.props.style, contentStyle]}
           onLayout={this.state.animating ? undefined : this._handleLayoutChange}
         >
-          <View style={{ height: measured ? contentHeight : null }}>
-            {this.props.children}
-          </View>
+          {this.props.children}
         </Animated.View>
       </Animated.View>
     );

diff --git 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

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-collapsible",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "description": "Animated collapsible component for React Native using the Animated API. Good for accordions, toggles etc",
   "main": "Collapsible.js",
   "types": "index.d.ts",