Pinch to zoom

[JonathanWi]

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

[oblador]

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 ;-)

[JonathanWi]

Awesome news then! Could you ping me when it's up?

Cheers

[ashleydw]

Would be great to have this too

[machard]

+1

[btoueg]

👍

[dannytce]

+1

[iwater]

+1

[NoBaR]

+1

[oblador]

I'm feeling the pressure haha. I've implemented this in the navigator-refactor branch.

See #8 (comment) for more info.

[kwokster10]

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!

[oblador]

@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.

[kwokster10]

Oh, interesting. Is there a workaround for this? Would using ViewPagerAndroid make a difference? Thanks!

[oblador]

@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.

[apvlv]

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

[kobePer]

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