RecyclerListView Warning in React Native App

Question

I'm getting this warning while I'm running my React Native App. Can anyone pls help me out? I couldn't find any issue in the code. But I'm still getting this warning. The program is also working fine. But the warning is coming up everytime and I'm curious now to solve this.

Does anyone know why this warning is coming?

You have mounted RecyclerListView with an empty data provider (Size in 0). Please mount only if there is atleast one item to ensure optimal performance and to avoid unexpected behavior
at node_modules\react-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning
at node_modules\react-native\Libraries\LogBox\LogBox.js:63:8 in warnImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
at node_modules\expo\build\environment\react-native-logs.fx.js:18:4 in warn
at node_modules\recyclerlistview\dist\reactnative\core\RecyclerListView.js:210:12 in prototype.componentDidUpdate
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15732:12 in commitLifeCycles
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18744:22 in commitLayoutEffects
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18483:29 in commitRootImpl
at [native code]:null in commitRootImpl
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18317:17 in commitRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7267:16 in classComponentUpdater.enqueueSetState
at node_modules\react\cjs\react.development.js:471:2 in Component.prototype.setState
at node_modules\recyclerlistview\dist\reactnative\core\RecyclerListView.js:423:13 in prototype._queueStateRefresh
at node_modules\recyclerlistview\dist\reactnative\core\RecyclerListView.js:70:14 in RecyclerListView
at node_modules\lodash.debounce\index.js:159:21 in invokeFunc
at node_modules\lodash.debounce\index.js:206:20 in trailingEdge
at node_modules\lodash.debounce\index.js:194:20 in timerExpired
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:383:16 in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

Answer 1

Make sure all your data are loaded into your array before rendering the RecyclerListView component. Example

{yourArray.length > 0 && (
 <RecyclerListView {props}/> )}

Answer 2

The RecyclerListView component mounts before data are fetched or loaded. So wrap it with conditional rendering in order to run only when there are data.

example:

return (
       {dataProvider && dataProvider.getSize() > 0 &&
              <RecyclerListView 
               ..../>
        }
)

credit

Answer 3

DO This

return(
{this.state.dataProvider._data.length>0&&(  <RecyclerListView
            dataProvider={this.state.dataProvider}
            layoutProvider={this.layoutProvider}
            rowRenderer={this.rowRenderer}
            style={{ height: "100%" }}
          />)}
)

cause dataProvider gives you this=>
DataProvider {
  "_data": Array [],
  "_firstIndexToProcess": 0,
  "_hasStableIds": false,
  "_requiresDataChangeHandling": false,
  "_size": 0,
  "getStableId": [Function anonymous],
  "rowHasChanged": [Function anonymous],
}