When a marker is tapped, I want to tap it 3 times

Question

There's an issue with the map markers on Android and it seems no one can fix it. The workaround is to tap the map marker 3 times and it will open the callout/annotation with the image inside, properly.

How, can I do this programatically? I want to tap the marker 3 times for every time there's a tap by the user.

<MapView.Marker
  key={marker.key}
  coordinate={marker.latlng}
  title={marker.title}
  description={marker.description}
>
  <MapView.Callout style={styles.annotation}>
    <Image
      key={marker.key}
      source={{ uri: marker.image }}
      style={styles.thumbnail}
    />
  </MapView.Callout>
</MapView.Marker>

Are you sure the problem isn't somewhere else? Can you share some of your code here? — Xidh, Apr 13 '17 at 19:36
@ProllyGeek If you use react-native-maps and just make a marker with a callout like I have, then run on Android, you'll get the error. — User, Apr 16 '17 at 04:00

score 5 · Answer 1 · edited May 23 '17 at 10:31

tl;dr: This is not possible for security reasons. If a user app were able to create "synthetic" touches, this feature could be used by malicious apps in order to force the user's device to act "on its own". Read on if you want to read my research on the topic.

You can't do this on the JavaScript side of React Native, as far as I can tell. You'll need to set up some custom logic in order to emit native events on the native side.

The reason for this is that the JS side of React Native can only handle the native events (such as touches) it receives through the native bridge. These events will then trigger event-handling code such as that provided by the Touchable* components (such as TouchableHighlight, TouchableOpacity and others). As far as I can tell, there is no way to emit native events from the JS side, in accordance with the principles of one-way data flow.

On the other hand, while you can emit arbitrary native events from the native side, you won't be able to know what the JavaScript side is doing unless you somehow inspect the data getting sent to the rendering methods on the Native side, which would probably be pretty tough if not impossible.

The best way to go about this would therefore be to create a custom view class in native code which triggers multiple touch events whenever it is touched, and wrap it into a React Native component as described in the iOS and Android guides. However, there are issues when doing this:

In iOS, there is no publicly-available way for user code to create UITouch objects and dispatch them to the UI. You need to use undisclosed API methods to do it, which can change at any moment and will get your app rejected if you try to submit it to the App Store. There is one way to do this documented here, but it's likely outdated, as Apple makes no guarantee on undisclosed APIs remaining stable. There a few answers on SO already on why simulating touch events on iOS is not a good idea and will get your app rejected.

On Android, this has been discussed at length on the android-platform mailing list, with the general consensus being that it should not be possible to trigger arbitrary touch events from user code. Trying to programatically dispatch MotionEvents seems to lead to strange and unreliable behaviors, as seen in the second answer to this question, follow-up comments to that answer and the answer to this question.

Even React Native does not create its own touch events - it just receives the touch events generated by native views. All of the React Native Gesture Responder System just wraps public APIs available on the native side - the API to create touch events does not seem to be public.

All of this together leads me to believe that what you want to do is not possible at all without using private iOS/Android APIs, most likely due to security concerns.

Even when you are unable to create synthetic touches, you should be able to directly call the functions handling the touch events, shouldn't you? — Viktor Sec, Apr 20 '17 at 00:31
Yes, you can, but in this case that is actually not enough because the map is actually [a native component](https://github.com/airbnb/react-native-maps/blob/master/lib/components/MapView.js#L661). Calling the touch handlers won't actually do what the user who posted the question wants, as the touch handlers are only able to affect values on the JS side of things and the issue they want to solve is on the native side. — Pedro Castilho, Apr 20 '17 at 02:04

When a marker is tapped, I want to tap it 3 times

1 Answers1