Wondering what’s next for npm?Check out our public roadmap! »

    react-native-image-viewing
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    react-native-image-viewing

    React Native modal component for viewing images as a sliding gallery.

    npm version styled with prettier

    • 🔥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

    Try with Expo: https://expo.io/@antonkalinin/react-native-image-viewing

    Installation

    yarn add react-native-image-viewing

    or

    npm install --save react-native-image-viewing

    Usage

    import ImageView from "react-native-image-viewing";
     
    const images = [
      {
        uri: "https://images.unsplash.com/photo-1571501679680-de32f1e7aad4",
      },
      {
        uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34",
      },
      {
        uri: "https://images.unsplash.com/photo-1569569970363-df7b6160d111",
      },
    ];
     
    const [visible, setIsVisible] = useState(false);
     
    <ImageView
      images={images}
      imageIndex={0}
      visible={visible}
      onRequestClose={() => setIsVisible(false)}
    />;

    See Example

    Props

    Prop name Description Type Required
    images Array of images to display ImageSource[] true
    imageIndex Current index of image to display number true
    visible Is modal shown or not boolean true
    onRequestClose Function called to close the modal function true
    onImageIndexChange Function called when image index has been changed function false
    onLongPress Function called when image long pressed function (event: GestureResponderEvent, image: ImageSource) false
    delayLongPress Delay in ms, before onLongPress is called: default 800 number false
    animationType Animation modal presented with: default fade none, fade, slide false
    presentationStyle Modal presentation style: default: fullScreen Android: Use overFullScreen to hide StatusBar fullScreen, pageSheet, formSheet, overFullScreen false
    backgroundColor Background color of the modal in HEX (#000000EE) string false
    swipeToCloseEnabled Close modal with swipe up or down: default true boolean false
    doubleTapToZoomEnabled Zoom image by double tap on it: default true boolean false
    HeaderComponent Header component, gets current imageIndex as a prop component, function false
    FooterComponent Footer component, gets current imageIndex as a prop component, function false
    • type ImageSource = ImageURISource | ImageRequireSource

    Contributing

    To start contributing clone this repo and then run inside react-native-image-viewing folder:

    yarn

    Then go inside example folder and run:

    yarn & yarn start

    This will start packager for expo so you can change /src/ImageViewing and see changes in expo example app.

    License

    MIT

    Install

    npm i react-native-image-viewing

    DownloadsWeekly Downloads

    4,879

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    72.1 kB

    Total Files

    52

    Last publish

    Collaborators

    • avatar