İmportant PR's

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 `<View>` 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
 

src/.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

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 (
             <TransformableImage
+              onError={onError}
+              onLoad={onLoad}
+              onLoadEnd={onLoadEnd}
+              onLoadStart={onLoadStart}
               onViewTransformed={((transform) => {
                   onViewTransformed && onViewTransformed(transform, pageId);
               })}
@@ -240,6 +264,7 @@ export default class Gallery extends PureComponent {
               errorComponent={errorComponent}
               imageComponent={imageComponent}
               image={pageData}
+              imageLoadingIndicatorProps={imageLoadingIndicatorProps}
             />
         );
     }

src/libraries/ActivityIndicator/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import {View, ActivityIndicator} from 'react-native';
+
+const ActivityIndicatorComponent = (props) => {
+    return (
+        <View style={{
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+        }}>
+            <ActivityIndicator {...props} />
+        </View>
+    );
+};
+
+ActivityIndicatorComponent.propTypes = ActivityIndicator.propTypes;
+
+export default ActivityIndicatorComponent;

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) : <Image { ...imageProps } />;
 
         return (
-            <ViewTransformer
-              ref={'viewTransformer'}
-              key={'viewTransformer#' + keyAccumulator} // when image source changes, we should use a different node to avoid reusing previous transform state
-              enableTransform={enableTransform && imageLoaded} // disable transform until image is loaded
-              enableScale={enableScale}
-              enableTranslate={enableTranslate}
-              enableResistance={true}
-              onTransformGestureReleased={onTransformGestureReleased}
-              onViewTransformed={onViewTransformed}
-              maxScale={maxScale}
-              contentAspectRatio={contentAspectRatio}
-              onLayout={this.onLayout}
-              style={style}>
-                { error ? this.renderError() : content }
-            </ViewTransformer>
+            <View>
+                <ViewTransformer
+                  ref={'viewTransformer'}
+                  key={'viewTransformer#' + keyAccumulator} // when image source changes, we should use a different node to avoid reusing previous transform state
+                  enableTransform={enableTransform && imageLoaded} // disable transform until image is loaded
+                  enableScale={enableScale}
+                  enableTranslate={enableTranslate}
+                  enableResistance={true}
+                  onTransformGestureReleased={onTransformGestureReleased}
+                  onViewTransformed={onViewTransformed}
+                  maxScale={maxScale}
+                  contentAspectRatio={contentAspectRatio}
+                  onLayout={this.onLayout}
+                  style={style}>
+                    { error ? this.renderError() : content }
+                </ViewTransformer>
+                {!imageLoaded && <ImageLoadingIndicator {...imageLoadingIndicatorProps} />}
+            </View>
         );
     }
 }

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}>
                 <FlatList
-                  {...this.props.flatListProps}
                   style={[{ flex: 1 }, scrollViewStyle]}
                   ref={'innerFlatList'}
                   keyExtractor={this.keyExtractor}
@@ -331,6 +330,7 @@ export default class ViewPager extends PureComponent {
                   // https://github.com/facebook/react-native/issues/15734#issuecomment-330616697 and
                   // https://github.com/facebook/react-native/issues/14945#issuecomment-354651271
                   contentOffset = {{x: this.getScrollOffsetOfPage(parseInt(this.props.initialPage)), y:0}}
+                  {...this.props.flatListProps}
               />
             </View>
         );

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) {