Slowness when opening stories list

[fabioatcorreia]

Describe the bug
After upgrading @storybook/react-native to the latest version (8.4.4), the time to open the list of stories has degraded (takes around 2 seconds).

To Reproduce
Steps to reproduce the behavior:

1. Open React Native Storybook app
2. Click on Stories explorer
3. Bottom sheet is visible after some delay

Expected behavior
The stories list should be visible without a major delay.

Screenshots

storybook.native.slow.webm

Additional context
The project has quite a bit of stories files: 234.

[dannyhw]

@fabioatcorreia which version are you upgrading from? is this happening on both android and ios or just android?

[fabioatcorreia]

I'm upgrading from version 6.5.7, which used a different layout (there was no bottom sheet).

It also happens on iOS.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-20.at.15.26.17.mp4

[fabioatcorreia]

Just looked a bit through the code and it seems to be because the list is not virtualized.
Since it has a lot of stories to load, it will try to render all of them before opening the bottom sheet.

• BottomSheetScrollView
• Tree

[fabioatcorreia]

I'm not familiar with it, but it seems like the best approach would be to use BottomSheetFlatList instead of BottomSheetScrollView to render the stories list, but this means there needs to be a refactor around the current Sidebar and Tree implementation.

[dannyhw]

yeah thats probably true, flatlist would be the obvious choice but it didn't seem to have issues in my testing so thats the only reason I didn't initially do that.

I will need to reproduce this slowness in the example project to validate that it actually improves with a flatlist

I can take a look at this soon.

[dannyhw]

@fabioatcorreia 8.5.2 is out now which should fix the slowness :)