diff --git a/README.md b/README.md index a7d31d6..691e720 100644 --- a/README.md +++ b/README.md @@ -68,12 +68,15 @@ Prop | Description | Type | Default `errorComponent` | Custom function to render the page of an image that couldn't be displayed | `function` | A `` with a stylized error `flatListProps` | Props to be passed to the underlying `FlatList` | `object` | `{windowSize: 3}` `pageMargin` | Blank space to show between images | `number` | `0` +`onEndReached` | Fired when the page index is within the `onEndReachedThreshold` of the `images` content | `function` +`onEndReachedThreshold` | How far from the end (in units of visible length of the list) the end of the list of images must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the images. | `number` | `0.5` `onPageSelected` | Fired with the index of page that has been selected | `function` `onPageScrollStateChanged` | Called when page scrolling state has changed, see [scroll state and events](#scroll-state-and-events) | `function` `onPageScroll` | Scroll event, see [scroll state and events](#scroll-state-and-events) | `function` `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/.vs/VSWorkspaceState.json b/src/.vs/VSWorkspaceState.json new file mode 100644 index 0000000..6b61141 --- /dev/null +++ b/src/.vs/VSWorkspaceState.json @@ -0,0 +1,6 @@ +{ + "ExpandedNodes": [ + "" + ], + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/src/.vs/slnx.sqlite b/src/.vs/slnx.sqlite new file mode 100644 index 0000000..10fccf3 Binary files /dev/null and b/src/.vs/slnx.sqlite differ diff --git a/src/.vs/src/v15/.suo b/src/.vs/src/v15/.suo new file mode 100644 index 0000000..957a70d Binary files /dev/null and b/src/.vs/src/v15/.suo differ diff --git a/src/Gallery.js b/src/Gallery.js index 5cc4835..3837d85 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,9 +13,12 @@ export default class Gallery extends PureComponent { static propTypes = { ...View.propTypes, images: PropTypes.arrayOf(PropTypes.object), + imageLoadingIndicatorProps: PropTypes.shape(ActivityIndicator.propTypes), initialPage: PropTypes.number, scrollViewStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style, pageMargin: PropTypes.number, + onEndReached: PropTypes.func, + onEndReachedThreshold: PropTypes.number, onPageSelected: PropTypes.func, onPageScrollStateChanged: PropTypes.func, onPageScroll: PropTypes.func, @@ -25,13 +28,16 @@ export default class Gallery extends PureComponent { removeClippedSubviews: PropTypes.bool, imageComponent: PropTypes.func, errorComponent: PropTypes.func, - flatListProps: PropTypes.object + flatListProps: PropTypes.object, + onLoad: PropTypes.func, + onLoadStart: PropTypes.func }; static defaultProps = { removeClippedSubviews: true, imageComponent: undefined, scrollViewStyle: {}, + onEndReachedThreshold: 0.5, flatListProps: DEFAULT_FLAT_LIST_PROPS }; @@ -215,6 +221,9 @@ export default class Gallery extends PureComponent { onPageSelected (page) { this.currentPage = page; this.props.onPageSelected && this.props.onPageSelected(page); + if (page + 1 > this.props.onEndReachedThreshold * this.props.images.length) { + this.props.onEndReached && this.props.onEndReached(); + } } onPageScrollStateChanged (state) { @@ -225,9 +234,24 @@ export default class Gallery extends PureComponent { } renderPage (pageData, pageId) { - const { onViewTransformed, onTransformGestureReleased, errorComponent, imageComponent } = this.props; + const { + onViewTransformed, + onTransformGestureReleased, + errorComponent, + imageComponent, + onError, + onLoad, + onLoadEnd, + onLoadStart + } = this.props; + + return ( { onViewTransformed && onViewTransformed(transform, pageId); })} @@ -240,6 +264,7 @@ export default class Gallery extends PureComponent { errorComponent={errorComponent} imageComponent={imageComponent} image={pageData} + imageLoadingIndicatorProps={imageLoadingIndicatorProps} /> ); } diff --git a/src/libraries/ActivityIndicator/index.js b/src/libraries/ActivityIndicator/index.js new file mode 100644 index 0000000..b01dc71 --- /dev/null +++ b/src/libraries/ActivityIndicator/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import {View, ActivityIndicator} from 'react-native'; + +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..c9ca8ea 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, + imageLoadingIndicatorProps: PropTypes.shape(ActivityIndicator.propTypes), }; static defaultProps = { @@ -36,6 +38,7 @@ export default class TransformableImage extends PureComponent { constructor (props) { super(props); + this.onError = this.onError.bind(this); this.onLayout = this.onLayout.bind(this); this.onLoad = this.onLoad.bind(this); this.onLoadStart = this.onLoadStart.bind(this); @@ -75,6 +78,11 @@ export default class TransformableImage extends PureComponent { this._mounted = false; } + onError (e) { + this.props.onError && this.props.onError(e); + this.setState({ error: true }); + } + onLoadStart (e) { this.props.onLoadStart && this.props.onLoadStart(e); if (this.state.imageLoaded) { @@ -142,7 +150,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, imageLoadingIndicatorProps } = this.props; let maxScale = 1; let contentAspectRatio; @@ -167,6 +175,7 @@ export default class TransformableImage extends PureComponent { source: image.source, style: [style, { backgroundColor: 'transparent' }], resizeMode: resizeMode, + onError: this.onError, onLoadStart: this.onLoadStart, onLoad: this.onLoad, capInsets: { left: 0.1, top: 0.1, right: 0.1, bottom: 0.1 } @@ -175,21 +184,24 @@ export default class TransformableImage extends PureComponent { const content = imageComponent ? imageComponent(imageProps, imageDimensions) : ; return ( - - { error ? this.renderError() : content } - + + + { error ? this.renderError() : content } + + {!imageLoaded && } + ); } } diff --git a/src/libraries/ViewPager/index.js b/src/libraries/ViewPager/index.js index b786ad1..4099381 100644 --- a/src/libraries/ViewPager/index.js +++ b/src/libraries/ViewPager/index.js @@ -65,13 +65,13 @@ export default class ViewPager extends PureComponent { createScroller () { return new Scroller(true, (dx, dy, scroller) => { + const curX = this.scroller.getCurrX(); + this.refs['innerFlatList'] && this.refs['innerFlatList'].scrollToOffset({ offset: curX, animated: false }); if (dx === 0 && dy === 0 && scroller.isFinished()) { if (!this.activeGesture) { this.onPageScrollStateChanged('idle'); } } else { - const curX = this.scroller.getCurrX(); - this.refs['innerFlatList'] && this.refs['innerFlatList'].scrollToOffset({ offset: curX, animated: false }); let position = Math.floor(curX / (this.state.width + this.props.pageMargin)); position = this.validPage(position); @@ -260,7 +260,7 @@ export default class ViewPager extends PureComponent { } keyExtractor (item, index) { - return index; + return index.toString(); } renderRow ({ item, index }) { @@ -316,7 +316,6 @@ export default class ViewPager extends PureComponent { style={[style, { flex: 1 }]} {...gestureResponder}> ); diff --git a/src/libraries/ViewTransformer/index.js b/src/libraries/ViewTransformer/index.js index f919e99..fb2525c 100644 --- a/src/libraries/ViewTransformer/index.js +++ b/src/libraries/ViewTransformer/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import ReactNative, { View, Animated, Easing, NativeModules } from 'react-native'; +import { View, Animated, Easing, NativeModules, findNodeHandle } from 'react-native'; import Scroller from '../Scroller'; import PropTypes from 'prop-types'; import { createResponder } from '../GestureResponder'; @@ -100,10 +100,10 @@ export default class ViewTransformer extends React.Component { onStartShouldSetResponder: (evt, gestureState) => true, onMoveShouldSetResponderCapture: (evt, gestureState) => true, // onMoveShouldSetResponder: this.handleMove, - onResponderMove: this.onResponderMove, - onResponderGrant: this.onResponderGrant, - onResponderRelease: this.onResponderRelease, - onResponderTerminate: this.onResponderRelease, + onResponderMove: this.onResponderMove.bind(this), + onResponderGrant: this.onResponderGrant.bind(this), + onResponderRelease: this.onResponderRelease.bind(this), + onResponderTerminate: this.onResponderRelease.bind(this), onResponderTerminationRequest: (evt, gestureState) => false, // Do not allow parent view to intercept gesture onResponderSingleTapConfirmed: (evt, gestureState) => { this.props.onSingleTapConfirmed && this.props.onSingleTapConfirmed(); @@ -161,7 +161,7 @@ export default class ViewTransformer extends React.Component { } measureLayout () { - let handle = ReactNative.findNodeHandle(this.refs['innerViewRef']); + let handle = findNodeHandle(this.refs['innerViewRef']); NativeModules.UIManager.measure(handle, (x, y, width, height, pageX, pageY) => { if (typeof pageX === 'number' && typeof pageY === 'number') { // avoid undefined values on Android devices if (this.state.pageX !== pageX || this.state.pageY !== pageY) {