Menu / navigation not visible

[hollanderbart]

Describe the bug
After upgrading to the latest React Native Storybook version, I cannot see the menu anymore to navigate to other stories.

Are there some key shortcuts that I can use?

[dannyhw]

please share some more details, a reproduction if you have one. You might have ondeviceUI set to false or something?

[hollanderbart]

@dannyhw
After a lot of time spend investigating the issue with the example project and mine project, I discovered that I didn't have @gorhom/bottom-sheet installed. Apparently it's in the Readme, but in the manual guide.
Why aren't these dependencies needed for non-manual projects? How are they installed?
I would expect that if @gorhom/bottom-sheet is part of @storybook/react-native dependencies, they are always installed.

[dannyhw]

It should be installed when you run the create command, not sure where its missing? What did you follow to get setup?

it is currently always needed except for if you use the lite-ui

[hollanderbart]

I think I skipped that step because I already included Storybook into my project before.
Why isn't @gorhom/bottom-sheet listed as a dependency in the module's package.json? That would always make sure to install it, and not rely on specific manuals to follow. Wouldn't that make it easier for everyone?

[dannyhw]

Pretty sure its listed as a peer dependency, thats so you can choose the version you use. Plus it has other requirements that need to be installed manually by the user because of native deps like reanimated and gesture handler.

[dannyhw]

Heres the peer deps required

  "peerDependencies": {
    "@gorhom/bottom-sheet": ">=4",
    "react": "*",
    "react-native": ">=0.72.0",
    "react-native-gesture-handler": ">=2",
    "react-native-reanimated": ">=2",
    "react-native-safe-area-context": "*",
    "storybook": "^9.0.12"
  },

React native is just limited in how you can include native deps. Technically gorhom could be included as a internal dep since it doesnt have direct native deps but then it would clash with the user version potentially.

[hollanderbart]

Indeed, now I see the correct package.json and it indeed lists @gorhom/bottom-sheet correctly, but why does it also have the dependency listed as optional?

 "peerDependenciesMeta": {
    "@gorhom/bottom-sheet": {
      "optional": true
    },
 }

[dannyhw]

@hollanderbart this is because you can now pass a custom ui or use the lite version of the ui via the CustomUIComponent property which technically makes the default ui dependencies all optional

[hollanderbart]

Thanks for clearing this up. This doesn't make it ideal but allows for a custom UI.

[dannyhw]

I appreciate that its perhaps not super clear but I hope to improve that over time. Also potentially long term I probably will replace the current ui with the low dependency one since it simplifies supporting other platforms with the trade off being a bit more maintenance burden of recreating ux of gorhoms bottomsheet