diff --git a/README.md b/README.md index 06e409a..df5daf1 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,7 @@ showInModal | bool | Yes | true | Whether the popover shou arrowStyle | object | Yes | {} | The style of the arrow that points to the rect. Supported options are `width`, `height`, and `backgroundColor`. You can use `{backgroundColor: 'transparent'}` to hid the arrow completely. popoverStyle | object | Yes | {} | The style of the popover itself. You can override the `borderRadius`, `backgroundColor`, or any other [`style` prop for a `View`](https://facebook.github.io/react-native/docs/view-style-props.html). showBackground | bool | Yes | true | Whether the background behind the popover darkens when the popover is shown. +animationConfig | object | Yes | | An object containing any configuration options that can be passed to Animated.timing (e.g. `{ duration: 600, easing: Easing.inOut(Easing.quad) }`). The configuration options you pass will override the defaults for all animations. If neither `fromRect` or `fromView` are provided, the popover will float in the center of the screen. @@ -189,7 +190,8 @@ Option | Type | Default | Description `showInModal` | boolean | true | Passed through to `Popover`. If you want to stack multiple `Popover`'s, only the bottom one can be shown in a `Modal` on iOS. `showBackground` | boolean | true | Passed through to `Popover` `arrowStyle` | object | {} | Passed through to `Popover` -`popoverStyle` | object | {} | Passed through to `Popover` +`popoverStyle` | object | {} | Passed through to `Popover` +`animationConfig` | object | | Passed through to `Popover` Note: If you pass a value through the `stackConfig`, and pass the same option for an individual screen, the value passed for the screen overrides. diff --git a/src/Popover.js b/src/Popover.js index 10aaf68..ddf9af2 100644 --- a/src/Popover.js +++ b/src/Popover.js @@ -527,11 +527,11 @@ class Popover extends React.Component { } animateTo({fade, translatePoint, scale, callback, easing, values}) { - const commonConfig = { + const commonConfig = Object.assign({ duration: 300, easing, useNativeDriver: true - } + }, this.props.animationConfig); if (this.animating) { setTimeout(() => this.animateTo.apply(this, arguments), 100); @@ -548,20 +548,20 @@ class Popover extends React.Component { this.animating = true; Animated.parallel([ Animated.timing(values.fade, { - toValue: fade, ...commonConfig, + toValue: fade }), Animated.timing(values.translate, { - toValue: translatePoint, ...commonConfig, + toValue: translatePoint }), Animated.timing(values.scale, { - toValue: scale, ...commonConfig, + toValue: scale }), Animated.timing(values.translateArrow, { - toValue: newArrowLocation, ...commonConfig, + toValue: newArrowLocation }) ]).start(() => { this.animating = false; @@ -750,7 +750,8 @@ Popover.propTypes = { layoutRtl: PropTypes.bool, showBackground: PropTypes.bool, popoverStyle: PropTypes.object, - arrowStyle: PropTypes.object + arrowStyle: PropTypes.object, + animationConfig: PropTypes.object } export default Popover; diff --git a/src/PopoverNavigation.js b/src/PopoverNavigation.js index 2179d6f..03637d8 100644 --- a/src/PopoverNavigation.js +++ b/src/PopoverNavigation.js @@ -41,7 +41,7 @@ export default class PopoverNavigation extends Component { render() { const child = React.cloneElement(this.props.children, {goBack: () => this.goBack()}); - const { contentContainerStyle, popoverStyle, arrowStyle, placement, showInModal, layoutRtl, showBackground, getRegisteredView, displayArea, showInPopover, backgroundColor } = this.props; + const { contentContainerStyle, popoverStyle, arrowStyle, placement, showInModal, layoutRtl, showBackground, getRegisteredView, displayArea, showInPopover, backgroundColor, animationConfig } = this.props; if (showInPopover) { return ( @@ -52,6 +52,7 @@ export default class PopoverNavigation extends Component { showInModal={showInModal} layoutRtl={layoutRtl} showBackground={showBackground} + animationConfig={animationConfig} isVisible={this.state.visible} onClose={() => this.goBack()} displayArea={displayArea || this.getParam('displayArea')} @@ -85,5 +86,6 @@ PopoverNavigation.propTypes = { displayArea: PropTypes.objectOf(PropTypes.number), showInPopover: PropTypes.bool, popoverStyle: PropTypes.object, - arrowStyle: PropTypes.object + arrowStyle: PropTypes.object, + animationConfig: PropTypes.object }