[FlatList] Rows aren't rendered until scroll
Problem
Hi, I have list view which displays partially local and partially remote data. Local data are initial for ListView.DataSource. This datasource is set in state of my custom component which wraps ListView and passed in render method to ListView. When are remote data received, new datasource is cloned by cloneWithRowsAndSections method and set to state of custom component. Problem is that are re-rendered only already displayed rows and new rows are rendered after scroll. Is it bug or how I should to force rendering of ListView? With react-native 0.5 it worked but after upgrade to 0.6 it behaves as described above.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Force Re-render of FlatList on Data Update
The issue arises due to the way React Native's FlatList manages its internal state and rendering. When the data source is updated with new rows, FlatList may not trigger a re-render for the new items until a scroll event occurs. This behavior can be attributed to optimizations in the FlatList component that prevent unnecessary renders, but it can lead to the observed issue when data is dynamically updated.
Awaiting Verification
Be the first to verify this fix
- 1
Update State with New Data
Ensure that the state is updated correctly with the new data source. Use the setState method to update the data source after receiving remote data.
javascriptthis.setState({ dataSource: this.state.dataSource.cloneWithRowsAndSections(newData) }); - 2
Force FlatList to Re-render
Use the `extraData` prop of FlatList to force it to re-render when the state changes. This prop should reference a state variable that changes when new data is received.
javascript<FlatList data={this.state.dataSource} extraData={this.state.dataSource} renderItem={this.renderItem} /> - 3
Implement a KeyExtractor
Ensure that each item in the FlatList has a unique key by implementing the `keyExtractor` prop. This helps React identify which items have changed, are added, or are removed.
javascriptkeyExtractor={(item) => item.id.toString()} - 4
Check for State Updates
Verify that the state updates correctly by logging the new data source after the update. This will help confirm that the data is being set as expected.
javascriptconsole.log(this.state.dataSource); - 5
Test on Multiple Devices
After implementing the changes, test the FlatList on both iOS and Android devices to ensure consistent behavior across platforms.
Validation
Confirm the fix by observing that all rows, including newly fetched remote data, render immediately without requiring a scroll action. Test the component with different data sets to ensure reliability.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep