From 7aa4a5bea2b0b76c092c3c21ca39f2286853396d Mon Sep 17 00:00:00 2001 From: Dimitar Belchev Date: Tue, 27 Feb 2018 10:59:44 +0200 Subject: [PATCH 1/3] Image loading activity indicator added. --- src/Gallery.js | 6 ++-- src/libraries/ActivityIndicator/index.js | 26 ++++++++++++++ src/libraries/TransformableImage/index.js | 41 +++++++++++++---------- 3 files changed, 53 insertions(+), 20 deletions(-) create mode 100644 src/libraries/ActivityIndicator/index.js diff --git a/src/Gallery.js b/src/Gallery.js index 5cc4835..7e79282 100644 --- a/src/Gallery.js +++ b/src/Gallery.js @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { View, ViewPropTypes } from 'react-native'; +import { View, ViewPropTypes, ActivityIndicator } from 'react-native'; import PropTypes from 'prop-types'; import { createResponder } from './libraries/GestureResponder'; import TransformableImage from './libraries/TransformableImage'; @@ -13,6 +13,7 @@ export default class Gallery extends PureComponent { static propTypes = { ...View.propTypes, images: PropTypes.arrayOf(PropTypes.object), + imageLoadingActivityIndicator: PropTypes.shape(ActivityIndicator.propTypes), initialPage: PropTypes.number, scrollViewStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, pageMargin: PropTypes.number, @@ -225,7 +226,7 @@ export default class Gallery extends PureComponent { } renderPage (pageData, pageId) { - const { onViewTransformed, onTransformGestureReleased, errorComponent, imageComponent } = this.props; + const { onViewTransformed, onTransformGestureReleased, errorComponent, imageComponent, imageLoadingActivityIndicator } = this.props; return ( { @@ -240,6 +241,7 @@ export default class Gallery extends PureComponent { errorComponent={errorComponent} imageComponent={imageComponent} image={pageData} + imageLoadingActivityIndicator={imageLoadingActivityIndicator} /> ); } diff --git a/src/libraries/ActivityIndicator/index.js b/src/libraries/ActivityIndicator/index.js new file mode 100644 index 0000000..27363c4 --- /dev/null +++ b/src/libraries/ActivityIndicator/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import {View, Platform, ActivityIndicator} from 'react-native'; +import PropTypes from 'prop-types'; + +const DEFAULT_LOADER_SIZE = Platform.OS === 'ios' ? 'large' : 50; + +const ActivityIndicatorComponent = (props) => { + return ( + + + + ); +}; + +ActivityIndicatorComponent.propTypes = ActivityIndicator.propTypes; + +export default ActivityIndicatorComponent; diff --git a/src/libraries/TransformableImage/index.js b/src/libraries/TransformableImage/index.js index 8ff8469..d3bf35e 100644 --- a/src/libraries/TransformableImage/index.js +++ b/src/libraries/TransformableImage/index.js @@ -1,7 +1,8 @@ import React, { PureComponent } from 'react'; -import { View, Text, Image, ViewPropTypes } from 'react-native'; +import { View, Text, Image, ViewPropTypes, ActivityIndicator } from 'react-native'; import PropTypes from 'prop-types'; import ViewTransformer from '../ViewTransformer'; +import ImageLoadingIndicator from '../ActivityIndicator'; export default class TransformableImage extends PureComponent { static propTypes = { @@ -22,7 +23,8 @@ export default class TransformableImage extends PureComponent { onViewTransformed: PropTypes.func, imageComponent: PropTypes.func, resizeMode: PropTypes.string, - errorComponent: PropTypes.func + errorComponent: PropTypes.func, + imageLoadingActivityIndicator: PropTypes.shape(ActivityIndicator.propTypes), }; static defaultProps = { @@ -142,7 +144,7 @@ export default class TransformableImage extends PureComponent { render () { const { imageDimensions, viewWidth, viewHeight, error, keyAccumulator, imageLoaded } = this.state; - const { style, image, imageComponent, resizeMode, enableTransform, enableScale, enableTranslate, onTransformGestureReleased, onViewTransformed } = this.props; + const { style, image, imageComponent, resizeMode, enableTransform, enableScale, enableTranslate, onTransformGestureReleased, onViewTransformed, imageLoadingActivityIndicator } = this.props; let maxScale = 1; let contentAspectRatio; @@ -175,21 +177,24 @@ export default class TransformableImage extends PureComponent { const content = imageComponent ? imageComponent(imageProps, imageDimensions) : ; return ( - - { error ? this.renderError() : content } - + + + { error ? this.renderError() : content } + + {!imageLoaded && } + ); } } From 293678c3ce2e2e78a6d456c8574b6e327d2f7507 Mon Sep 17 00:00:00 2001 From: Dimitar Belchev Date: Tue, 27 Feb 2018 11:28:36 +0200 Subject: [PATCH 2/3] Documentation added --- README.md | 1 + src/Gallery.js | 6 +++--- src/libraries/ActivityIndicator/index.js | 7 ++----- src/libraries/TransformableImage/index.js | 6 +++--- 4 files changed, 9 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a7d31d6..944fd6a 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ Prop | Description | Type | Default `scrollViewStyle` | Custom style for the `FlatList` component | `object` | `{}` `onSingleTapConfirmed` | Fired after a single tap | `function` `onLongPress` | Fired after a long press | `function` +`imageLoadingIndicatorProps` | Props to be passed to the underlying image `ActivityIndicator` component | `object` | React Native `ActivityIndicator` defaults ## Scroll state and events diff --git a/src/Gallery.js b/src/Gallery.js index 7e79282..b7a71be 100644 --- a/src/Gallery.js +++ b/src/Gallery.js @@ -13,7 +13,7 @@ export default class Gallery extends PureComponent { static propTypes = { ...View.propTypes, images: PropTypes.arrayOf(PropTypes.object), - imageLoadingActivityIndicator: PropTypes.shape(ActivityIndicator.propTypes), + imageLoadingIndicatorProps: PropTypes.shape(ActivityIndicator.propTypes), initialPage: PropTypes.number, scrollViewStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, pageMargin: PropTypes.number, @@ -226,7 +226,7 @@ export default class Gallery extends PureComponent { } renderPage (pageData, pageId) { - const { onViewTransformed, onTransformGestureReleased, errorComponent, imageComponent, imageLoadingActivityIndicator } = this.props; + const { onViewTransformed, onTransformGestureReleased, errorComponent, imageComponent, imageLoadingIndicatorProps } = this.props; return ( { @@ -241,7 +241,7 @@ export default class Gallery extends PureComponent { errorComponent={errorComponent} imageComponent={imageComponent} image={pageData} - imageLoadingActivityIndicator={imageLoadingActivityIndicator} + imageLoadingIndicatorProps={imageLoadingIndicatorProps} /> ); } diff --git a/src/libraries/ActivityIndicator/index.js b/src/libraries/ActivityIndicator/index.js index 27363c4..919767a 100644 --- a/src/libraries/ActivityIndicator/index.js +++ b/src/libraries/ActivityIndicator/index.js @@ -1,8 +1,5 @@ import React from 'react'; -import {View, Platform, ActivityIndicator} from 'react-native'; -import PropTypes from 'prop-types'; - -const DEFAULT_LOADER_SIZE = Platform.OS === 'ios' ? 'large' : 50; +import {View, ActivityIndicator} from 'react-native'; const ActivityIndicatorComponent = (props) => { return ( @@ -16,7 +13,7 @@ const ActivityIndicatorComponent = (props) => { bottom: 0, left: 0 }}> - + ); }; diff --git a/src/libraries/TransformableImage/index.js b/src/libraries/TransformableImage/index.js index d3bf35e..34a3ba6 100644 --- a/src/libraries/TransformableImage/index.js +++ b/src/libraries/TransformableImage/index.js @@ -24,7 +24,7 @@ export default class TransformableImage extends PureComponent { imageComponent: PropTypes.func, resizeMode: PropTypes.string, errorComponent: PropTypes.func, - imageLoadingActivityIndicator: PropTypes.shape(ActivityIndicator.propTypes), + imageLoadingIndicatorProps: PropTypes.shape(ActivityIndicator.propTypes), }; static defaultProps = { @@ -144,7 +144,7 @@ export default class TransformableImage extends PureComponent { render () { const { imageDimensions, viewWidth, viewHeight, error, keyAccumulator, imageLoaded } = this.state; - const { style, image, imageComponent, resizeMode, enableTransform, enableScale, enableTranslate, onTransformGestureReleased, onViewTransformed, imageLoadingActivityIndicator } = this.props; + const { style, image, imageComponent, resizeMode, enableTransform, enableScale, enableTranslate, onTransformGestureReleased, onViewTransformed, imageLoadingIndicatorProps } = this.props; let maxScale = 1; let contentAspectRatio; @@ -193,7 +193,7 @@ export default class TransformableImage extends PureComponent { style={style}> { error ? this.renderError() : content } - {!imageLoaded && } + {!imageLoaded && } ); } From 29e2b214d59d879681b03e2acd9cf92b1adc3b1b Mon Sep 17 00:00:00 2001 From: Dimitar Belchev Date: Tue, 27 Feb 2018 11:46:32 +0200 Subject: [PATCH 3/3] Removed redundant attribute from ActivityIndicatorComponent --- src/libraries/ActivityIndicator/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libraries/ActivityIndicator/index.js b/src/libraries/ActivityIndicator/index.js index 919767a..b01dc71 100644 --- a/src/libraries/ActivityIndicator/index.js +++ b/src/libraries/ActivityIndicator/index.js @@ -4,7 +4,6 @@ import {View, ActivityIndicator} from 'react-native'; const ActivityIndicatorComponent = (props) => { return (