Invalid cells around viewport "[NaN, NaN]" was passed to VirtualizedList._createRenderMask

[stonehiy]

"react": "18.2.0" "react-native": "0.71.3",

Invariant Violation: Invalid cells around viewport "[NaN, NaN]" was passed to VirtualizedList._createRenderMask

This error is located at: in VirtualizedList (created by FlatList) in FlatList in RCTView (created by View) in View in Unknown in RCTView (created by View) in View in Unknown in RCTView (created by View) in View (created by BSBTimePickerModal) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper in Unknown (created by BSBTimePickerModal) in RCTView (created by View) in View (created by BSBTimePickerModal) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by BSBTimePickerModal) in ThemeProvider in RCTView (created by View) in View (created by PortalManager) in PortalManager (created by Portal.Host) in Portal.Host (created by PaperProvider) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by PaperProvider) in PaperProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in ChildrenWrapper (created by Root) in _default (created by Root) in Root (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in bleadma(RootComponent), js engine: hermes

[troberts-28]

Hey @stonehiy!

Thank you for raising this issue.

Can you give me any more context to help me track this done?

Sharing your code would be a great help 🙌

[abhideepmallick]

So, if the value for initialMinutes is something like: {"hours": 1, "minutes": 15, "seconds": 0} it crashes, but if it's something like 75 (number value) it works but hours show as 0 and minutes show as 15 like the below screenshot:

If {"hours": 1, "minutes": 15, "seconds": 0} is passed in initialMinutes, the crash is:

The log:

Invariant Violation: Invalid cells around viewport "[NaN, NaN]" was passed to VirtualizedList._createRenderMask

This error is located at: in VirtualizedList (at FlatList.js:687) in FlatList (at DurationScroll.tsx:351) in RCTView (at View.js:116) in View (at DurationScroll.tsx:339) in Unknown in RCTView (at View.js:116) in View (at TimerPicker/index.tsx:166) in Unknown in RCTView (at View.js:116) in View (at components/index.tsx:207) in RCTView (at View.js:116) in View (at components/index.tsx:206) in RCTView (at View.js:116) in View (at createAnimatedComponent.js:54) in Unknown (at Modal/index.tsx:125) in RCTView (at View.js:116) in View (at AppContainer.js:127) in RCTView (at View.js:116) in View (at AppContainer.js:155) in AppContainer (at Modal.js:242) in RCTView (at View.js:116) in View (at Modal.js:271) in VirtualizedListContextResetter (at Modal.js:269) in RCTModalHostView (at Modal.js:248) in Modal (at Modal/index.tsx:107) in Modal (at components/index.tsx:199) in Unknown in MinutesPicker (at AddTherapy.js:279) in RCTView (at View.js:116) in View (at KeyboardAvoidingView.js:250) in KeyboardAvoidingView (at AddTherapy.js:204) in AddTherapy (at SceneView.tsx:132) in StaticContainer in EnsureSingleNavigator (at SceneView.tsx:124) in SceneView (at useDescriptors.tsx:218) in RCTView (at View.js:116) in View (at CardContainer.tsx:281) in RCTView (at View.js:116) in View (at CardContainer.tsx:279) in RCTView (at View.js:116) in View (at CardSheet.tsx:45) in CardSheet (at Card.tsx:557) in RCTView (at View.js:116) in View (at createAnimatedComponent.js:54) in Unknown (at Card.tsx:536) in PanGestureHandler (at GestureHandlerNative.tsx:14) in PanGestureHandler (at Card.tsx:530) in RCTView (at View.js:116) in View (at createAnimatedComponent.js:54) in Unknown (at Card.tsx:526) in RCTView (at View.js:116) in View (at Card.tsx:520) in Card (at CardContainer.tsx:219) in CardContainer (at CardStack.tsx:673) in RNSScreen (at createAnimatedComponent.js:54) in Unknown (at src/index.native.tsx:314) in Suspender (at src/index.tsx:40) in Suspense (at src/index.tsx:39) in Freeze (at src/index.native.tsx:206) in DelayedFreeze (at src/index.native.tsx:313) in InnerScreen (at src/index.native.tsx:566) in Screen (at Screens.tsx:38) in MaybeScreen (at CardStack.tsx:665) in RNSScreenContainer (at src/index.native.tsx:400) in ScreenContainer (at Screens.tsx:20) in MaybeScreenContainer (at CardStack.tsx:572) in RCTView (at View.js:116) in View (at Background.tsx:13) in Background (at CardStack.tsx:570) in CardStack (at StackView.tsx:437) in RNCSafeAreaProvider (at SafeAreaContext.tsx:92) in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46) in SafeAreaProviderCompat (at StackView.tsx:430) in RCTView (at View.js:116) in View (at GestureHandlerRootView.tsx:20) in GestureHandlerRootView (at StackView.tsx:429) in StackView (at createStackNavigator.tsx:121) in PreventRemoveProvider (at useNavigationBuilder.tsx:718) in NavigationContent (at useComponent.tsx:35) in Unknown (at createStackNavigator.tsx:120) in StackNavigator (at Navigator.js:34) in Navigator (at App.js:54) in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430) in BaseNavigationContainer (at NavigationContainer.tsx:132) in ThemeProvider (at NavigationContainer.tsx:131) in NavigationContainerInner (at App.js:53) in PersistGate (at App.js:52) in Provider (at App.js:51) in App (at withDevTools.ios.js:25) in withDevTools(App) (at renderApplication.js:57) in RCTView (at View.js:116) in View (at AppContainer.js:127) in RCTView (at View.js:116) in View (at AppContainer.js:155) in AppContainer (at renderApplication.js:50) in main(RootComponent) (at renderApplication.js:67), js engine: hermes

[troberts-28]

Thank you @abhideepmallick! Will get a fix out for this this week 🙌

[troberts-28]

Thanks again for raising this.

The confusion comes from the initial value props being split into three props (initialHours etc.) that each expect a number. As you pointed out @abhideepmallick, there was no support for using one of those props to set the other items on the picker (hence why initialMinutes={75} did not affect the hour picker).

For clarity, I have decided to merge those props into a single initialValue prop with type { hours?: number, minutes?: number, seconds?: number }.

I hope this will be clearer and easier to use. It also protects against the crash that you both saw. Incorrectly passing a number to that prop will simply leave the initialValue unaffected.

This will be merged into v1.7.0 today 🙌