Menu
I have a FlatList where I want to change the number of columns based on orientation. However, I get the red screen when I do this. As per the red screen error message, I'm not quite sure how I should be changing the key prop. Any help is appreciated.
// dynamically changing number of columns
const numCols = orientation === constants.PORTRAIT ? 3 : 8
<FlatList
keyExtractor={(_, i) => i}
numColumns={numCols} // assigning the number of columns
horizontal={false}
renderItem={({ item }) => <ListItem imageUrl={item.url} />}
/>}
472
Use getItemLayout If all your list item components have the same height (or width, for a horizontal list), providing the getItemLayout prop removes the need for your FlatList to manage async layout calculations. This is a very desirable optimization technique.
Displaying data using map or other loop methods may give you flexibility to customize the list the way you want, but as the amount of data grows, you also need to take extra care of the bulk data you render on the visible screen. FlatList makes handling complex and large amounts of list data easy and effortless.
The FlatList component displays the similar structured data in a scrollable list. It works well for large lists of data where the number of list items might change over time. The FlatList shows only those renders elements which are currently displaying on the screen, not all the elements of the list at once.
From the documentation, looks like you should do something like this
key={(this.state.horizontal ? 'h' : 'v')}
I did it using key
numColumns = {this.state.columnCount}
key={this.state.columnCount}
Pass a changing value to the FlatList itself. It has nothing to do with the keyExtractor or the key attrbibute in renderItem methods:
<FlatList key={changingValue} .. />
should solve it.
43
const [numCols, setColumnNo] = useState(0);
<FlatList
key={numCols}
numColumns={numCols}
...
/>
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
