Flickering issue on Load React Native Recyclerlistview

user_13533232 0
Viewed 572

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

            />
recyclerlistview react-flatlist react-native-flatlist react-native reactjs
1 Answers

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

user_106172620
Related