Glazzes / react-native-zoom-toolkit

Smoothly zoom any image, video or component you want!
https://glazzes.github.io/react-native-zoom-toolkit/
MIT License
178 stars 11 forks source link

[Feature]: RotateGesture #72

Open itsnyx opened 3 hours ago

itsnyx commented 3 hours ago

Summary

Hello, thanks for the great work on library

can we have a rotate gesture as well ? like in instagram stories when you add an image you basically can do everything zoom-pan-rotate at the same time ! im looking for a library that can do all of these at once, but none have the rotate gesture but i saw a function that can rotate image , which means i have to create another gesture handler for this which im not sure it will work

i really need help on this thanks

Expected API

No response

Glazzes commented 3 hours ago

Hello @itsnyx and thank you, I've never used Instragram in life if you could attach a video I could have a better undestanding of your needs.

itsnyx commented 3 hours ago

@Glazzes thanks for the fast response here is a video as you can see image only moves and rotates and zooms with double finger touching it but texts has this + that it can move with only 1 finger touching it https://github.com/user-attachments/assets/8d6a8642-f048-4ada-a3ac-ca5d2ce21db0

https://github.com/user-attachments/assets/b2fc8fb9-ea17-4377-bcd3-f0993e2e7fec

Glazzes commented 2 hours ago

I see, what you send me looks like some sort of canvas where you can make your own collages or something like that, is this your use case? If not please describe it in more detail.

itsnyx commented 2 hours ago

@Glazzes basically yes there is a parent view that you can add items to it (floating position: 'absolute') and each item can rotate zoom pan with double finger gesture i can also share project in a meeting if you dm me in telegram @alizapv1

Glazzes commented 2 hours ago

Well, there are some problems to look out, none of my components are designed to have this level of freedom as they're constrained to their particular use case.

Talking of wrapping a rotation gesture over ResumableZoom, these problems may arrise:

Not everything are bad news tho as it can be achieved with little effort from my part, at this point in time I don't frame this as feature for the library due to it's niche nature, maybe if more people display interest in this feature it will make it to the lib.

So as a temporary or definitive solution I can't tell, I can offer you a modification from the gist that gave birth to this library with those features you need, of course keep in mind such script is would be nothing but the gestures part, any other modifications such as event handlers would be a job for you if needed.

If thats ok for you let me know.

itsnyx commented 2 hours ago

@Glazzes thanks. yes this is a little bit niche but i think this is a limitation from react-native-gesture handler .


i also have another problem in video below i have shown that i have a horizontal flat list which each item is a simple

<View >
        <Image
          style={{
            width: '100%',
            height: height - 200,
            resizeMode: 'contain',
            // backgroundColor: 'transparent',
          }}
          source={{uri: item.file}}
        />
      </View>

and you can see in first half of the video everything works fine for the flat list swipe but after i change the child elements to :

       <ResumableZoom
        maxScale={resolution}
        onPanStart={test => {
          console.log('onPanStart', test);
        }}>
        <Image style={{...imageSize}} source={{uri: item.file}} />
      </ResumableZoom>

the flat list stops responding because ResumableZoom is getting the gesture events

https://github.com/user-attachments/assets/de262647-0811-43b1-a6b6-4882a4811665

what i think is correct is that when zoom scale is 1 the pan gesture should be disabled so if it's on a horizontal list, the list can do it's swipe

Glazzes commented 2 hours ago

@itsnyx ResumableZoom is not meant to be used within scrollable components because both scroll and zoom features must be tightly integrated with each other, therefore that's why I created Gallery component.

itsnyx commented 1 hour ago

@Glazzes my bad yes the galley component is what i need !

so should i close this issue or let it be open so if some one else want's this could reply i also try to work on this and will update if i found a proper way!

Glazzes commented 1 hour ago

@itsnyx It should remain open in case more people find themselves in the need of something this specific, nonetheless I'd post the base gist with the modifications mentioned (best I can achieve, I can't promise perfect work) here, you and maybe someone else may find good use of it.