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

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

    1.0.1 • 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
    • 🔥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
    animationType Animation modal presented with: default fade none, fade, slide 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 (Android only): 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
    • ImageSource is an object like { uri: '<http location || file path>' }

    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 iru-react-native-image-viewing

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    50.5 kB

    Total Files

    37

    Last publish

    Collaborators

    • avatar