Update demo

Author: luutruong

demo/App.tsx

@@ -12,89 +12,87 @@ import {
   SafeAreaView,
   StatusBar,
   StyleSheet,
-  Text,
   useColorScheme,
   View,
   TouchableOpacity,
+  Image,
+  Dimensions,
+  ScrollView,
 } from 'react-native';
 
 import {Colors} from 'react-native/Libraries/NewAppScreen';
 import axios from 'axios';
 import ImageViewer from './components/ImageViewer';
 
+const WIDTH = Dimensions.get('window').width;
+
 const App: () => Node = () => {
   const isDarkMode = useColorScheme() === 'dark';
-  const imageViewerRef = React.createRef();
+  const [images, setImages] = React.useState([]);
+  const [visible, setVisible] = React.useState(false);
+  const [showIndex, setShowIndex] = React.useState(0);
 
   const backgroundStyle = {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
     flex: 1,
   };
 
-  function showImageViewer() {
+  React.useEffect(() => {
     axios
       .get('https://picsum.photos/v2/list?limit=20')
       .then((res: any) => res.data)
       .then((res: any) => {
-        const images = res.map((item: any) => ({
-          // width: item.width,
-          // height: item.height,
-          // url: item.download_url,
+        const imagesMap = res.map((item: any) => ({
           title: item.author,
           source: {
             uri: item.download_url,
             headers: {
               'X-Test': 'foo',
             },
-            // width: item.width,
-            // height: item.height,
+            width: item.width,
+            height: item.height,
           },
         }));
-
-        imageViewerRef.current.show(
-          images,
-          Math.floor(Math.random() * images.length - 1),
-        );
+        setImages(imagesMap);
       });
+  }, []);
+
+  function onImagePress(index: number) {
+    setShowIndex(index);
+    setVisible(true);
   }
 
   return (
     <SafeAreaView style={backgroundStyle}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <View style={styles.container}>
-        <TouchableOpacity
-          onPress={() => showImageViewer()}
-          hitSlop={{top: 20, left: 20, right: 20, bottom: 20}}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>Show</Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-      <ImageViewer ref={imageViewerRef} debug />
+      <ScrollView>
+        {images.map((image, index) => (
+          <TouchableOpacity
+            activeOpacity={0.8}
+            key={index}
+            onPress={() => onImagePress(index)}>
+            <View>
+              <Image source={image.source} style={styles.image} />
+            </View>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+      <ImageViewer
+        images={images}
+        initialIndex={showIndex}
+        visible={visible}
+        onClose={() => setVisible(false)}
+        animationType="slide"
+        debug
+      />
     </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: Colors.lighter,
-  },
-  button: {
-    paddingHorizontal: 50,
-    paddingVertical: 15,
-    borderWidth: 1,
-    borderColor: '#2985c6',
-    borderRadius: 10,
-    backgroundColor: '#2577b1',
-  },
-  buttonText: {
-    fontSize: 15,
-    textTransform: 'uppercase',
-    fontWeight: '600',
-    color: '#fff',
+  image: {
+    width: WIDTH,
+    height: 360,
   },
 });
 

demo/components/ImageViewer/Image.tsx

@@ -19,7 +19,6 @@ import {
   PinchGestureHandler,
   State,
   GestureEvent,
-  TouchableWithoutFeedback,
 } from 'react-native-gesture-handler';
 import {ImageComponentOptionalProps, ImageComponentProps, ImageComponentState} from './types';
 
@@ -63,7 +62,11 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
 
     this._panResponder = PanResponder.create({
       onStartShouldSetPanResponder: onShouldSetPanResponder,
-      onMoveShouldSetPanResponder: onShouldSetPanResponder,
+      onStartShouldSetPanResponderCapture: () => true,
+
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+
       onPanResponderTerminate: onPanEnd,
       onPanResponderRelease: onPanEnd,
       onPanResponderMove: onPanMove,
@@ -100,7 +103,7 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
     if (Math.abs(gesture.dx) > Math.abs(gesture.dy)) {
       this.props.toggleEnableScroll(true);
 
-      return;
+      return false;
     }
 
     this.props.toggleEnableScroll(false);
@@ -315,7 +318,11 @@ class Image extends React.Component<ImageComponentProps, ImageComponentState> {
 
     return (
       <Animated.View style={headerAnim}>
-        <Text style={{color: '#fff'}}>{`${this.props.imageIndex + 1}/${this.props.imageTotal}`}</Text>
+        {this.props.imagesTotal > 1 && (
+          <View style={styles.headerCount}>
+            <Text style={styles.defaultText}>{`${this.props.imageIndex + 1}/${this.props.imagesTotal}`}</Text>
+          </View>
+        )}
       </Animated.View>
     );
   };
@@ -463,6 +470,11 @@ const styles = StyleSheet.create({
   defaultText: {
     color: '#fff',
   },
+  headerCount: {
+    backgroundColor: '#131313',
+    padding: 10,
+    borderRadius: 10,
+  },
 });
 
 export default Image;

demo/components/ImageViewer/index.tsx

@@ -1,32 +1,29 @@
 import React from 'react';
-import {Modal, Dimensions, VirtualizedList} from 'react-native';
+import {Modal, Dimensions, VirtualizedList, View} from 'react-native';
 import Image from './Image';
 import {ImageViewerImageProps, ImageViewerComponentProps, ImageViewerComponentState, SwipeDirection} from './types';
 
 const SCREEN_WIDTH = Dimensions.get('window').width;
 
 class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewerComponentState> {
   state: ImageViewerComponentState = {
-    visible: false,
-    images: [],
     scrollEnabled: true,
-    startIndex: 0,
   };
-  private _scrollRef: {current: VirtualizedList<any> | null} = React.createRef();
+  static defaultProps = {
+    animationType: 'none',
+  };
 
-  public show(images: ImageViewerImageProps[], startIndex: number = 0) {
-    this.setState({images, visible: true, startIndex});
-  }
+  private _scrollRef: {current: any} = React.createRef();
 
-  private _closeInternal = () => this.setState({visible: false});
+  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={(enabled: boolean) => this.setState({scrollEnabled: enabled})}
+      toggleEnableScroll={this._handleToggleScrollState}
       imageIndex={info.index}
-      imageTotal={this._getItemCount()}
+      imagesTotal={this._getItemCount()}
       // extendable props
       debug={this.props.debug}
       initialWidth={this.props.imageProps?.initialWidth}
@@ -35,36 +32,42 @@ class ImageViewer extends React.Component<ImageViewerComponentProps, ImageViewer
     />
   );
 
-  private _getItemCount = () => this.state.images.length;
+  private _handleToggleScrollState = (enabled: boolean) => {
+    this.setState({scrollEnabled: enabled});
+  };
+
+  private _getItemCount = () => this.props.images.length;
   private _getItem = (data: any, index: number) => data[index];
   private _getItemLayout = (_data: any, index: number) => ({
     length: SCREEN_WIDTH,
     offset: SCREEN_WIDTH * index,
     index,
   });
 
-  private _keyExtractor = (item: ImageViewerImageProps, index: number) => `${index}`;
+  private _keyExtractor = (_item: ImageViewerImageProps, index: number) => `${index}`;
 
   render() {
     return (
-      <Modal visible={this.state.visible} transparent animationType="none" onRequestClose={this._closeInternal}>
+      <Modal visible={this.props.visible} transparent animationType={this.props.animationType} onRequestClose={this._closeInternal}>
         <VirtualizedList
           horizontal
           showsHorizontalScrollIndicator={false}
           windowSize={2}
-          data={this.state.images}
+          data={this.props.images}
           renderItem={this._renderImage}
           keyExtractor={this._keyExtractor}
           getItemCount={this._getItemCount}
           getItem={this._getItem}
           getItemLayout={this._getItemLayout}
-          scrollEnabled={this.state.scrollEnabled}
+          scrollEnabled
           ref={this._scrollRef}
           removeClippedSubviews={true}
           maxToRenderPerBatch={2}
           initialNumToRender={2}
           pagingEnabled
-          initialScrollIndex={this.state.startIndex}
+          initialScrollIndex={this.props.initialIndex !== undefined ? this.props.initialIndex : 0}
+          listKey={'RNImageViewer'}
+          disableScrollViewPanResponder={!this.state.scrollEnabled}
         />
       </Modal>
     );

demo/components/ImageViewer/types.ts

@@ -14,7 +14,7 @@ export interface ImageComponentProps extends ImageComponentOptionalProps {
   toggleEnableScroll: (enabled: boolean) => void;
 
   imageIndex: number;
-  imageTotal: number;
+  imagesTotal: number;
 }
 export interface ImageComponentOptionalProps {
   // optional
@@ -37,10 +37,12 @@ export interface ImageComponentState {
 export interface ImageViewerComponentProps {
   debug?: boolean;
   imageProps?: ImageComponentOptionalProps;
+  animationType?: 'slide' | 'fade' | 'none';
+  images: ImageViewerImageProps[];
+  visible: boolean;
+  initialIndex?: number;
+  onClose: () => void;
 }
 export interface ImageViewerComponentState {
-  visible: boolean;
-  images: ImageViewerImageProps[];
   scrollEnabled: boolean;
-  startIndex: number;
 }