Update demo

Author: luutruong

demo/App.tsx

@@ -23,6 +23,7 @@ import {
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 import axios from 'axios';
 import ImageViewer from './components/ImageViewer';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
 
 const WIDTH = Dimensions.get('window').width;
 

demo/android/app/src/main/java/com/demo/MainActivity.java

@@ -1,6 +1,9 @@
 package com.demo;
 
 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +15,14 @@ public class MainActivity extends ReactActivity {
  protected String getMainComponentName() {
  return "demo";
  }
+
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
 }

demo/components/ImageViewer/Image.tsx

@@ -51,6 +51,7 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  width: null,
  height: null,
  loading: true,
+ isZooming: false,
  } as ImageComponentState;
 
  this._translateXY = new Animated.ValueXY();
@@ -103,7 +104,7 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  if (Math.abs(gesture.dx) > Math.abs(gesture.dy)) {
  this.props.toggleEnableScroll(true);
 
- return false;
+ return;
  }
 
  this.props.toggleEnableScroll(false);
@@ -160,6 +161,7 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
 
  if (this._lastScale > this._getMinimumScale()) {
  this._translateXY.setOffset({x: 0, y: 0});
+ this._setIsZooming(false);
  Animated.parallel([
  Animated.timing(this._translateXY, {
  toValue: {x: 0, y: 0},
@@ -229,6 +231,7 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  this._lastOffset = {x, y};
  });
  this._lastScale = scale;
+ this._setIsZooming(true);
  this.props.toggleEnableScroll(false);
  }
  };
@@ -263,8 +266,10 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  if (scale < this._getMinimumScale()) {
  scale = this._getMinimumScale();
  this.props.toggleEnableScroll(true);
+ this._setIsZooming(false);
  } else {
  scale = Math.min(this._getMaximumScale(), scale);
+ this._setIsZooming(true);
  }
 
  this._lastScale = scale;
@@ -291,17 +296,24 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
 
  if (scale < this._getMinimumScale()) {
  this._scale.setValue(this._getMinimumScale());
+ this._setIsZooming(false);
  } else {
  this._scale.setValue(Math.min(this._getMaximumScale(), scale));
+ this._setIsZooming(true);
  }
 
  this.props.toggleEnableScroll(false);
  }
  };
 
  private _debug = (...args: any[]) => this.props.debug && console.log(...args);
+ private _setIsZooming = (isZooming: boolean) => this.setState({isZooming}, () => this.props.onZoomStateChange(isZooming));
 
  private _renderHeader = () => {
+ if (this.state.isZooming) {
+ return null;
+ }
+
  const headerAnim: any = [
  styles.header,
  {
@@ -333,6 +345,10 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
  return null;
  }
 
+ if (this.state.isZooming) {
+ return null;
+ }
+
  let innerComponent;
  if (renderFooter !== undefined) {
  if (typeof renderFooter !== 'function') {
@@ -425,7 +441,7 @@ 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}>
+ <Animated.View style={moveObjStyle} {...this._panResponder.panHandlers} renderToHardwareTextureAndroid>
  <TapGestureHandler numberOfTaps={2} onActivated={this._handleImageZoomInOut}>
  <PinchGestureHandler
  onGestureEvent={this._onPinchGestureEvent}

demo/components/ImageViewer/index.tsx

@@ -8,6 +8,7 @@ const SCREEN_WIDTH = Dimensions.get('window').width;
 class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewerComponentState> {
  state: ImageViewerComponentState = {
  scrollEnabled: true,
+ isZooming: false,
  };
  static defaultProps = {
  animationType: 'none',
@@ -22,6 +23,7 @@ class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewer
  title={info.item.title}
  onClose={this._closeInternal}
  toggleEnableScroll={this._handleToggleScrollState}
+ onZoomStateChange={this._onZoomStateChange}
  imageIndex={info.index}
  imagesTotal={this._getItemCount()}
  // extendable props
@@ -32,6 +34,7 @@ class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewer
  />
  );
 
+ private _onZoomStateChange = (isZooming: boolean) => this.setState({isZooming});
  private _handleToggleScrollState = (enabled: boolean) => {
  this.setState({scrollEnabled: enabled});
  };
@@ -72,7 +75,7 @@ class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewer
  getItemCount={this._getItemCount}
  getItem={this._getItem}
  getItemLayout={this._getItemLayout}
- scrollEnabled
+ scrollEnabled={!this.state.isZooming}
  ref={this._scrollRef}
  removeClippedSubviews={true}
  maxToRenderPerBatch={2}

demo/components/ImageViewer/types.ts

@@ -12,6 +12,7 @@ export interface ImageComponentProps extends ImageComponentOptionalProps {
  title?: string;
  onClose: () => void;
  toggleEnableScroll: (enabled: boolean) => void;
+ onZoomStateChange: (isZooming: boolean) => void;
 
  imageIndex: number;
  imagesTotal: number;
@@ -31,6 +32,7 @@ export interface ImageComponentState {
  width: number | null;
  height: number | null;
  loading: boolean;
+ isZooming: boolean;
 }
 
 // index.tsx
@@ -45,4 +47,5 @@ export interface ImageViewerComponentProps {
 }
 export interface ImageViewerComponentState {
  scrollEnabled: boolean;
+ isZooming: boolean;
 }