diff --git a/.eslintrc b/.eslintrc index e17550e..5bb69f2 100644 --- 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 index 9a597b5..9f5a140 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: () => null, }; constructor(props) { @@ -96,6 +98,7 @@ export default class Accordion extends Component { this.props.onAnimationEnd(section, key)} > {this.props.renderContent( section, diff --git a/Collapsible.js b/Collapsible.js index 1b09fc8..bb1e939 100644 --- 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} > - - {this.props.children} - + {this.props.children} ); 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 diff --git a/package.json b/package.json index c59321f..4bb8541 100644 --- 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",