add resizeMode and thumbnailSource optional

README.md

@@ -26,16 +26,19 @@ import ProgressiveImage from 'react-native-progressive-image'
 
 const TheProgressiveImage = () =>
   <ProgressiveImage
+    placeHolderSource={require('images/placeholder.png')}
     thumbnailSource={{ uri: 'http://i.imgur.com/O249H4P.png?bust' + Math.random() }}
     imageSource={{ uri: 'http://i.imgur.com/741u15U.png?bust' + Math.random() }}
     style={{ flex: 1, alignItems: 'stretch' }}
+    resizeMode="cover"
   />
 ```
 
 ## Properties
 
 | Prop | Description | Default |
 |---|---|---|
+| **`placeHolderSource`** | PlaceHolder source (e.g. require('./image.jpg')). | None |
 | **`imageSource`** | Image source (e.g. { uri: 'https://facebook.github.io/react/img/logo_og.png' }). | None |
 | **`thumbnailSource`** | Should be a low resolution version of the image used in `imageSource`. | None |
 | **`thumbnailBlurRadius`** | Blur radius for the low resolution thumbnail (iOS only). | `5` |
@@ -44,6 +47,7 @@ const TheProgressiveImage = () =>
 | **`thumbnailFadeDuration`** | Fade-in duration for the thumbnail in ms. | `250` |
 | **`onLoadThumbnail`** | Callback function that gets called when the thumbnail is loaded. | `noop` |
 | **`onLoadImage`** | Callback function that gets called when the main image is loaded. | `noop` |
+| **`resizeMode`** | Image resizeMode (e.g. resizeMode="cover". | None |
 
 ## Credits
 

example/index.js

@@ -9,9 +9,11 @@ import ProgressiveImage from 'react-native-progressive-image'
 
 const TheProgressiveImage = () =>
   <ProgressiveImage
+    placeHolderSource={require('images/placeholder.png')}
     thumbnailSource={{ uri: 'http://i.imgur.com/W3LKLla.png?bust' + Math.random() }}
     imageSource={{ uri: 'http://i.imgur.com/741u15U.png?bust' + Math.random() }}
     style={{ flex: 1, alignItems: 'stretch' }}
+    resizeMode="cover"
   />
 
 export default () =>

index.js

@@ -30,19 +30,21 @@ export default class ProgressiveImage extends Component {
     return (
       <View style={this.props.style}>
         <Image
-          resizeMode="cover"
+          resizeMode={this.props.resizeMode}
           style={[styles.image, this.props.style]}
           source={this.props.placeHolderSource}
         />
+        {this.props.thumbnailSource &&
+          <Animated.Image
+            resizeMode={this.props.resizeMode}
+            style={[styles.image, { opacity: this.state.thumbnailOpacity }, this.props.style]}
+            source={this.props.thumbnailSource}
+            onLoad={() => this.onLoadThumbnail()}
+            blurRadius={this.props.thumbnailBlurRadius}
+          />
+        }
         <Animated.Image
-          resizeMode="cover"
-          style={[styles.image, { opacity: this.state.thumbnailOpacity }, this.props.style]}
-          source={this.props.thumbnailSource}
-          onLoad={() => this.onLoadThumbnail()}
-          blurRadius={this.props.thumbnailBlurRadius}
-        />
-        <Animated.Image
-          resizeMode="cover"
+          resizeMode={this.props.resizeMode}
           style={[styles.image, { opacity: this.state.imageOpacity }, this.props.style]}
           source={this.props.imageSource}
           onLoad={() => this.onLoadImage()}
@@ -69,9 +71,10 @@ ProgressiveImage.propTypes = {
   imageFadeDuration: PropTypes.number.isRequired,
   onLoadThumbnail: PropTypes.func.isRequired,
   onLoadImage: PropTypes.func.isRequired,
-  thumbnailSource: PropTypes.object.isRequired,
+  thumbnailSource: PropTypes.object,
   thumbnailFadeDuration: PropTypes.number.isRequired,
   thumbnailBlurRadius: PropTypes.number,
+  resizeMode: PropTypes.string.isRequired
 }
 
 ProgressiveImage.defaultProps = {
@@ -80,4 +83,5 @@ ProgressiveImage.defaultProps = {
   thumbnailBlurRadius: 5,
   onLoadThumbnail: Function.prototype,
   onLoadImage: Function.prototype,
+  resizeMode: 'cover'
 }