I have a problem when I put buttons on a background image, for some reason they are transparent and take the color of the background image, if I use the same button component somewhere else that is not on top of a background image the color button is not modified, this only happens when the button is on an image and only in android, someone knows why this happens?
add a TouchebleOpacity on ImageBackground component
Related
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
Please see the demo code here.
If i begin touch in blue view, scroll view not being scrolled, how should I do to make this work?
Or if blue view is under the scroll view (and the content's background color is transparent), how should I do to handle touch event when I click the blue view?
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
In my iphone app, you get a UIView with a background image and a "start button".
When you hit the start button, the start button will be hidden, and your background aswell. You will see another image. You will also get a "back button".
You should be able to zoom the image and scroll around.
I want everything on the same UIView.
When you hit the back button, everything should get back to the first background image and the start button, and you should not be able to zoom or scroll.
How can I do this? And is it possible at all to hide a scroll view in order to just show a regular screen, in the same view?
Thanks in advance!
EDIT: Ok, I know how to hide the scroll view now, but when the scroll view is shown, you can't scroll! I have made the scroll view bigger than the screen and put a label below the "original screen". How to get it to scroll?
Add a UIScrollView to the main view in which you have the zoom/scrollable image. Simply remove it when the back button is pressed.
Hey! I am making an app with a slider which slides out from the bottom and I would like to make other parts of the app a bit darker to show that the picker is the active component, like when alertbox comes, the background darkens. How do archieve this?
Overlay the elements you want to darken with a view that has a semi-transparent dark background (e.g. a black background with an alpha value of 0.5).