react-native-lightbox
react-native-lightbox copied to clipboard
oblador
Pinch to zoom
Very nice update using the animated library! It really is smoother and lighter!
Do you think it would be possible - just like facebook lightbox - to enable a pinch to zoom?
Have a great day
Hi, yeah it's on my todo. Thinking of maybe writing a carousel to go with it too. Just need some time to do it ;-)
I'm feeling the pressure haha. I've implemented this in the navigator-refactor branch.
See https://github.com/oblador/react-native-lightbox/issues/8#issuecomment-160352712 for more info.
Hi @oblador, I'm getting this to work fine on iOS but not on Android. When I click to zoom, it zooms in but doesn't pinch to zoom. It also scrolls but doesn't drag left to right to see details cut off from initial zoom. I'm using your navigator example and also cloned the navigator-refactor branch during npm install. Any help is appreciated. Thanks!
@kwokster10: I'm aware of that issue, that's because ScrollView on android doesn't support zooming. I'm not sure if I should implement zooming for android completely custom or just wait for support to land in React Native core.
Oh, interesting. Is there a workaround for this? Would using ViewPagerAndroid make a difference? Thanks!
@kwokster10: ViewPagerAndroid might help with paging the images but I don't think it'll help with zooming. Should be able to do zooming with scale transforms, but it wouldn't be as fluid as native zooming nor give you higher detail when zooming.
Hello, i couldn't get to work the version from the navigator refactor branch.. I get the following error:
Element type is invalid: expected a string but got:object. Check the render method of image.ios.js
The main branch works without problems for me. I'm on react-native 0.25.1
For those who can't get the navigator-refactor working for some reason but would like pinch-to-zoom,
Wrapping an image in a ScrollView and setting swipeToDismiss to false does the trick (assuming you prioritize zooming above swipeToDismiss)
<LightBox
key={i}
swipeToDismiss={false}
>
<ScrollView
minimumZoomScale={1}
maximumZoomScale={2}
centerContent={true}
>
<Image
style={styles.image}
source={{'uri' : source}}
>
</Image>
</ScrollView>
</LightBox>
I realize this is not ideal, but it's a quick and easy fix for a small feature
+1 mee too... On the navigator refactor branch I am getting the same error as @pvlvsk
@braco: Not actively currently but I will soon need this functionality for a project I'm working on, but with NavigationExperimental so consider the navigator branch dead. Hopefully I'll be able to release something more generic for NavigationExperimental but I can't promise it right nor do I have a timeplan.
@oblador: thanks for the clarification. Sounds like there's a bunch of hungry puppies waiting for you here, myself included!
Would someone using the pinch to zoom feature on the navigator-refactor branch be willing to help me with this? http://stackoverflow.com/questions/40264486/including-a-library-from-a-github-branch-in-react-native?noredirect=1#comment67789465_40264486
Not sure what I'm doing wrong. Thanks in advance.
update: @kobePer 's suggestion worked for me. gracias.
@oblador for zoom, consider looking at this library https://github.com/alwx/react-native-photo-view.
