'Dynamically changing number of columns in React Native Flat List

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

Solution 1:^[1]

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

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

Solution 2:^[2]

I did it using key

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

Solution 3:^[3]

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.

Solution 4:^[4]

In Hooks

const [numCols, setColumnNo] = useState(0);

<FlatList
key={numCols}
numColumns={numCols}
...
/>

Solution 5:^[5]

<FlatList
         data={props.localFolders}
         style={{ width: "100%" }}
         numColumns={4}
         key={4}
         renderItem={({ item }) => <LocalFolder {...item} />}
         keyExtractor={(item) => item.id.toString()}
/>

works for me

Solution 6:^[6]

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.

Solution 7:^[7]

If you need to make your app responsive when is landscape mode, try this:

     const {height, width} = useWindowDimensions();
     const isLandscape = width > height;

     <FlatList
     numColumns={Number(isLandscape) + 1}
     keyExtractor={item => item.id}
     key={Number(isLandscape)}
     ...

This will convert boolean into number. Note useWindowDimensions is imported from react-native.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Greg Billetdeaux
Solution 2
Solution 3	SupaMario
Solution 4	Aayush Bhattacharya
Solution 5	Jaysmito Mukherjee
Solution 6	sooper
Solution 7	Dragos UniqQum

'Dynamically changing number of columns in React Native Flat List

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

In Hooks

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]