Merge pull request #588 from DanielMarkiel/custom-animated-image

Custom animated image component

Author: Benoît Delmaire

doc/PARALLAX_IMAGE.md

@@ -14,6 +14,7 @@ Prop | Description | Type | Default
 `parallaxFactor` | Speed of the parallax effect. Be aware that the bigger the value, the more image will appear "zoomed in". | Number | `0.3`
 `showSpinner` | Whether to display a spinner while image is loading or not | Boolean | `true`
 `spinnerColor` | Color of the spinner | String | 'rgba(0, 0, 0, 0.4)'
+`AnimatedImageComponent` | Custom animated image component | Function Object | `Animated.Image`
 
 All [`<Image />` props](https://facebook.github.io/react-native/docs/image.html#props) are also inherited, **particularly `source` which is required**.
 

src/parallaximage/ParallaxImage.js

@@ -24,15 +24,20 @@ export default class ParallaxImage extends Component {
         fadeDuration: PropTypes.number,
         parallaxFactor: PropTypes.number,
         showSpinner: PropTypes.bool,
-        spinnerColor: PropTypes.string
+        spinnerColor: PropTypes.string,
+        AnimatedImageComponent: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.object
+        ])
     };
 
     static defaultProps = {
         containerStyle: {},
         fadeDuration: 500,
         parallaxFactor: 0.3,
         showSpinner: true,
-        spinnerColor: 'rgba(0, 0, 0, 0.4)'
+        spinnerColor: 'rgba(0, 0, 0, 0.4)',
+        AnimatedImageComponent: Animated.Image
     }
 
     constructor (props) {
@@ -146,6 +151,7 @@ export default class ParallaxImage extends Component {
             sliderHeight,
             parallaxFactor,
             style,
+            AnimatedImageComponent,
             ...other
         } = this.props;
 
@@ -174,7 +180,7 @@ export default class ParallaxImage extends Component {
         };
 
         return (
-            <Animated.Image
+            <AnimatedImageComponent
               {...other}
               style={[styles.image, style, requiredStyles, dynamicStyles]}
               onLoad={this._onLoad}