What is the correct way to display multiple row types in a list view with variable permissions?

Question

So we want something like:

multi-line type

In iOS, we could use multiple cellIdentifier for each cell type to create a list of results.

Now i have 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 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 makes the dataSource.rowHasChanged method really difficult to implement correctly.

and for some reason, when I deleted the line, in RN0.31 you will have some ui defects as such:

ui-errors

Answer 1

I did not quite understand the question. But I will try to do it.

Instead of rendering multiple row types, you can display the same Row component, but there is different content inside it. It will be difficult to manage and display different types of strings.

You can pass the type of string you want to display as a support for the general Row component and render it.

So, your second code snippet will look like this:

 _renderRow = (rowData) => { const { type, data } = rowData; switch(type) { case 'address': return <Row component={AddressRow} data={...data} />; case 'deliveryTime': return <Row component={DeliveryTime} data={...data} />; default: return null; } }; 

Row would simply build the provided string and return the component. Thus, at the top level, you will only have Row s. Row will contain the specific component that you want to display.

render of Row :

 render() { const Component = this.props.component return <Component {...this.props.data} />; }