Code Monkey home page Code Monkey logo

react-native-image-viewing's Introduction

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)}
/>

Props

Prop name Description Type Required
images Array of images to display ImageSource[] true
keyExtractor Uniqely identifying each image (imageSrc: ImageSource, index: number) => string false
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

react-native-image-viewing's People

Contributors

antonkalinin avatar dependabot[bot] avatar globchastyy avatar inspmoore avatar jzyds avatar maksimko avatar nojimage avatar rajeshde avatar youniaogu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-image-viewing's Issues

No Landscape Orientation support

My ios app only works in landscape mode. I get the error:

console.error: "Modal was presented with 0x2 orientations mask but the application only supports 0x18.Add more interface orientations to your app's Info.plist to fix this.Note: This will crash in non-dev mode."

Simulator Screen Shot - iPad Pro (11-inch) - 2020-05-21 at 23 19 34

Android pinch to zoom not working

If you have swipe to dismiss enabled with pinch to zoom, they interfere with each other and creates a weird experience. Can't really zoom and very janky. I am using a pixel 2. Then you have that issue with image zoomed to max after zooming once and only gets cleared after swiping to other images a few times.

Android Modal Problem

Hi,

I just tried react-native-image-viewing. It work very well. Also performance is awesome. But I have problem for android. IOS doesn't have that problem. It work well. Problem is that Modal doesn't bring to front.Like below screenshot:

Android

How can I solve?

Close button on modal disappears when zooming

The modal close button disappears when zooming, and I can't seem to dismiss the modal unless I reset the zoom to the original size.

Is there a way to keep the X button always visible while zooming?

Ability to set maximumZoomScale and minimumZoomScale

It would be nice if we could send both as prop, such as:

<ImageView
    imageIndex={0}
    minimumZoomScale={0.5}
    maximumZoomScale={4}
    images={imagesList}
    visible={isVisible}
    onRequestClose={close}
/>

maximumZoomScale could default to 2 and minimumZoomScale to 1.

Demo Expo not working

Hello, I finally found the solution for Carousel with pinchable gesture.

I can’t wait to test it but first I would like to try the demo on Expo. It doesn’t seem to work

618B16AD-BEC9-48D0-A29D-1B05CCBA072F

custom icon

I there a way we can custom the icon and font size ?

Breaks in RTL

First of all. Thank you for the nice viewer.

In RTL the image is cut off. And not showing completely.
Is there any workaround or fix for this.

Thank you.

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Issue Video

error

Findings :

The onRequestClose handler associated with the device's back button press is not aborting after the component gets unmounted and navigated to a new page

error2

supportedOrientations

Can we have supportedOrientations for both 'portrait' and 'landscape'?

I ran some tests with supportedOrientations={['portrait', 'landscape']} on the Modal component but I couldn't manage to make the component to rerender after the the orientation was changed.

Thank you.

Distorting when sliding and zooming at the same time

Description

When I zooming the image and sliding it by mistake the component distorting!
Can you add props like disableZoomAndPanch until you fix this problem?

Example

ezgif-3-0cc994a2e86b

Versions

"expo": "~37.0.3"
"react-native": "~0.61.5"
"react-native-image-viewing": "^0.2.0"

Images with authorization header is not working on iOS

I want to display a list of authorized images with bearer token.
The component works perfectly on Android but it keeps showing loading indicator with black background on iOS. Btw, local images work well.
Anyone faces the same issue? Please help me. Thank you.
Simulator Screen Shot - iPhone 11 - 2020-10-23 at 14 17 33

Issue: onRequestClose not being called in iOS

I'm using animationType={"slide"} and presentationStyle={"pageSheet"} combined, when these 2 are enabled, the onRequestClose function is not called, making it impossible to open the slider view again from the same screen.

Bundling failed - `main` module field that could not be resolved

Latest release caused this in bundler. Reverting to 0.1.3 fixed the issue immediately.
While trying to resolve module react-native-image-viewing from file /Users/.../src/screens/image-list/ImageDetailsPickerScreen.tsx, the package /Users/.../node_modules/react-native-image-viewing/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/.../node_modules/react-native-image-viewing/dist/index.js. Indeed, none of these files exist:

How to determine current page?

I need to know which image is currently showing on the screen.

Is that possible if I just let the user scroll?

As far as I can tell I need to manually update the currentIndex value, but I have no way of knowing when or where the user has scrolled to.

Support array of base64

Feature request

It would be nice if we could pass an array of base64's straight into the 'images' prop.

Anything I could do to help?

Expose the cache prop of Image

Hi, would it be possible for the library to expose the cache prop of Image, so it's configurable?
Being able to set it to 'force-cache' when loading large images will be very helpful.
Thank you!

Doubt - iOS Format

Hello guys, I am trying to use that dependency in my project but images .webp on iOS doens't work.
So I tried to figure out and unfortunately the function:
Image.getSizeWithHeaders(source.uri, source.headers, (width, height) => { imageDimensionsCache.set(cacheKey, { width, height }); resolve({ width, height }); }, () => { resolve({ width: 0, height: 0 }); }); }

on dist/hooks/useImageDimensions.js:38 return
undefined/null or even 0;

I don’t know how can I help and if only happens on my project.
Can someone give me an idea ?

Note: I really need zoom in and out on .webp images.

Android: modal is not covering all the screen

Hey guys! I'm facing an issue on Android where the modal with the image is not covering all the screen and it's only showing a small part of the image. On iOS is working very well 👍

react: 16.8.3
react-native: 0.61.5
react-native-image-viewing: 0.1.3

Another useful information is that I'm using Expo SDK v35.0.0.

Can you please tell me what can I do to fix this?

Thank you!

Is there a way to disable pinch-to-zoom?

I am trying to disable pinch-to-zoom and only use double tap to zoom functionality. Is it possible to do? I tried editing library files but had no luck.

Thanks for great library btw.

Custom Image Component

Is it possible that in the future there would be a feature for supporting custom image component?

Swipe-to-close Issue

swipeToCloseEnabled | Close modal with swipe up or down: default true

Swipe up is working fine, but it's not with swipe down

v0.2.0
RN: v0.62.2

Text strings must be rendered within a <Text> component

This error is located at:
in RCTView (at View.js:34)
in View (at SafeAreaView.js:41)
in ForwardRef(SafeAreaView) (at App.js:35)
in App (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
[Tue Aug 11 2020 21:27:52.462] ERROR Error: Text strings must be rendered within a component.

Access to startSwipe/endSwipe or isSwiping

Is it possible to get access to something around swiping, for example a method called when starting or ending the swipe, or even just a prop like isSwiping?

I have added this component into a scrollview, and am getting weird behaviour between swiping photos, when you swipe at a slightly wrong angle, you suddenly also can do a pull to refresh. So my idea was to disable to refresh control while the images are being swiped, and so any function that gets called telling me the images are being swiped will help to solve this issue

Black image iOS14

Hi all,

We were using this module on iOS 13 devices and now, after updating to iOS 14, we noticed that the images show in black.
Any clue why this might be happening?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.