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

Custom animated image component
meliorence · Oct 11, 2019 · 9587256 · 9587256
2 parents f645204 + 21f1d31
commit 9587256
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/doc/PARALLAX_IMAGE.md b/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**.
 

diff --git a/src/parallaximage/ParallaxImage.js b/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}