❀Needs Puma Managers

    @likashefqet/react-native-image-zoom
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.1Β β€’Β PublicΒ β€’Β Published

    React Native Image Zoom

    Reanimated npm npm

    A performant zoomable image written in Reanimated v2 πŸš€

    React Native Image Zoom

    Photo by Walling on Unsplash


    Features

    • Zoom (pinch and/or pan) the image using gestures.
    • Reset zoom and snap back to initial position on gesture end.
    • Smooth gesture interactions & snapping animations.
    • Loading state while image is loading.
    • Customize the default loader.
    • Provide custom loader to override/remove the default one.
    • Configure maximum zoom value.
    • Compatible with Reanimated v2.
    • Written in TypeScript.

    Getting Started

    npm install @likashefqet/react-native-image-zoom or yarn add @likashefqet/react-native-image-zoom

    This library been written in React Native Reanimated v2, make sure to follow installation instructions if you haven't installed Reanimated yet.

    This library uses React Native Gesture Handler, make sure to follow installation instructions if you haven't installed Gesture Handler yet.

    Usage

    import { ImageZoom } from '@likashefqet/react-native-image-zoom';

    Basics:

    <ImageZoom uri={imageUri} />

    Properties

    All React Native Image Props &

    Property Type Default Description
    uri String '' (empty string) Image uri. Can be overridden by source prop.
    minScale Number 1 The minimum allowed zoom scale.
    maxScale Number 5 The maximum allowed zoom scale.
    containerStyle Object {} Style object to be applied to the container.
    imageContainerStyle Object {} Style object to be applied to the image container.
    activityIndicatorProps Object {} Activity Indicator Props to customize the default loader.
    renderLoader Function undefined Function that renders a custom loading component. Render null to disable loader.

    Changelog

    Read the changelog.

    Author


    Shefqet Lika

    πŸ’»

    Support

    If you are looking for a private support or help in customizing the experience, then reach out to me by email @likashefi.

    License

    MIT


    Install

    npm i @likashefqet/react-native-image-zoom

    DownloadsWeekly Downloads

    405

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    27.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • likashefqet