Dynamically changing number of columns in React Na

Question

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} />}
      />}

Answer 1

I think the message is very clear. You need to define different keys for portrait/landscape if you want to change the number of columns to force a fresh re-render. Try concatenating the numCols value to the index in your keyExtractor.

Answer 2

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.

Answer 3

From the documentation, looks like you should do something like this

key={(this.state.horizontal ? 'h' : 'v')}

Answer 4

horizontal={false}
numColumns={2}

Try this

Answer 5

I did it using key

    numColumns = {this.state.columnCount}
    key={this.state.columnCount}