Added the ability to specify opening and closing animation props

Lightbox.js

@@ -7,6 +7,8 @@ import LightboxOverlay from './LightboxOverlay';
 export default class Lightbox extends Component {
   static propTypes = {
     activeProps:     PropTypes.object,
+    openingProps:     PropTypes.object,
+    closingProps:     PropTypes.object,
     renderHeader:    PropTypes.func,
     renderContent:   PropTypes.func,
     underlayColor:   PropTypes.string,
@@ -44,18 +46,16 @@ export default class Lightbox extends Component {
   getContent = () => {
     if(this.props.renderContent) {
       return this.props.renderContent();
-    } else if(this.props.activeProps) {
-      return cloneElement(
-        Children.only(this.props.children),
-        this.props.activeProps
-      );
-    }
+    } 
     return this.props.children;
   }
 
   getOverlayProps = () => ({
     isOpen: this.state.isOpen,
     origin: this.state.origin,
+    activeProps: this.props.activeProps,
+    openingProps: this.props.openingProps,
+    closingProps: this.props.closingProps,
     renderHeader: this.props.renderHeader,
     swipeToDismiss: this.props.swipeToDismiss,
     springConfig: this.props.springConfig,

LightboxOverlay.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { Animated, Dimensions, Modal, PanResponder, Platform, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
@@ -135,6 +135,7 @@ export default class LightboxOverlay extends Component {
     this.state.pan.setValue(0);
     this.setState({
       isAnimating: true,
+      isOpening: true,
       target: {
         x: 0,
         y: 0,
@@ -146,7 +147,10 @@ export default class LightboxOverlay extends Component {
       this.state.openVal,
       { toValue: 1, ...this.props.springConfig }
     ).start(() => {
-      this.setState({ isAnimating: false });
+      this.setState({ 
+        isAnimating: false, 
+        isOpening: false
+      });
       this.props.didOpen();
     });
   }
@@ -158,13 +162,15 @@ export default class LightboxOverlay extends Component {
     }
     this.setState({
       isAnimating: true,
+      isClosing: true,
     });
     Animated.spring(
       this.state.openVal,
       { toValue: 0, ...this.props.springConfig }
     ).start(() => {
       this.setState({
         isAnimating: false,
+        isClosing: false,
       });
       this.props.onClose();
     });
@@ -176,6 +182,19 @@ export default class LightboxOverlay extends Component {
     }
   }
 
+  getContent = () => {
+    if (this.state.isOpening && this.props.openingProps) {
+      return cloneElement(Children.only(this.props.children), this.props.openingProps)
+    }
+    else if (this.state.isClosing && this.props.closingProps) {
+      return cloneElement(Children.only(this.props.children), this.props.closingProps)
+    }
+    else if (this.props.activeProps) {
+      return cloneElement(Children.only(this.props.children), this.props.activeProps)
+    }
+    return this.props.children
+  }
+
   render() {
     const {
       isOpen,
@@ -227,7 +246,7 @@ export default class LightboxOverlay extends Component {
     )}</Animated.View>);
     const content = (
       <Animated.View style={[openStyle, dragStyle]} {...handlers}>
-        {this.props.children}
+        {this.getContent()}
       </Animated.View>
     );