jobtoday / react-native-image-viewing Goto Github PK
View Code? Open in Web Editor NEWTiny, purely TS, modal component for viewing images 🏙
Home Page: https://exp.host/@antonkalinin/react-native-image-viewing
License: MIT License
Tiny, purely TS, modal component for viewing images 🏙
Home Page: https://exp.host/@antonkalinin/react-native-image-viewing
License: MIT License
The images in the slideshow appears to be darker.
When using the require tag to load images, image viewer breaks
Sometimes the Index of the currently viewed image is deprecated.
I want custom 2 button next and prev image in lib. How to custom?
I tried setState imageIndex, but i have problem image hide and show immediately
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
If the imageIndex
changed when being visible, the component will flicker.
It looks like it's caused by the key change by this line.
I am wondering why the key is needed.
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.
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.
When i add the header component it hides the close button
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?
It would be nice if we could pass an array of base64's straight into the 'images' prop.
Anything I could do to help?
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.
I there a way we can custom the icon and font size ?
Not able to Add testID
for <ImageView>
Is there a way to test, if this Screen is opened or not and also with the correct image uri?
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
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
.
As stated in title, when used inside of StackNavigator and Modal is opened for the first time, react-navigation BackHandler is not working anymore.
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!
The duplicated key warning will show when uri duplicated
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
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
Pinch to zoom feature is not working for me, tested on Android.
Hi i like your Image viewer!
but i just recognized an Issue:
When i open the Viewer and zoom in and out an Image, go back and forth in the gallery and come back to the previously zoomed in image its zoomed to the max without any gestures.
Found this issue on Android OnePlus 6T
Need the image name for display
First problem is when you add ImageView component, it will prevent back button as shown on this video below
https://share.icloud.com/photos/0R3_N2HJN2wXlqc9v2itD2rQg
Second probelm is presentationStyle="overFullScreen" only fill parent as shown on this video below
https://share.icloud.com/photos/0Eim16y5lpvDFJXDaeQHyVxpA
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.
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.
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?
I need an image viewer that is capable of displaying videos and images, but can't manage to do it here.
thanks for your support
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.
images shows incorrectly in landscape mode
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:
Please tell me when to add the zoom function on Android. Can you add function long press picture double click restore picture scale double click enlarge picture scale
In the FooterComponent, I have TouchOpacity component and i can not onPress in TouchOpacity
Thanks for great library.
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.
When making a request to download an image that requires authentication, it would be nice to be able to provide additional authentication headers so the request can be successfully processed..
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!
Is it possible that in the future there would be a feature for supporting custom image component?
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.
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.