Tiny Image Viewer Modal For React Native – image-viewing

Author:jobtoday
Views Total:16 views
Official Page:Go to website
Publish Date:September 7, 2020
License:MIT

image-viewing is a tiny React Native component to view images in a cross-platform modal component.

Features:

  • Pinch zoom for both iOS and Android
  • Double tap to zoom for both iOS and Android
  • Supports swipe-to-close animation
  • Custom header and footer components
  • Uses VirtualizedList to optimize image loading and rendering

Install & Import:

# Yarn
$ yarn add react-native-image-viewing

# NPM
$ npm i react-native-image-viewing --save
import ImageView from "react-native-image-viewing";

Add images to the image viewer:

const images = [
      {
        uri: "1.jpg",
      },
      {
        uri: "2.jpg",
      },
      {
        uri: "3.jpg",
      },
];
const [visible, setIsVisible] = useState(false);
<ImageView
  images={images}
  imageIndex={0}
  visible={visible}
  onRequestClose={() => setIsVisible(false)}
/>;

Default Props.

images: ImageSource[];
imageIndex: number;
visible: boolean;
onRequestClose: () => void;
onLongPress?: (image: ImageSource) => void;
onImageIndexChange?: (imageIndex: number) => void;
presentationStyle?: ModalProps["presentationStyle"];
animationType?: ModalProps["animationType"];
backgroundColor?: string;
swipeToCloseEnabled?: boolean;
doubleTapToZoomEnabled?: boolean;
delayLongPress?: number;
HeaderComponent?: ComponentType<{ imageIndex: number }>;
FooterComponent?: ComponentType<{ imageIndex: number }>;

Preview:

Tiny Image Viewer Modal For React Native - image-viewing

You Might Be Interested In:

Leave a Reply