In this post we are going to discuss about common issues related to react native with the title of “How To Dynamically Change The Number of Columns in React Native FlatList Free 3”.
So let’s start the post.
Introduction of issue –
Altering the number of columns in real-time is not supported. Update the key prop on FlatList to initiate a fresh render when modifying columns.
- Invariant Violation – Changing numColumns on the fly is not supported
- Modifying numColumns dynamically may cause UI glitches or crashes
- When updating numColumns some “old” item layout are re-used, creating inconsistencies
Issue Image –
Solution –
It should not cause crashes or display an inconsistent item layout. When using FlatList, there is a warning message indicating that, “How To Dynamically Change The Number of Columns in React Native FlatList Free 3”.
Using key={flatList${numColumns}} resolves this issue by forcing FlatList to re-render.
However, there might be a more efficient way to handle this. I believe FlashList should at least display a warning or error message to guide users on how to resolve this problem. Alternatively, FlashList could automatically handle this behavior by updating its key when numColumns changes.
{
selected.length == 2
?
(<FlatList
keyExtractor={item => "_" + item.id}
renderItem={this.renderLastItem}
data={subGroups}
numColumns={1} />)
:
(<FlatList
keyExtractor={item => "#" + item.id}
renderItem={this.renderItem}
data={subGroups}
numColumns={2} />)
}
So we solved this most occurred react-native issue which is the 3rd part of “Common Issues With React Native Part – 3 with the title topic How To Dynamically Change The Number of Columns in React Native FlatList Issues 3″.
Finally, we solved one more common issue with react native, which is “How To Dynamically Change The Number of Columns in React Native FlatList Free 3”.
In the next tutorial, we learn the other common issues related to react native, and in this series, I am trying to solve multiple react-native-related issues so follow it carefully.
Here You find my next post here.
Here is my B2B startup app – Beparr Wholesale App
My website for B2B – Bepaar
In conclusion, If you have any queries or issues, please feel free to ask, and if you have any suggestions regarding my writing please mail me or msg me.
Happy Coding Guys.
Hi, I am a professional Ionic and React Native Pixel Perfect App Designer and Developer, with expertise in Client Communication, Bug Fixing, Third Party Lib, Version Control Tools, Requirement Understanding, and managing teams, I have 6+ years of experience in the same domain as well as in Codeigniter, JS, IoT, and more than 10 other languages. For the last 6+ years, not a single day went without design/development.
Please follow me on Medium: https://nehadwivedi1004.medium.com/
