I have a scrollView with a single Image in it. Initially the Image has the same width & heigth as the ScrollView.
I am trying to crop this image based on how the user have zoomed and moved the image. Basically, I want to know what part of the image is visible, so that I can crop it accordingly.
Im using expo's ImageManipulator to crop it, so I have that part covered. But to get the dimensions of what part of the Image is visible after zoom/drag is whats bugging me.
Much appreciated!
The logic here is to first fill the Image component inside the size of the ScrollView. This way, the size of the image will be equal to the size of the ScrollView.
First, you need to set directionalLockEnabled prop to false and horizontal prop to true to make the ScrollView scroll horizontally.
Then, set maximumZoomScale and minimumZoomScale props to make your ScrollView zoomable. Now, every time you zoom and scroll in your ScrollView it will fire onMomentumScrollEnd and onScrollEndDrag with the event parameter from which you can get the visible part of your ScrollView which is usually,
event.nativeEvent.contentOffset
event.nativeEvent.contentSize
event.nativeEvent.layoutMeasurement
Since your Image Component size is same as that of the ScrollView Component, it will give you the exact visible area of the image in the ScrollView.
For Detailed implementation example, you can refer to this file of the react-native-community/react-native-image-editor repository
Related
I am working on gradually increasing the height of list footer component so that whatever is there is my footer be shown gradually to the user and on swipe up. Also keeping in mind that the list items doesn't get hidden by footer's view.
I have made a animated.view in the footer's component and used animated.timing to gradually increase the height but it is not working correctly.
I have some dynamic content which I have placed inside a ScrollView.
As per the content's height it makes scroll. Some times because of the content height there is no scroll. I just want to know is there any way to detect programmatically ScrollView container is scrollable or not depending on the content's height ?
If for a given height to the scrollview, the content is not fitting to
that height then automatically the scrollview is scrollable, otherwise
its just a normal view. It Depends mostly on the device height, Let
say for a small device the view is scrollable and for long devices,
that view is not scrollable.
It purely depends on the content, you are not able to figure out when it should be scrollable and when not.
Hope this helps...Thanks :)
I have an image rendered inside a scrollview component and the dimensions of the image are fixed as (height: 200, and width from device dimension).
Also the style of the scrollview is set as (flex: 1 not contentContainerStyle).
But the image doesn't scroll properly and snaps back when I scroll.
I understand that this is because there is only one item in the scrollView.
How to force scroll the content inside the scrollView even if there is only one item in it?
Try wrapping your ScrollView within a an enclosing
I need some help determining how to use React Native's Animated view to perform a translateX to move the view to the left edge of the screen.
Currently, I have been able to translateX with a random number (-50) and the view will move, but I'm unsure how to correctly calculate the distance to move so that the element is right against the left side of the screen.
Ideas?
If the view you want to move is full width view you can use Dimensions API to get window width and translateX the amount of width.
I was actually able to solve this by creating another View component in front of the component I'm trying to move. Then using onLayout of the view to get its width, and finally -translateX using the width of the "hidden" View component.
I have bunch of images inside a UIScrollView and have a tap event setup on each image. When I try to make the image full screen it actually is cut off by the scroll view. I am trying to implement a Facebook style UIImageView where the image zoom in and takes over the full screen on tap.
Does anyone have suggestion on how to approach this cause the way I am doing the image is cropped to the size of the scroll view.
Well, usually you would disable clipping, but the scrollview relies on clipping to do its job so that won't work.
My suggestion would be to push a copy of the image above the scrollview, and animate that to full screen. You should be able to get the rect using convertRect:toView: and it would be pretty straightforward from there.
btw, Is there a reason not to use a tableView for this?
When tapped hide the image and add the image at the proper place in the scrollview superview and over the scrollview. Then animate it to take the full screen.
Facebook App style UIImageView is nicely implemented in below given source code, you can take a clue from this
https://github.com/michaelhenry/MHFacebookImageViewer