Added custom loader, item component, hide on tab header/footer and al…

package.json

@@ -18,7 +18,8 @@
   ],
   "scripts": {
     "build": "tsc",
-    "postversion": "yarn build"
+    "postversion": "yarn build",
+    "watch": "tsc -p tsconfig-debug.json"
   },
   "peerDependencies": {
     "react": ">=16.11.0",

src/ImageViewing.tsx

@@ -15,6 +15,10 @@ import {
   VirtualizedList,
   ModalProps,
   Modal,
+  TouchableOpacity,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
 } from "react-native";
 
 import ImageItem from "./components/ImageItem/ImageItem";
@@ -25,6 +29,7 @@ import useAnimatedComponents from "./hooks/useAnimatedComponents";
 import useImageIndexChange from "./hooks/useImageIndexChange";
 import useRequestClose from "./hooks/useRequestClose";
 import { ImageSource } from "./@types";
+import { SWIPE_CLOSE_OFFSET } from "./components/ImageItem/ImageItem.android";
 
 type Props = {
   images: ImageSource[];
@@ -34,6 +39,7 @@ type Props = {
   onRequestClose: () => void;
   onLongPress?: (image: ImageSource) => void;
   onImageIndexChange?: (imageIndex: number) => void;
+  onPress?: (image: ImageSource) => void;
   presentationStyle?: ModalProps["presentationStyle"];
   animationType?: ModalProps["animationType"];
   backgroundColor?: string;
@@ -42,13 +48,23 @@ type Props = {
   delayLongPress?: number;
   HeaderComponent?: ComponentType<{ imageIndex: number }>;
   FooterComponent?: ComponentType<{ imageIndex: number }>;
+  LoaderComponent?: ComponentType;
+  ItemComponent?: ComponentType<{
+    onLoad?: () => void;
+    source: ImageSource;
+    style: any;
+  }>;
 };
 
 const DEFAULT_ANIMATION_TYPE = "fade";
 const DEFAULT_BG_COLOR = "#000";
 const DEFAULT_DELAY_LONG_PRESS = 800;
 const SCREEN = Dimensions.get("screen");
 const SCREEN_WIDTH = SCREEN.width;
+const OUTPUT_RANGE = Platform.select({
+  ios: [0.5, 1, 0.5],
+  android: [0.7, 1, 0.7],
+});
 
 function ImageViewing({
   images,
@@ -57,6 +73,7 @@ function ImageViewing({
   visible,
   onRequestClose,
   onLongPress = () => {},
+  onPress = () => {},
   onImageIndexChange,
   animationType = DEFAULT_ANIMATION_TYPE,
   backgroundColor = DEFAULT_BG_COLOR,
@@ -66,13 +83,26 @@ function ImageViewing({
   delayLongPress = DEFAULT_DELAY_LONG_PRESS,
   HeaderComponent,
   FooterComponent,
+  LoaderComponent,
+  ItemComponent,
 }: Props) {
   const imageList = useRef<VirtualizedList<ImageSource>>(null);
   const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
   const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN);
-  const [headerTransform, footerTransform, toggleBarsVisible] =
+  const [headerTransform, footerTransform, setBarsVisible, toggleBarsVisible] =
     useAnimatedComponents();
 
+  const scrollValueY = new Animated.Value(0);
+
+  const allOpacity = scrollValueY.interpolate({
+    inputRange: [-SWIPE_CLOSE_OFFSET, 0, SWIPE_CLOSE_OFFSET],
+    outputRange: OUTPUT_RANGE,
+  });
+
+  const onScrollOpacity = (offsetY: number) => {
+    scrollValueY.setValue(offsetY);
+  };
+
   useEffect(() => {
     if (onImageIndexChange) {
       onImageIndexChange(currentImageIndex);
@@ -83,11 +113,21 @@ function ImageViewing({
     (isScaled: boolean) => {
       // @ts-ignore
       imageList?.current?.setNativeProps({ scrollEnabled: !isScaled });
-      toggleBarsVisible(!isScaled);
+      setBarsVisible(!isScaled);
     },
     [imageList]
   );
 
+  const onPressHandler = (src: ImageSource) => {
+    onPress(src);
+    toggleBarsVisible();
+  };
+
+  const wrapStylesWithOpacity = [
+    styles.container,
+    { opacity: allOpacity, backgroundColor },
+  ];
+
   if (!visible) {
     return null;
   }
@@ -103,7 +143,7 @@ function ImageViewing({
       hardwareAccelerated
     >
       <StatusBarManager presentationStyle={presentationStyle} />
-      <View style={[styles.container, { opacity, backgroundColor }]}>
+      <Animated.View style={wrapStylesWithOpacity}>
         <Animated.View style={[styles.header, { transform: headerTransform }]}>
           {typeof HeaderComponent !== "undefined" ? (
             React.createElement(HeaderComponent, {
@@ -137,9 +177,13 @@ function ImageViewing({
               imageSrc={imageSrc}
               onRequestClose={onRequestCloseEnhanced}
               onLongPress={onLongPress}
+              onPress={onPressHandler}
               delayLongPress={delayLongPress}
               swipeToCloseEnabled={swipeToCloseEnabled}
               doubleTapToZoomEnabled={doubleTapToZoomEnabled}
+              LoaderComponent={LoaderComponent}
+              ItemComponent={ItemComponent}
+              onScroll={onScrollOpacity}
             />
           )}
           onMomentumScrollEnd={onScroll}
@@ -161,7 +205,7 @@ function ImageViewing({
             })}
           </Animated.View>
         )}
-      </View>
+      </Animated.View>
     </Modal>
   );
 }

src/components/ImageItem/ImageItem.android.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useCallback, useRef, useState } from "react";
+import React, { ComponentType, useCallback, useRef, useState } from "react";
 
 import {
   Animated,
@@ -25,7 +25,7 @@ import { getImageStyles, getImageTransform } from "../../utils";
 import { ImageSource } from "../../@types";
 import { ImageLoading } from "./ImageLoading";
 
-const SWIPE_CLOSE_OFFSET = 75;
+export const SWIPE_CLOSE_OFFSET = 75;
 const SWIPE_CLOSE_VELOCITY = 1.75;
 const SCREEN = Dimensions.get("window");
 const SCREEN_WIDTH = SCREEN.width;
@@ -36,19 +36,31 @@ type Props = {
   onRequestClose: () => void;
   onZoom: (isZoomed: boolean) => void;
   onLongPress: (image: ImageSource) => void;
+  onPress: (image: ImageSource) => void;
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  onScroll: (offsetY: number) => void;
+  LoaderComponent?: ComponentType;
+  ItemComponent?: ComponentType<{
+    onLoad?: () => void;
+    source: ImageSource;
+    style: any;
+  }>;
 };
 
 const ImageItem = ({
   imageSrc,
   onZoom,
   onRequestClose,
   onLongPress,
+  onPress,
+  onScroll,
   delayLongPress,
   swipeToCloseEnabled = true,
   doubleTapToZoomEnabled = true,
+  LoaderComponent,
+  ItemComponent,
 }: Props) => {
   const imageContainer = useRef<ScrollView & NativeMethodsMixin>(null);
   const imageDimensions = useImageDimensions(imageSrc);
@@ -73,13 +85,18 @@ const ImageItem = ({
     onLongPress(imageSrc);
   }, [imageSrc, onLongPress]);
 
+  const onPressHandler = useCallback(() => {
+    onPress(imageSrc);
+  }, [imageSrc, onLongPress]);
+
   const [panHandlers, scaleValue, translateValue] = usePanResponder({
     initialScale: scale || 1,
     initialTranslate: translate || { x: 0, y: 0 },
     onZoom: onZoomPerformed,
     doubleTapToZoomEnabled,
     onLongPress: onLongPressHandler,
     delayLongPress,
+    onPress: onPressHandler,
   });
 
   const imagesStyles = getImageStyles(
@@ -108,12 +125,13 @@ const ImageItem = ({
     }
   };
 
-  const onScroll = ({
+  const handleScroll = ({
     nativeEvent,
   }: NativeSyntheticEvent<NativeScrollEvent>) => {
     const offsetY = nativeEvent?.contentOffset?.y ?? 0;
 
     scrollValueY.setValue(offsetY);
+    onScroll(offsetY);
   };
 
   return (
@@ -127,17 +145,29 @@ const ImageItem = ({
       contentContainerStyle={styles.imageScrollContainer}
       scrollEnabled={swipeToCloseEnabled}
       {...(swipeToCloseEnabled && {
-        onScroll,
+        onScroll: handleScroll,
         onScrollEndDrag,
       })}
     >
-      <Animated.Image
-        {...panHandlers}
-        source={imageSrc}
-        style={imageStylesWithOpacity}
-        onLoad={onLoaded}
-      />
-      {(!isLoaded || !imageDimensions) && <ImageLoading />}
+      {ItemComponent ? (
+        React.createElement(ItemComponent, {
+          ...panHandlers,
+          source: imageSrc,
+          style: imageStylesWithOpacity,
+          onLoad: onLoaded,
+        })
+      ) : (
+        <Animated.Image
+          {...panHandlers}
+          source={imageSrc}
+          style={imageStylesWithOpacity}
+          onLoad={onLoaded}
+        />
+      )}
+
+      {(!isLoaded || !imageDimensions) && (
+        <ImageLoading LoaderComponent={LoaderComponent} />
+      )}
     </ScrollView>
   );
 };

src/components/ImageItem/ImageItem.d.ts

@@ -15,18 +15,32 @@ declare type Props = {
   onRequestClose: () => void;
   onZoom: (isZoomed: boolean) => void;
   onLongPress: (image: ImageSource) => void;
+  onPress: (image: ImageSource) => void;
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  onScroll: (offsetY: number) => void;
+  LoaderComponent?: ComponentType;
+  ItemComponent?: ComponentType<{
+    onLoad?: () => void;
+    source: ImageSource;
+    style: any;
+  }>;
 };
 
-declare const _default: React.MemoExoticComponent<({
-  imageSrc,
-  onZoom,
-  onRequestClose,
-  onLongPress,
-  delayLongPress,
-  swipeToCloseEnabled,
-}: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<
+  ({
+    imageSrc,
+    onZoom,
+    onRequestClose,
+    onLongPress,
+    onPress,
+    delayLongPress,
+    swipeToCloseEnabled,
+    onScroll,
+    LoaderComponent,
+    ItemComponent,
+  }: Props) => JSX.Element
+>;
 
 export default _default;