Suport for multiple tombstone templates

[Textras]

Hello! This looks awesome btw. Great work.

Our list contains multiple templates and we currently use if statements to render different variations. Here is how our out current template markup looks like:

(example can be viewed here: https://codepen.io/Peety/pen/qmgZzE?editors=1010)

Here is our current template:

Me: {{item.keyword}}

<div class="feed-compas-arrow" v-if="item.itemType=='searchlocation'"></div>
 <div class="feed-query-location-addr"  v-if="item.itemType=='searchlocation'">
   Near: {{item.address}}
 </div>

<div class="feed-user-details feed-inset-item" v-if="item.itemType=='result'"> 
  <aside class="feed-user-tn" v-bind:style="getImageURLwithSuffix(item.thumbnailUrl, 'small', true)"></aside>
  <div class="feed-user-details-inner">
    <div class="feed-display-name" v-on:click="expand(item)">{{item.name}} </div>
    <timeago v-if="item.message.createdAt" :since="item.message.createdAt" :auto-update="60" class="feed-status-timestamp"></timeago>
    <div v-if="item.type=='business'">
      {{item.address}} <span class="feed-status-location-distance">({{convertDistance(item.distance)}})</span>
    </div>
    
  </div>
  <div class="feed-user-details-handle">
    <span v-if="item.handle">@</span>{{item.handle}}
  </div>
  <div class="feed-user-details-follow followed">
  </div>
</div>
<article class="feed-status-text feed-inset-item"  v-if="item.itemType=='result' && item.message.text"> 
  {{item.message.text}}
</article>
<div class="feed-status-image"  v-if="item.itemType=='result' && item.message.imageUrl">
  
  <img v-bind:src="getImageURLwithSuffix(item.message.imageUrl, 'medium')"/>
  
</div>
<div class="feed-status-location-details feed-inset-item"  v-if="item.itemType=='result' && item.checkInAddress" >
  <div class="feed-status-location">
    <div class="feed-status-location-address">{{item.checkInAddress.address}}</div>
    <timeago :since="item.lastLocationSharedAt" :auto-update="60" class="feed-status-location-timestapm"></timeago>
  </div>
  <div class="feed-status-location-distance">
    {{convertDistance(item.distance)}}
  </div>
</div>

{{item.favedTimes}}

{{item.message.sharedNo}}

{{item.phone}}

    <div class="feed-item-hours-line" v-for="(day, key, index) in item.hours">
      <div class="feed-item-hours-day">
        {{toUpperCase(key)}}
      </div>
       <div class="feed-item-hours-times">
         <span v-for="hours in day">{{joinHours(hours)}}<br></span>
        </div>
    </div>
    
  </div>
  <div class="feed-item-expanded-line feed-item-more">More</div>
</aside>

As you can see we have several distinct item markups. We've tried to implement the recycler view but with the app either crashes or the feed does not render render. Any ideas why?

Looking at how a React component handles infinite scrolling (below), I wonder if there is a prop we can use for vaiable tombstone height to prevent mem issues that may be cause of crash.
https://github.com/orgsync/react-list see the itemSizeEstimator(index, cache)
https://github.com/seatgeek/react-infinite (passing an array of height estimates)
https://github.com/Radivarig/react-infinite-any-height

Thanks for any help!

...btw good resources we found helpful for anyone looking into RecyclerView

1. https://medium.com/@talkol/recycling-rows-for-high-performance-react-native-list-views-628fd0363861 (ReactNative but a good rundown)
2. Feeds, infinite scrolling, lazy loading and rows with different heights bvaughn/react-virtualized#25