I'm working with a map in react-native-maps that displays a number of Polygons. Each polygon has listeners and the map itself has listeners. On click, I'd like to either highlight a polygon or drop a marker if the click happens where there is no polygon. Unfortunately, I'm not seeing a way to stopPropagation after a polygon click. For now, I'm just using a setTimeout to disable new markers from being made for .5 secs after a polygon is clicked.
Is there a more graceful solution that I'm not aware of. I was unable to get event.stopPropagation to work with the event react-native-maps sends back.
Related
Please take a look at this example on the react native docs.
https://reactnative.dev/docs/panresponder
On a device, if you start a touch outside of the box and then drag over the box, the PanResponder doesn't trigger (this is the expected behaviour)
But on web, if you start a click outside of the box then drag your mouse over the box, the box will start dragging along with your cursor.
Is there a way to only trigger the PanResponder if the click started on the element that is responding?
I need to create an animation in React Native which is best described as follows:
A user grabs some UI item and drags it from its original position.
While the user moves it, there is also some rotation, the UI item rotates around the Z-axis according to its motion on the XY plane.
When the user releases the item, both its position and its rotation are animated back to their original values (a "fire-and-forget" animation).
This is similar to a "pull down to refresh" UI widget. While the user is pulling down, we have both the Y translation and the rotation of the loading wheel coupled to the touch movement, and when the user lets go, there is a fire-and-forget animation without control by the user.
How would I implement this in a performant way?
I'm thinking of something like this:
We store the user's motion in the state of the component. With every move of the touch, the UI is re-rendered (not sure if that is performant).
When the user releases the touch, we use Animated.timing to generate the fire-and-forget animation.
Because of 2., the value in the state needs to be an Animated.Value instance. I'm not sure if 1. can be implemented in a performant way, using an Animated.Value as a state.
The answer is (of course): use react-native-reanimated. With this library, you have complete, declarative control over native animations and their interactions with gestures.
This is an example app which has what I was looking for:
Here is the source code.
I use React-Native-Maps and my map marker pins that overlap each other spring apart gracefully when i click them, so can i pick the one wanted?
I've used This library for the web side.
There are libraries that do this but normally it is implemented by adjusting the zoom level. Is that a possible solution or do you need to move the pins apart at the current zoom level?
If you want to move them apart at the current zoom level they could push into other pins and make the issue worse. You might be better off doing a bounding box search around whatever pin gets the click event and opening a popup to make a selection from any results in the box.
I would like to create a carousel that scrolls automatically until the user scrolls / touches the ScrollView itself.
The auto-scrolling itself works fine with using scrollView.scrollTo but how could I detect if the user is interacting with the ScrollView? I took a look at the onScroll event but this does not seem to distinct between a user generated event and an event that was generated by calling scrollTo.
Also I'd like to know if it is possible to get the current scroll position from the ScrollView directly instead of reading it everytime from the onScroll event.
I'm very thankful for any tips and suggestions.
By digging into ScrollView's source code you can notice a few undocumented callbacks that will help you achieve what you're after, namely onTouchStart and onTouchEnd. These two callbacks are triggered only when user interacts with the ScrollView and not when you scroll programmatically.
You will probably want to clear your auto-scroll interval on onTouchStart and restart it after a delay on onTouchEnd.
Regarding your next question, the answer is no. As far as I know, no getter is currently exposed to retrieve the current scroll position. Therefore, you need to rely on the event passed to onScroll, retrieve event.nativeEvent.contentOffset['x' or 'y'], and store it in your component's state.
Note that if you're doing some heavy animations that need to follow scroll position closely (e.g. animated header or parallax image), it would be a good idea to use the native driver for Animated.event. You can learn more about it on React Native's blog.
is there a way to disable the marker focus when it is clicked? Like I want the map view to stay as it is when I click a marker. Right now, if I click any marker the map view automatically adjust focusing on that marker. Is there a way to disable it? Many thanks
As jasongaare states in https://github.com/react-community/react-native-maps/issues/199#issuecomment-330901293, there is a moveOnMarkerPress property for the MapView component.
I guess the only way to make it possible for now is to do the LiteMode
https://github.com/airbnb/react-native-maps/blob/master/example/examples/LiteMapView.js
So far it works just fine, it does not focus anymore to the pressed Map Mark.