Adding animationConfig - Issue #9

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.
 
@@ -190,6 +191,7 @@ Option      | Type              | Default                | Description
 `showBackground` | boolean      | true                   | Passed through to `Popover`
 `arrowStyle` | 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.
 

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;

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
 }