2

I'm looking for a way to implement image panning/zooming similar to Instagram using React Native:

Instagram pan/zoom

or see: https://www.youtube.com/watch?v=Ahzz3ik-EvQ

I've tried components such as ViewTransformer inside a FlatList but elements that appear higher up the app component tree (for example a TabNavigation bar) remain in the foreground over the top of the zoomed image.

Does anyone know or have any tips on how this could be implemented with React Native?

Thanks

UPDATE

Facebook Yoga (Reacts layout engine) have kindly re-opened a feature request to allow for position: fixed support. Such a feature would make it easy to inform the rendering engine how to position an element relative to the screen and not a parent component. This would allow components with a position:fixed to have a zIndex relative to the root. I believe such a feature would easily solve this problem.

https://github.com/facebook/yoga/issues/264

3
  • 1
    This looks like customized image view, how it is npmjs.com/package/react-native-photo-view
    – Ajay S
    May 12, 2017 at 4:46
  • 1
    Thanks for the pointer @TGMCians I tried the suggested component but it still only zooms within the context of the FlatList row and not the entire screen: see ibb.co/hW5ao5 There doesn't seem to be a position: fixed attribute in react native so an element can be positioned relative to the screen (effectively becoming a root element) and not the parent element as with position: absolute. I also tried using react-native-root-siblings to swap out the image at the start of a pinch/zoom with a root element but I couldn't get the swapped out element to gain control of the gestures.
    – Francesco
    May 12, 2017 at 5:21
  • I see. Lets wait folks response :) I have not tried this in react native btw I asked your question on facebook group, may be you get attention on your question fast
    – Ajay S
    May 12, 2017 at 5:36

1 Answer 1

2

You can use scrollview for implementing pinch zoom just put the image as below and set the maximumZoomScale and minimumZoomScale values. It will work only in ios.

<ScrollView maximumZoomScale={5} scrollEnabled={true} minimumZoomScale={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false}>
 <Image
  style={{height:100, width: 300}}
  source={{ uri: "https://img0.gaadicdn.com/images/car-
          images/496x206/Lamborghini/Lamborghini-Huracan/Lamborghini-
          Huracan-Performante/047.jpg" 
        }}
  />
</ScrollView>
2
  • Hi @Sooraj thanks for the tip :-) I tried your suggestion inside a FlatList row but it still only zooms within the row. I'm looking for a way to instruct React to position the element relative to the root and not the immediate parent (like the row) so that when zooming it's zIndex being relative to the root will enable it to come to the forefront of all components (ie other rows, headers, navigation bars).
    – Francesco
    May 13, 2017 at 2:33
  • Hi @Francesco I think this component may be helpful to you shoutem.github.io/docs/ui-toolkit/components/lightbox
    – Sooraj C
    May 13, 2017 at 6:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.