title: React-Native MapBox Clustering with custom icons
body: <p>How to perform clustering in React Native Mapbox with custom icons.</p>
  
  <p>i have checked the earthquake clustering example given on GitHub page of mapbox react native. but i need something different like, i need to do clustering with custom icons. i have 2 types of data/points on map one is user and other is events both have different icons so i need to render those custom icons in clustering.</p>
  
  <p>also on tap of that icon i need to show a pulse animation behind that icon. any possible way to do this? </p>
  
  <p>here is my code for implementing mapbox :-</p>
  
  <pre><code>&lt;MapboxGL.MapView
                              ref={(ref) =&gt; this.map = ref}
                              showUserLocation={store.homeStore.locationAlowed}
                              zoomLevel={11}
                              pitch={45}
                              centerCoordinate={[store.userStore.longitude, store.userStore.latitude]}
                              userTrackingMode={MapboxGL.UserTrackingModes.follow}
                              styleURL={MapboxGL.StyleURL.Street}
                              style={{
                                  position: store.homeStore.mapPosition,
                                  top: 0,
                                  left: 0,
                                  right: 0,
                                  bottom: 0,
                              }}
                              logoEnabled={false}
                              compassEnabled={false}
                              attributionEnabled={false}
                              onDidFinishRenderingMapFully={() =&gt; this.map.takeSnap(true).then((resp) =&gt; {
                                  if (resp) {
                                      store.homeStore.mapImageSource = resp;
                                  }
                              })}
                              onPress={this.onMapPress.bind(this)}&gt;
                              {store.homeStore.setLocationOnMap &amp;&amp; store.homeStore.eventData.length &gt; 0 ?
                                  store.homeStore.eventData.map((prop, key) =&gt; {
                                      return (
                                          &lt;MapboxGL.PointAnnotation
                                              key={prop.id}
                                              id={prop.id}
                                              coordinate={[parseFloat(prop.evt_longitude), parseFloat(prop.evt_latitude)]} &gt;
                                              &lt;TouchableOpacity onPress={this.selectEventOnMap.bind(this, prop)} style={{ height: vh * 0.109 }}&gt;
                                                  &lt;View style={styles.likesContainer}&gt;
                                                      &lt;Image source={require('../Images/ic_home_event_likes.png')}
                                                          style={[styles.heartImage, prop.event_likes &gt; 999 ? { marginLeft: vw * 0.018 } :
                                                              prop.event_likes &gt; 9 ? { marginLeft: vw * 0.036 } : { marginLeft: vw * 0.049 }]} /&gt;
                                                      &lt;Text style={[styles.likesText, prop.event_likes &lt; 10 ? { marginLeft: 2 } : '']}&gt;
                                                          {prop.event_likes &gt; 999 ? (Math.round(prop.event_likes / 1000) + " k") : prop.event_likes}&lt;/Text&gt;
                                                  &lt;/View&gt;
                                                  &lt;Image source={require('../Images/ic_home_inactive_event_pin.png')}
                                                      style={{
                                                          height: vh * 0.098, width: vw * 0.15, marginTop: vh * 0.017,
                                                          tintColor: (prop.userid == store.userStore.id ? Colors.Blue : Colors.warmPink)
                                                      }} /&gt;
                                                  &lt;Image source={this.getImageSource(prop.evt_category)}
                                                      style={{
                                                          height: vh * 0.041, width: vw * 0.077,
                                                          top: vh * 0.035, left: vw * 0.038, position: 'absolute'
                                                      }} /&gt;
                                                  {prop.selected &amp;&amp; &lt;Pulse style={{ zIndex: -1, position: 'absolute', top: -((vh * 0.109) / 3) }}
                                                      color={Colors.warmPink} numPulses={6} diameter={100} speed={18} duration={1000} /&gt;}
                                              &lt;/TouchableOpacity&gt;
                                          &lt;/MapboxGL.PointAnnotation&gt;
                                      );
                                  }) : null}
                              {store.homeStore.setLocationOnMap &amp;&amp; store.homeStore.peopleData.length &gt; 0 ?
                                  store.homeStore.peopleData.map((prop, key) =&gt; {
                                      return (
                                          &lt;MapboxGL.PointAnnotation
                                              key={prop.userid}
                                              id={prop.userid}
                                              coordinate={[parseFloat(prop.longitude), parseFloat(prop.latitude)]} &gt;
                                              &lt;TouchableOpacity onPress={() =&gt; { store.homeStore.showProfileCard = true; store.homeStore.userData = prop; }}&gt;
                                                  &lt;View style={{
                                                      height: vw * 0.130, width: vw * 0.130, borderRadius: (vw * 0.130) / 2,
                                                      backgroundColor: Colors.Blue, alignItems: 'center', justifyContent: 'center'
                                                  }}&gt;
                                                      &lt;AsyncImage source={{ uri: prop.image }}
                                                          style={{
                                                              height: vw * 0.122, width: vw * 0.122, borderRadius: (vw * 0.122) / 2
                                                          }} placeholderColor='#b3e5fc' /&gt;
                                                  &lt;/View&gt;
                                              &lt;/TouchableOpacity&gt;
                                          &lt;/MapboxGL.PointAnnotation&gt;
                                      );
                                  }) : null}
                              {this.renderRoute()}
                              {/* &lt;MapboxGL.ShapeSource
                                  id='earthquakes'
                                  cluster
                                  clusterRadius={50}
                                  clusterMaxZoom={14}
                                  url='http://moso.appinventive.com/public/accesscsv/data.json'&gt;
                                  &lt;MapboxGL.SymbolLayer
                                      id='pointCount'
                                      style={layerStyles.clusterCount} /&gt;
                                  &lt;MapboxGL.CircleLayer
                                      id='singlePoint'
                                      filter={['!has', 'point_count']}
                                      style={layerStyles.singlePoint} /&gt;
                              &lt;/MapboxGL.ShapeSource&gt; */}
                              {/* &lt;MapboxGL.ShapeSource
                                  id='talesMarkers'
                                  shape={jsonData}
                                  cluster
                                  clusterRadius={50}
                                  clusterMaxZoom={14}
                              &gt;
                                  &lt;MapboxGL.SymbolLayer key='{id}' id='{id}' style={styles.icon} /&gt;
                              &lt;/MapboxGL.ShapeSource&gt; */}
                          &lt;/MapboxGL.MapView&gt;
  </code></pre>
  
  <p>and here is the json data :- </p>
  
  <pre><code>const jsonData = {
      "type": "FeatureCollection",
      "features": [
          {
              "type": "Feature",
              "properties": {
                  "id": "27",
                  "evt_name": "nh24 event",
                  "evt_latitude": "28.624134137261",
                  "evt_longitude": "77.399671500871",
                  "evt_start": "1520855452",
                  "evt_category": "1",
                  "event_address": "Pusta Road, Bahrampur, Noida, Uttar Pradesh 203207, India",
                  "evt_createdon": "1520855452",
                  "userid": "23",
                  "image": "https://appinventiv-development.s3.amazonaws.com/moso%2FnCA3HzIs7OsAVLYVJ6Db",
                  "event_likes": "0",
                  "event_followers": "0",
                  "distance": "2.6069925023499723",
                  "view": false,
                  "event_growth": 0,
                  "owner_popularity": 0,
                  "viral": 0,
                  "icon": 'airport-15'
              },
              "geometry": {
                  "type": "Point",
                  "coordinates": [
                      77.399671500871,
                      28.624134137261,
                      6.55
                  ]
              },
              "id": "27"
          },
          {
              "type": "Feature",
              "properties": {
                  "id": "26",
                  "evt_name": "event with exact address",
                  "evt_latitude": "28.611121352303",
                  "evt_longitude": "77.385811577333",
                  "evt_start": "1520839916",
                  "evt_category": "1",
                  "event_address": "Sector 65, Noida, Uttar Pradesh 201301, India",
                  "evt_createdon": "1520839916",
                  "userid": "23",
                  "image": "https://appinventiv-development.s3.amazonaws.com/moso%2FnCA3HzIs7OsAVLYVJ6Db",
                  "event_likes": "0",
                  "event_followers": "0",
                  "distance": "1.489932977056515",
                  "view": false,
                  "event_growth": 0,
                  "owner_popularity": 0,
                  "viral": 0,
                  "icon": 'airport-15'
              },
              "geometry": {
                  "type": "Point",
                  "coordinates": [
                      77.385811577333,
                      28.611121352303,
                      1.67
                  ]
              },
              "id": "26"
          },
          {
              "type": "Feature",
              "properties": {
                  "userid": "13",
                  "name": "",
                  "username": "howdy",
                  "latitude": 28.577006492753625,
                  "longitude": 77.32924537095796,
                  "facebookprof": "",
                  "instaprof": "",
                  "image": "https://appinventiv-development.s3.amazonaws.com/moso%2FchMzFARwXj2z1y3MYASk",
                  "createdon": "1519757532",
                  "user_bio": "",
                  "user_likes": "1",
                  "user_followers": "1",
                  "distance": "0.021139920338468652",
                  "liked": false,
                  "follows": false,
                  "view": false,
                  "live_events": "0",
                  "user_growth": 1.3149888133309905e-9,
                  "user_popularity": 0.00046882325363338024,
                  "viral": 1.1720601065666707e-8,
                  "icon": 'airport-15'
              },
              "geometry": {
                  "type": "Point",
                  "coordinates": [
                      77.32924537095796,
                      28.577006492753625,
                      77.7
                  ]
              },
              "id": "13"
          },
          {
              "type": "Feature",
              "properties": {
                  "userid": "20",
                  "name": null,
                  "username": "otheruser",
                  "latitude": 28.606038365831,
                  "longitude": 77.362243836846,
                  "facebookprof": "",
                  "instaprof": "",
                  "image": "https://scontent.xx.fbcdn.net/v/t1.0-1/c59.0.200.200/p200x200/10354686_10150004552801856_220367501106153455_n.jpg?oh=f621f9474a63f5b27b0514adda5db42b&amp;oe=5B0F8625",
                  "createdon": "1519776475",
                  "user_bio": "",
                  "user_likes": "1",
                  "user_followers": "1",
                  "distance": "0.019360181909683884",
                  "liked": false,
                  "follows": false,
                  "view": false,
                  "live_events": "0",
                  "user_growth": 1.3149888133309905e-9,
                  "user_popularity": 0.0000017414245723714283,
                  "viral": 4.35553391414857e-11,
                  "icon": 'airport-15'
              },
              "geometry": {
                  "type": "Point",
                  "coordinates": [
                      77.362243836846,
                      28.606038365831,
                      1.6
                  ]
              },
              "id": "20"
          },
          {
              "type": "Feature",
              "properties": {
                  "userid": "23",
                  "name": "vijay",
                  "username": "vijaysharma",
                  "latitude": 28.577006492753625,
                  "longitude": 77.32924537095796,
                  "facebookprof": "https://www.gmail.com",
                  "instaprof": "https://www.gmail.com",
                  "image": "https://appinventiv-development.s3.amazonaws.com/moso%2FnCA3HzIs7OsAVLYVJ6Db",
                  "createdon": "1520588433",
                  "user_bio": "Usheiwhwosbwowgwiwgwowwjai9a7292ue8rgdidbdidhndjdjdjdjsksoa9wub3829283yehs8dyv3i38sieh3i39w83hejwuhe",
                  "user_likes": "0",
                  "user_followers": "0",
                  "distance": "0.021139920338468652",
                  "liked": false,
                  "follows": false,
                  "view": false,
                  "live_events": "0",
                  "user_growth": 0,
                  "user_popularity": 0,
                  "viral": 0,
                  "icon": 'airport-15'
              },
              "geometry": {
                  "type": "Point",
                  "coordinates": [
                      77.32924537095796,
                      28.577006492753625,
                      44.5
                  ]
              },
              "id": "23"
          }
      ]
  }
  </code></pre>
  
  <p>with pointAnnotations i am able to show points on map but this way clustering is not performed on mapbox. and if i try to make points on map from clustering using shapesource layer and json data then i am not getting how to use my custom icons. also i need to fire a click event on tap of that custom pin and show pulse loading animation behind that point. </p>
  
  <p>please take a look at screenshots also what i need to do with clustering. 
  screenshots shown only point annotations with which clustering is not happening.</p>
  
  <p><a href="https://i.stack.imgur.com/bUE1x.png" rel="nofollow noreferrer">mapbox point annotations without clustering</a></p>