antonkalinin / react-native-image-view Goto Github PK
View Code? Open in Web Editor NEWModal component to view images with zoom
Home Page: https://expo.io/@antonkalinin/react-native-image-view
License: MIT License
Modal component to view images with zoom
Home Page: https://expo.io/@antonkalinin/react-native-image-view
License: MIT License
When I load images after rendering I get "Cannot read property 'scale' of undefined".
I think it looks nice to support longpress and double tap feature.
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'
Loading spinner was working fine in the previous release 2.1.6 but broken in 2.1.7 for some reason.
Can the image viewer be called without modal? I would like to use it as a slideshow inside a view.
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.
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;
}
Is there any plan to support looping in the future? Adding a flag with that would be awesome.
Can only scroll if I touch the area around the image. This is a problem specially for vertical images
Getting your node_modules folder when installing with npm.
PLS add supportedOrientations to Modal to support Orientation Changes.
Hi,
Thanks for your library, it is good library to use for show image in gallery, I have some suggestions, can you update it.
I can not tap to hide Panels (Header & Footers), I see the togglePanels in your code to know it has hide panels option.
It is better if you implement double Tabs to zoom in/out one level.
Hope you like that updates.
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
for android can't zoom out
Is there a way to run a function every time the image is changed? It should receive the index of the new image.
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
Hi,
I'd like to know if anyone possibly integrated this module with https://github.com/kfiroo/react-native-cached-image?
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.
First of all, Thanks for the great work! - Really appreciate it!
I have an issue with zooming image
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.
Zoomed image should locate in the centher of the screen.
Zoomed image is automattically going upper side.
How to render only selected 1 image with this. Not array ?
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})}
Привет!
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,
}
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
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
Hello,
Test case:
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!
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
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)}
/>
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 :)
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...
-> 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
Is there any way to close ImageView when press on backdrop. Please, add this function
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?
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.
I would like to display the complete images when I click on them
Please, how can we do it
please
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.
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 ?
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
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
?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.