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;
 }