diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..e04219e Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 3020bf0..309dcc7 100644 --- a/README.md +++ b/README.md @@ -26,9 +26,11 @@ import ProgressiveImage from 'react-native-progressive-image' const TheProgressiveImage = () => ``` @@ -36,6 +38,7 @@ const TheProgressiveImage = () => | 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 diff --git a/example/images/placeholder@2x.png b/example/images/placeholder@2x.png new file mode 100755 index 0000000..308881f Binary files /dev/null and b/example/images/placeholder@2x.png differ diff --git a/example/images/placeholder@3x.png b/example/images/placeholder@3x.png new file mode 100755 index 0000000..62353dc Binary files /dev/null and b/example/images/placeholder@3x.png differ diff --git a/example/index.js b/example/index.js index bc5e7e5..013ed74 100644 --- a/example/index.js +++ b/example/index.js @@ -9,9 +9,11 @@ import ProgressiveImage from 'react-native-progressive-image' const TheProgressiveImage = () => export default () => diff --git a/index.js b/index.js index dd1b6e8..a6da013 100644 --- a/index.js +++ b/index.js @@ -30,19 +30,21 @@ export default class ProgressiveImage extends Component { return ( + {this.props.thumbnailSource && + this.onLoadThumbnail()} + blurRadius={this.props.thumbnailBlurRadius} + /> + } this.onLoadThumbnail()} - blurRadius={this.props.thumbnailBlurRadius} - /> - 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' }