title: What's the proper way of showing multiple type of rows on a react-native list view?
body: <p>So what we want is something like:</p>
  
  <p><a href="http://i.stack.imgur.com/rBOO5.jpg" rel="noreferrer">multiple-row-type</a></p>
  
  <p>In iOS we could use multiple cellIdentifier for each cell type to create performant listview.</p>
  
  <p>What I have now is something like </p>
  
  <pre><code>render() {
    const dataBlob = [
      { type: "address", data: { address, gotoEditAddress } },
  
      { type: "deliveryTime", data: {...} },
  
      { type: "cartSummary", data: {...} },
  
      ...[items.map(item =&gt; {{ type: "item", data: {...} }})],
  
      { type: "paymentInformation", data: {...} },
      { type: "paymentBreakdown", data: {...} },
      { type: "promoCode", data: {...} },
    ];
  
    this._dataSource = this._dataSource.cloneWithRows(dataBlob);
  
    return (
      &lt;ListView ref="ScrollView"
          renderRow={this._renderRow}
          dataSource={this._dataSource} /&gt;
    );
  )
  </code></pre>
  
  <p>and on the renderRow method</p>
  
  <pre><code>_renderRow = (rowData) =&gt; {
    const { type, data } = rowData;
    if (type === "address") return &lt;AddressRow {...data} /&gt;;
    if (type === "deliveryTime") return &lt;DeliveryTimeRow {...data} /&gt;;
    if (type === "menuItem") return &lt;MenuItemRow {...data} /&gt;;
    if (type === "cartSummary") return &lt;CartSummaryRow {...data} /&gt;;
  
    if (type === "promoCode") return &lt;PromoCodeRow {...data} /&gt;;
    if (type === "paymentInformation") return &lt;PaymentRow {...data} /&gt;;
    if (type === "paymentBreakdown") return &lt;PaymentBreakdownRow {...data} /&gt;;
  
    return null;
  };
  </code></pre>
  
  <p>The problem with the above code is that it's making the dataSource.rowHasChanged method to be really complicated to implement correctly.</p>
  
  <p>and for some reason when I removed a row, in RN0.31 you will have some ui-defects as such:</p>
  
  <p><a href="http://i.stack.imgur.com/qxWbP.jpg" rel="noreferrer">ui-defects</a></p>