Menu
I start working with react native 1 month ago. Now i start building a simple that fetch data from internet and show layout like image below.
What is the best way to get these results into a grid?
this is my simple code
render() {
<FlatList
data={newsData}
renderItem={
({item,index}) =>
index === 0 ? this._renderHighlightedVideo(item.node,index) :
index === 5 ? this._renderAdvertisment() :
index > 10 && (index+2) % 7 === 0 ? this._renderAdvertisment() : this._renderGridVideo(item.node, index)
}
keyExtractor={(item, index) => index}
/>
}
_renderHighlightedVideo(news, index) { }
_renderAdvertisment(){ }
_renderGridVideo(item.node, index){ }
915
Use basic components The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list items. If you are reusing this list item component a lot in your app, create a component only for your big lists and make them with as little logic and nesting as possible.
keyExtractor Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key , then item.id , and then falls back to using the index, like React does.
It extracts the unique key name and its value and tells the FlatList component to track the items based on that value. The warning will then disappear after this step.
<FlatList
columnWrapperStyle={{ flexWrap: 'wrap', flex: 1, marginTop: 5 }}
data={this.state.tags}
horizontal={false}
renderItem={({ item, index }) => <Tags item={item} index={index}
handleSelectedTags={this.handleSelectedTags}
selected={this.state.selected[index]} />
}
numColumns={3}
keyExtractor={(item, index) => index}
/>Hope this will help.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
