[MapView] Support for annotation callouts, annotation press, callout presses and pin animation

[dvcrn]

Started from here - #1120. Most functionality for annotations were missing so I started implementing and somehow got caught up until the entire thing was done.

2 new events:

• callout presses (left / right)
• annotation presses

6 new properties for annotations:

• hasLeftCallout
• hasRightCallout
• onLeftCalloutPress
• onRightCalloutPress
• animateDrop
• id

1 new property for MapView

• onAnnotationPress

---

Now the important thing is, that I implemented all of this the way "I would do it". I am not sure this is the 'reacty' way so please let me know my mistakes 😄

The problem is that there is no real way to identify annotations which makes it difficult to distinguish which one got clicked. The idea is to pass a id and whether it has callouts the entire way with the annotation. I had to subclass MKAnnotation for this and implemented a custom RCTPointAnnotation which adds id, hasLeftCallout, hasRightCallout and animateDrop.

I added RCTPointAnnotation and RCTPointAnnotationArray into a new RCTConvert method.

The user is able to overwrite the id on the annotation directly, but if no id is set, I am generating one on componentWillMount or componentWillReceiveProps. This id will also get passed into onAnnotationPress

---

I am setting the callout accessory always to UIButtonTypeDetailDisclosure. Todo at some point would be to allow custom UIButtons and Images

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[brentvatne]

@dvcrn - Nice one! Sorry for the lack of love on this PR - could you possibly squash your commits and rebase against master? Thanks!

[chandu0101]

@dvcrn excellent , this is what i am looking for :)

[dvcrn]

@brentvatne Squashed and rebased current master

[brentvatne]

@dvcrn - sorry could you rebase again and ping @a2 when it's done? the project is moving so quickly 😄

[dvcrn]

@a2 ping 😄

[dvcrn]

I am working a lot with mapview lately and found some more annoyances so why not squeeze them in here as well?

I updated setAnnotations to now delta-update annotations rather than completely deleting all of them and setting them again. Why does it matter? Because this left very ugly jumpy effects on the map where all annotations suddenly disappear and re-appear. It becomes even more prominent when animateDrop from this change here is on, because it will cause all annotations to drop every time when the annotations change.

I tried object comparison (as in [NSArray containsObject:annotation) but had cases where it would still delete the annotation even though it already existed. I assume the object either changed or a new one got generated but my objc skills are not sufficient to know the exact lifecycle of objects. So instead, I decided to use the identifier, since this change will force each annotation to have one. Because of that, there are a few more loops and comparisons than maybe necessary but the results are great and pins don't get re-dropped if they are already there.

Now the problem: Working on this change made me realize that the identifier system I currently have in place is a bit flawed. If the user sets his own ID, the pins will not change. If the user does not do that and relies on the auto-id I am generating, it will re-add a new ID every time the annotation array changes since it will wipe the unique-id of that annotation and generate a new one.

I decided to replace the unique uuid with a hash containing a JSON.stringify representation of the annotation object. I'd love to hear some feedback on this. The good thing about this solution is, that same objects have same hashes and it is no longer random. This allows for the same pin to have the same identifier through the entire app flow, even if the user replaces the object reference with a new one (e.g. on ajax fetch). No more jumpy pins!

The bad thing is, that if 2 pins are identical, the event system could fail and only 1 callback is getting executed. Though this can only happen if literally 2 pins are on the same lat, long with the same title and subtitle which... well... shouldn't happen.

TODO is to base64 encode that hash, but btoa doesn't seem to be available and I didn't want to add a base64 encoder just for that. So right now it is a looong encodeURIComponent string.

[a2]

This PR was imported internally but @nicklockwood had some comments. Nick, can you make those comments here?

[dvcrn]

Thanks for the feedback, I'll try to get the stuff fixed the next days

[brentvatne]

Awesome 😄 thanks @dvcrn

[dvcrn]

Ok I think I got them all

[bparadie]

@dvcrn Hey, I think I know a workaround for the Travis CI failures. Those have nothing to do with your code changes. You have to add this line to the dependencies in package.json:

"babel-core": "5.5.6",

For more details, see #1546 (comment)

[a2]

Merged internally.