antonkalinin / react-native-image-view Goto Github PK

Hi,

Thanks for this great module !
I have this error : Exception thrown while executing UI block: -[NSNull floatValue]: unrecognized selector sent to instance 0x112adefc0, when the image height is superior to the width.
Could you please help me ?

Regards,

Lou

Is there any plan to support looping in the future? Adding a flag with that would be awesome.

Привет!

I have 12 images in the object, and when i swipe image down or up, sometimes i get that message:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.
Object {
"contentLength": 4937.14306640625,
"dt": 1646,
"prevDt": 1249,
}

Since version 2.0.6, the types have been moved to types.js, but this file is not published to npm (it's missing in files in the package.json).

In any case, I think publishing the flow syntax import { type ... } from ... might be problematic for apps that are built with e.g. typescript.

When I load images after rendering I get "Cannot read property 'scale' of undefined".

Can the image viewer be called without modal? I would like to use it as a slideshow inside a view.

Is there a way to run a function every time the image is changed? It should receive the index of the new image.

Hey hi,

     Can you provide us Infinite looping of images while we slide through the image slider. Right now when we move to the last image the right arrow hide and again we have to come to my first image by clicking on left arrow vice versa.

First of all, Thanks for the great work! - Really appreciate it!
I have an issue with zooming image

Issue

If the width is bigger than the height, it's working fine.
But if the width is smaller than the height, zooming does not work properly.

Expected Behavior

Zoomed image should locate in the centher of the screen.

Actual Behavior

Zoomed image is automattically going upper side.

###ScreenShot

Is it possible to be able to change the background color of the modal from black to white?
I'm working with png drawings that have transparent backgrounds and only black lines and therefor "disappears" in the black modal.

Getting your node_modules folder when installing with npm.

i fixed your onGestureMove

i added const justPressed = Math.abs(dy) < PRESS_TOLLERANCE; justPressed ? null : this.imageTranslateValue.y.setValue(y + dy)

`onGestureMove(event: NativeEventType, gestureState: GestureState) {
if (this.isScrolling && this.state.scrollEnabled) {
return;
}

    if (this.currentTouchesNum === 1 && event.touches.length === 2) {
        this.initialTouches = event.touches;
    }

    const {
        images,
        imageIndex,
        imageScale,
        imageTranslate,
        screenDimensions,
    } = this.state;
    const {screenHeight} = screenDimensions;
    const {touches} = event;
    const {x, y} = imageTranslate;
    const {dx, dy} = gestureState;
    const imageInitialScale = this.getInitialScale();
    const {height} = images[imageIndex];

    if (imageScale !== imageInitialScale) {
        this.imageTranslateValue.x.setValue(x + dx);
    }

    // Do not allow to move image vertically until it fits to the screen
    if (imageScale * height > screenHeight) {
        this.imageTranslateValue.y.setValue(y + dy);
    }

    // if image not scaled and fits to the screen
    if (
        scalesAreEqual(imageScale, imageInitialScale) &&
        height * imageInitialScale < screenHeight
    ) {
        const backgroundOpacity = Math.abs(
            dy * BACKGROUND_OPACITY_MULTIPLIER
        );

        const justPressed = Math.abs(dy) < PRESS_TOLLERANCE;
        justPressed ? null : this.imageTranslateValue.y.setValue(y + dy)
        this.modalBackgroundOpacity.setValue(
            backgroundOpacity > 1 ? 1 : backgroundOpacity
        );
    }

    const currentDistance = getDistance(touches);
    const initialDistance = getDistance(this.initialTouches);
    const scrollEnabled = Math.abs(dy) < FREEZE_SCROLL_DISTANCE;
    this.setState({scrollEnabled});
    

    if (!initialDistance) {
        return;
    }

    if (touches.length < 2) {
        return;
    }

    let nextScale = getScale(currentDistance, initialDistance) * imageScale;

    if (nextScale < imageInitialScale) {
        nextScale = imageInitialScale;
    } else if (nextScale > SCALE_MAXIMUM) {
        nextScale = SCALE_MAXIMUM;
    }

    this.imageScaleValue.setValue(nextScale);
    this.currentTouchesNum = event.touches.length;
}`

would be nice if you can check it and add it too...

Hello, I was able to set the modal background color to white but I wanted to be able to set it to be opaque too. Is that possible? I was checking for opacity options but didn't find any.

Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.

Please update the following components: ImageView

Learn more about this warning here:
https://fb.me/react-async-component-lifecycle-hooks

help

thanks for this package, really great works 👍

I just wondering if this package support carousel, I mean when I press in image, the modal will pop up and when I drag the image left or right, that image will change to another image. Is that possible
?

for android can't zoom out

My environment:
-iPhone 8
-react-native-cli: 2.0.1
-react-native: 0.52.0
-react-native-image-view: 2.0.10

When I slide down or up at an angle it sometimes freezes the modal. I think it get's confused as if you are trying to close out of the modal or if you are trying to swipe to the next image. It freezes until you hit the 'X' in the upper right-hand corner. I replicated the issue once on the android expo example online, but it took a while to replicate.

My Usage:
<ImageView
images={this.state.images}
imageIndex={this.state.idx}
isVisible={this.state.visible}
animationType='slide'
onClose={()=>this.imageView()}
renderFooter={(currentImage) => (My footer)}
/>

Changing the orientation of the phone causes the image to rotate but there's a never hidding ActivityIndicator on top of it, in the center of the screen.

After clossing the view by pressing the close button any other onPress event will open the view again. If closed using the back button it won't happen.

Tested in android

Fixed by using:
onClose={() => this.setState({isImageViewVisible: false})}

Hey Hi,
Please give me a solution for my above screenshot, I would like to disable the drag up or drag down to close the image view functionality. I want to close the image viewer by clicking the close button hence i dont want this drab up & down functionality. Is there any Props to disable this feature or we can change any line in the ImageView.js

When the modal become visible, but the image is not shown yet, it is better to show an activity indicator.

This is an awesome library BTW :)

Hi there,

Good day. It seems press on backpress button android not closing the ImageView.
I am proposing to add this feature.

Thanks and regards,
Fuji

PLS add supportedOrientations to Modal to support Orientation Changes.

When I move the vertical image up and down, it shows the error "Error while updating property 'transform' of a view managed by: RCTImageView".
"null"
"translateY"

But if it's a horizontal image, it is fine.

Hey, thanks for this library, looks very promising!

Would be awesome if you can add double tap to zoom.

It seems in the code that there is support for double tap, but I couldn't get it to work [android], even with the example app

Hello,

Test case:

1. Open example app https://exp.host/@community/image-gallery-example
2. Tap the top image (first in vertical list)
3. Swipe right very slowly to see a part of next image
4. Before releasing hold your finger to make make sure there is no velocity
5. Release you finger and observe that right image part still visible
   
6. Double tap the left image to enter scaled mode
   
7. Drag image with one finger gesture

Observed:
Image is being dragged only on release, while actual drag it does not move.

Expected:
Image is being dragged normally during dragging.

Additional notes:
Seems this is normal behaviour for react-native FlatList with horizontal orientation and pagingEnabled to not glide when released with zero velocity (I checked this). But from the first testing of your component I noticed that allowing image to stay overlapped on release worsen UX + it prevents normal dragging.

I can provide a pull request to address the overlapping issue if you want.
Thanks for the good component!

Right now I can see image view using http link, But I need to pass android Image URI. For example it show image view when the user selects image from Gallery. Is this working right now ?

"react-native": "^0.49.3",
"react": "^16.0.0-beta.5",

Hi,

I'd like to know if anyone possibly integrated this module with https://github.com/kfiroo/react-native-cached-image?

Can only scroll if I touch the area around the image. This is a problem specially for vertical images

Loading spinner was working fine in the previous release 2.1.6 but broken in 2.1.7 for some reason.

Hi,

Thanks for your library, it is good library to use for show image in gallery, I have some suggestions, can you update it.

1. If I am not in debug mode it show this error.
   

2. I can not tap to hide Panels (Header & Footers), I see the togglePanels in your code to know it has hide panels option.

3. It is better if you implement double Tabs to zoom in/out one level.

Hope you like that updates.

Is there any way to close ImageView when press on backdrop. Please, add this function

After upgrading to the latest version I'm getting the following error:

When I run it in debugger mode, It works perfectly.

When I run in a release version, it just closes right away.

I'm using these react versions:
"react": "^16.3.1",
"react-native": "^0.55.4",

I'm developing on Android.

I think it looks nice to support longpress and double tap feature.

Hi,

Is there any options to enable Next and Previous buttons on zoom image?

I have 4 images and i can able to view previous next and images using swipe option. But i required to place buttons for view previous and next images.

If this options is already there please tell me how can i enable it.

Thanks,
Jayakumar

Here's my render function:

render(){
    return(
      <View style={{flex: 1, backgroundColor: '#f2f2f2'}}>
	<View style={bar.container}>
	  <Text style={{color: '#808080', fontSize: 24}} > Meus Depoimentos </Text>
         </View>
        <ImageView
          images={this.state.galleryPhotos}
          imageIndex={0}
          animationType="fade"
          isVisible={this.state.galleryOpen}
          onClose={() => this.setState({ galleryOpen: false })}/>
    </View>);

And my function that pack images in objects to set in this.state after :

packImages(photos){
    let result = photos.map(p => {
      return { source: { uri: p }} });
    return result;
  }

I would like to display the complete images when I click on them
Please, how can we do it
please

Hey hi,
Is there any functionality to disable "CLOSE ICON" moves to top & disappear when we click/press over the image. Again it drop-down when we click/press the image again. Can you provide us a solution, By default the "CLOSE ICON" should be fixed even we click over the image.

During normal use after opening a few images I'm getting this error:

Possible Unhandled Promise Rejection (id: 0):
Error: Pool hard cap violation? Hard cap = 150994944 Used size = 150160000 Free size = 0 Request size = 1920000
Error: Pool hard cap violation? Hard cap = 150994944 Used size = 150160000 Free size = 0 Request size = 1920000

From that point on no other image is shown except for the ones I previously opened. Looks like it runs out of memory or something like that?

Issue when using iPhone X, how to adjust the close button?

How to render only selected 1 image with this. Not array ?

• I start my app in landscape mode
• the component containing the ImageView is mounted
• then I switch to portrait mode
• I open the ImageView

-> The overlay is displayed incorrectly
-> I think the ImageView stores the initial screen dimensions and doesn't recognize a later change of the dimensions due to a switch from portrait to landscape mode

v.2.0.4

In V1 we didn't need to specify a height and width of the image to show. In V2 it is specified but it doesn't work if don't specify one. I get the error:

Error while updating property 'transform' of a view managed by: 'RTCImageView'