Flickering issue on Load React Native Recyclerlistview

Question

I have switched from Flatlist to RecyclerlistView of Flipkart. But events like onload and onscroll there is some row render flickering issue, which seems to weird. Does anybody have any fix for this?

Here is the code:

           <RecyclerListView
 
                optimizeForInsertDeleteAnimations={true}
                // initialOffset={800}

                initialRenderIndex={0}
                scrollsToTop={false}
                showsVerticalScrollIndicator={false}

                style={{ paddingBottom: 90 }}
                forceNonDeterministicRendering={true}
                layoutProvider={this._layoutProvider}

                dataProvider={this.state.dataProvider}
                extendedState={this.state.dataProvider}

                rowRenderer={this._rowRenderer}

                disableRecycling={true}

                // shouldComponentUpdate={true}
                // shouldComponentUpdate={this.shouldComponentUpdateList()}


                onEndReached={this.onEndReached}
                onEndReachedThreshold={0.1}
                renderFooter={this._renderFooter}
                scrollViewProps={{
                    // contentContainerStyle: { paddingBottom: (140) },
                    // stickyHeaderIndices: [1],
                    refreshControl:
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this._handleRefresh()
                            }}
                        />
                }}

            />

Answer 1

I was facing similar problem. Its due logical error in my code. My code was like this

const dataProviderMaker = (data) => new DataProvider((r1, r2) => r1 !== r2).cloneWithRows(data)
const [dataProvider, setDataProvider] = useState(dataProviderMaker({}))
const [data, setData] = useState()

const fetchData()=>{
fetch(url,{method:"GET",...})
   .then((res)=>res.json())
   .then((res)=>{
      setData(res)
      setDataProvider(dataProviderMaker(data))
   })
}

useEffect(()=>{
 fetchData()
},[data]}

What was wrong in this code is, when screen opens fetchData() function is called. Which updates data. When data change inside useEffect, fetchData function is called. This caused loop. And list use to flicker.

So I updated my code like this

const dataProviderMaker = (data) => new DataProvider((r1, r2) => r1 !== r2).cloneWithRows(data)
const [dataProvider, setDataProvider] = useState(dataProviderMaker({}))
const [data, setData] = useState()

const fetchData()=>{
fetch(url,{method:"GET",...})
   .then((res)=>res.json())
   .then((res)=>{
      setData(res)
      setDataProvider(dataProviderMaker(res))
   })
}

useEffect(()=>{
 fetchData()
},[]}

Hope it may help you