What's the proper way of showing multiple type of rows on a react-native list view?

So what we want is something like:

multiple-row-type

In iOS we could use multiple cellIdentifier for each cell type to create performant listview.

What I have now is something like

render() {  const dataBlob = [    { type: "address", data: { address, gotoEditAddress } },    { type: "deliveryTime", data: {...} },    { type: "cartSummary", data: {...} },    ...[items.map(item => {{ type: "item", data: {...} }})],    { type: "paymentInformation", data: {...} },    { type: "paymentBreakdown", data: {...} },    { type: "promoCode", data: {...} },  ];  this._dataSource = this._dataSource.cloneWithRows(dataBlob);  return (<ListView ref="ScrollView"        renderRow={this._renderRow}        dataSource={this._dataSource} />  );)

and on the renderRow method

_renderRow = (rowData) => {  const { type, data } = rowData;  if (type === "address") return <AddressRow {...data} />;  if (type === "deliveryTime") return <DeliveryTimeRow {...data} />;  if (type === "menuItem") return <MenuItemRow {...data} />;  if (type === "cartSummary") return <CartSummaryRow {...data} />;  if (type === "promoCode") return <PromoCodeRow {...data} />;  if (type === "paymentInformation") return <PaymentRow {...data} />;  if (type === "paymentBreakdown") return <PaymentBreakdownRow {...data} />;  return null;};

The problem with the above code is that it's making the dataSource.rowHasChanged method to be really complicated to implement correctly.

and for some reason when I removed a row, in RN0.31 you will have some ui-defects as such:

ui-defects