Pinch zoom in a list view

uiux

#1

Hi. I have implemented pinch zoom for an element (and image in it) by this repository in nativescript-angular. But when I use it in a ListView, ss there is no enough space in a ListView , I can’t zoom the image as much as before. Any idea?


#2

Usually such features will not be given inside ListView. May I know why you want it inside list view, mostly it happens in a detail view after clicking on it.


#3

Hi @manojdcoder
I want to implement a zoom feature like instagram in feeds. You see images in list view and can pinch to zoom as much as you want.


#4

Those are not just list view, it’s a detail page when you click on a photo. It’s animated in such a way that you feel it’s happening within the page - if I’m not wrong the concept is called shared elements in Android.


#5

But there is an implementation in react-native that doesn’t use shared element. It just make the photo draggable. See here for more detail.


#6

I talked about a different list in Instagram Android app. But still looking at the example you shared, it also doesn’t directly allow pinch / zoom on the image in the list view but instead it uses a wrapper view that is shown only when user starts pitching with the image loaded.


#7

So, is there any solution for Nativescript?


#8

You can of course use the same logic with NativeScript List and pinch zoom events. But I don’t think there is a one stop example I can refer you to.


#9

Not necessarily need a step by step example. Just want to know about concept.