Update demo

Author: luutruong

demo/components/ImageViewer/Image.tsx

@@ -12,6 +12,7 @@ import {
  PanResponderGestureState,
  Text,
  SafeAreaView,
+ Platform,
 } from 'react-native';
 import {
  HandlerStateChangeEvent,
@@ -102,12 +103,13 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  }
 
  if (Math.abs(gesture.dx) > Math.abs(gesture.dy)) {
- this.props.toggleEnableScroll(true);
-
+ this._debug('_onPanResponderMove', 'horizontal');
+ this.props.onZoomStateChange(false);
  return;
  }
 
- this.props.toggleEnableScroll(false);
+ this._debug('_onPanResponderMove', 'vertical');
+ this.props.onZoomStateChange(true);
  this._translateXY.setValue({x: 0, y: Math.max(0, gesture.dy)});
  }
  private _onPanResponderEnd(_evt: any, gesture: PanResponderGestureState) {
@@ -145,7 +147,6 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  }).start(() => this.props.onClose());
  } else {
  // fixed case swipe left when jump restart
- this.props.toggleEnableScroll(true);
  Animated.spring(this._translateXY, {
  toValue: {x: 0, y: 0},
  useNativeDriver: true,
@@ -176,7 +177,6 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  ]).start();
  this._lastScale = 1;
  this._lastOffset = {x: 0, y: 0};
- this.props.toggleEnableScroll(true);
  } else {
  const scale =
  this._getRatio() <= this._getMinimumScale() ? this._getMaximumScale() : SCREEN_WIDTH / this.state.width!;
@@ -232,7 +232,6 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  });
  this._lastScale = scale;
  this._setIsZooming(true);
- this.props.toggleEnableScroll(false);
  }
  };
 
@@ -265,7 +264,7 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  let scale = evt.nativeEvent.scale as number;
  if (scale < this._getMinimumScale()) {
  scale = this._getMinimumScale();
- this.props.toggleEnableScroll(true);
+
  this._setIsZooming(false);
  } else {
  scale = Math.min(this._getMaximumScale(), scale);
@@ -301,8 +300,6 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  this._scale.setValue(Math.min(this._getMaximumScale(), scale));
  this._setIsZooming(true);
  }
-
- this.props.toggleEnableScroll(false);
  }
  };
 
@@ -441,7 +438,10 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  return (
  <View style={styles.container}>
  <Animated.View style={backdropStyle} {...this._panResponder.panHandlers} />
- <Animated.View style={moveObjStyle} {...this._panResponder.panHandlers} renderToHardwareTextureAndroid>
+ <Animated.View
+ style={moveObjStyle}
+ {...(this.state.isZooming || Platform.OS === 'ios' ? this._panResponder.panHandlers : {})}
+ renderToHardwareTextureAndroid>
  <TapGestureHandler numberOfTaps={2} onActivated={this._handleImageZoomInOut}>
  <PinchGestureHandler
  onGestureEvent={this._onPinchGestureEvent}

demo/components/ImageViewer/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Modal, Dimensions, VirtualizedList, Platform} from 'react-native';
+import {Modal, Dimensions, VirtualizedList, Platform, VirtualizedListProps} from 'react-native';
 import Image from './Image';
 import {ImageViewerImageProps, ImageViewerComponentProps, ImageViewerComponentState} from './types';
 
@@ -14,15 +14,14 @@ class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewer
  animationType: 'none',
  };
 
- private _scrollRef: {current: any} = React.createRef();
+ private _scrollRef: {current: any} = React.createRef<VirtualizedList<any>>();
 
  private _closeInternal = () => this.props.onClose();
  private _renderImage = (info: {item: ImageViewerImageProps; index: number}) => (
  <Image
  source={info.item.source}
  title={info.item.title}
  onClose={this._closeInternal}
- toggleEnableScroll={this._handleToggleScrollState}
  onZoomStateChange={this._onZoomStateChange}
  imageIndex={info.index}
  imagesTotal={this._getItemCount()}
@@ -34,9 +33,10 @@ class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewer
  />
  );
 
- private _onZoomStateChange = (isZooming: boolean) => this.setState({isZooming});
- private _handleToggleScrollState = (enabled: boolean) => {
- this.setState({scrollEnabled: enabled});
+ private _onZoomStateChange = (isZooming: boolean) => {
+ this._scrollRef.current.getScrollRef().setNativeProps({
+ scrollEnabled: !isZooming,
+ });
  };
 
  private _getItemCount = () => this.props.images.length;
@@ -75,7 +75,7 @@ class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewer
  getItemCount={this._getItemCount}
  getItem={this._getItem}
  getItemLayout={this._getItemLayout}
- scrollEnabled={!this.state.isZooming}
+ scrollEnabled
  ref={this._scrollRef}
  removeClippedSubviews={true}
  maxToRenderPerBatch={2}
@@ -84,7 +84,6 @@ class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewer
  pagingEnabled
  initialScrollIndex={this.props.initialIndex}
  listKey={'RNImageViewer'}
- disableScrollViewPanResponder={!this.state.scrollEnabled}
  {...platformProps}
  />
  </Modal>

demo/components/ImageViewer/types.ts

@@ -11,7 +11,6 @@ export interface ImageComponentProps extends ImageComponentOptionalProps {
  source: ImageURISource | ImageRequireSource;
  title?: string;
  onClose: () => void;
- toggleEnableScroll: (enabled: boolean) => void;
  onZoomStateChange: (isZooming: boolean) => void;
 
  imageIndex: number;