I am new to React-Native and I have been following this tutorial, http://mindthecode.com/getting-started-with-the-panresponder-in-react-native/ along with this How to make draggable remember it's location in React Native , which create a draggable image that remember the current location.
I want to know if it is possible to create a draggable image with a pinch gesture for zooming in and out (that doesn't goes back to the original size or position).
Related
I am trying to create a toggle player animation in react native, the same like Spotify, where when you press the miniPlayer , the full size player will show, my problem is that the fullSize Player View is transparent, and I can't seem to get the background of that view to render the proper color.
I created a snack since the original Project is huge and to better understand the issue:
https://snack.expo.io/#git/github.com/oflarcade/MPlayer
MiniPlayer
Full Size Player
I've been looking for references for some time on how to draw rectangles in an image using react native, but I can not find anything.
What I try to do is something like the user touch on the screen to mark the start position, and move, and release on the end position. We have to keep displaying the updated square.
Example video
Code is available for native development using java. But I need it on react native.
I have a screen on which I need to place a transparent round image , the position of the image could be dynamic, I need to render the dynamic view excluding the image with a black overlay colour, such that image and the screen contents below the image remains same... Kind of like when there is an app tutorial , only the required portion is highlighted and the remaining screen is dull..
How can I do it ?
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
I've implemented a React Native component which shows an image loaded from a remote server. The user can swipe the image out of the screen in order to navigate to the next image which is again loaded from the remote server. While loading of the second image, the old image is still visible on the screen.
I want the old image to disappear while loading the next image. Any hint how to achieve this?
Prop defaultSource only works for initial render (showing the first image) but not consecutive images. So I guess React reuses the Image under the hood. I've played around with onLoadStart and onLoadEnd but I don't know how to reset the source of the old image.
Any idea?
Thanks.
Add a unique key prop to each image. It can be a number or a string. That will prevent React from re-using the elements.