React-native: Invariant Violation: Tried to get frame for out of range index NaN Populating Render

[olympikesoft]

Hello
I'm getting error in FlatList after update in Real Time (Socket.io) from server message, it was working but no longer working.
Could be the version of React Native?

▼Invariant Violation: Tried to get frame for out of range index NaN

This error is located at:
    in VirtualizedList (at FlatList.js:640)
    in FlatList (at SingleConversation.js:323)
    in RCTView (at View.js:78)
    in View (at SingleConversation.js:258)
    in SingleConversation (at SceneView.js:17)
    in SceneView (at CardStack.js:455)
    in RCTView (at View.js:78)
    in View (at CardStack.js:454)
    in RCTView (at View.js:78)
    in View (at CardStack.js:453)
    in RCTView (at View.js:78)
    in View (at createAnimatedComponent.js:147)
    in AnimatedComponent (at Card.js:12)
    in Card (at PointerEventsContainer.js:39)
    in Container (at CardStack.js:498)
    in RCTView (at View.js:78)
    in View (at CardStack.js:414)
    in RCTView (at View.js:78)
    in View (at CardStack.js:413)
    in CardStack (at CardStackTransitioner.js:67)
    in RCTView (at View.js:78)
    in View (at Transitioner.js:142)
    in Transitioner (at CardStackTransitioner.js:19)
    in CardStackTransitioner (at StackNavigator.js:41)
    in Unknown (at createNavigator.js:13)
    in Navigator (at createNavigationContainer.js:226)
    in NavigationContainer (at App.js:39)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
- node_modules\react-native\Libraries\Lists\VirtualizedList.js:1482:6 in _getFrameMetrics
- node_modules\react-native\Libraries\Lists\VirtualizedList.js:1449:40 in _getFrameMetricsApprox
- node_modules\react-native\Libraries\Lists\VirtualizeUtils.js:119:47 in computeWindowedRenderLimits
- node_modules\react-native\Libraries\Lists\VirtualizedList.js:1384:14 in <unknown>
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:6136:29 in getStateFromUpdate
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:6238:41 in processUpdateQueue
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7057:8 in updateClassInstance
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8669:8 in updateClassComponent
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:9376:10 in beginWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11771:25 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11839:43 in workLoop
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:39:15 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:221:34 in invokeGuardedCallback
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11925:30 in renderRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12742:34 in performWorkOnRoot
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12660:26 in performWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12622:16 in performSyncWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12535:6 in requestWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12374:22 in scheduleWorkImpl
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12321:28 in scheduleWork
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:6388:19 in enqueueSetState
- node_modules\react\cjs\react.development.js:241:31 in setState
- node_modules\react-native\Libraries\Lists\VirtualizedList.js:1370:18 in _updateCellsToRender
- node_modules\react-native\Libraries\Interaction\Batchinator.js:70:8 in <unknown>
- node_modules\react-native\Libraries\Interaction\TaskQueue.js:116:10 in processNext
- node_modules\react-native\Libraries\Interaction\InteractionManager.js:207:6 in _processUpdate
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:297:23 in <unknown>
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:154:6 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:202:17 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:466:11 in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:329:4 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:147:6 in <unknown>
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:316:6 in __guardSafe
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:146:17 in flushedQueue
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:11 in invokeCallbackAndReturnFlushedQueue

Call Function

this.setState({ messages: oldMessages.unshift(JSON.stringify(data.socketmessage)) });

Flat List Call

     ```
   <FlatList 
          style={styles.list}
          ref='flatList'
          data={this.state.messages}
          keyExtractor= {(item) => {
            return item.id;
          }}

```

I have reviewed the documentation
I have searched existing issues
I am using the latest React Native version

[olympikesoft]

@react-native-bot @reactjs-bot

[react-native-bot]

It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?

If you believe your issue contains all the relevant information, let us know in order to have a maintainer remove the No Template label.

[react-native-bot]

If you are still encountering the issue described here, please open a new issue and make sure to fill out the Issue Template when doing so.

[luskin]

@olympikesoft did you solve this? I am receiving the same error.

[louislnf]

Had the same issue and realised that I wasn't giving data an array. Quickly looking at the doc for unshiftyou can see that it doesn't return anything (void). I think that the problem lies here. Your variable this.state.messages is empty.

[GuoYingxu]

@olympikesoft @luskin @louislnf
use

this.setState({messages:[JSON.stringify(data.socketmessage),...oldMessages]})

instead

[olympikesoft]

@GuoYingxu I already fixed with concat 👍

[eassymo]

what @louislnf says is correct, array is 'undefined' or 'null' thats why FlatList fails. Thank you louis.

[akshayaroraGS]

Pass the array not object for list data :P