Make third-party dependencies optional to reduce bundle size and version conflicts

[douglasjunior]

Is your feature request related to a problem? Please describe.

I'm always frustrated when Storybook for React Native forces the inclusion of third-party dependencies like react-native-reanimated, react-native-svg, and @gorhom/bottom-sheet in projects that don't actually use these libraries. This creates three main problems:

1. Version conflicts between the libraries used in our project and those required by Storybook

2. Unnecessary native module bundling - our final app bundle includes code for libraries we don't use (e.g., we don't use @gorhom/bottom-sheet or react-native-reanimated, but their code is still bundled)

3. Breaking changes overhead - libraries like react-native-reanimated have a considerable history of breaking changes between versions, increasing maintenance workload for future Android, iOS, and React Native updates

Describe the solution you'd like

I would like Storybook to make these third-party dependencies optional and limit required dependencies to only internal React Native APIs. For example, @gorhom/bottom-sheet could be replaced with React Native's built-in Modal component. This would allow projects to opt-in to additional dependencies only when needed, rather than being forced to include them.

Describe alternatives you've considered

• Creating a peer dependency system where these libraries are optional
• Providing different Storybook builds (minimal vs full-featured)
• Using React Native's built-in components as fallbacks when third-party libraries are not available
• Implementing a plugin system where additional UI components can be added optionally

Are you able to assist bring the feature to reality?

Yes, I can contribute to this feature implementation. I have experience in React Native and open-source projects, I'm willing to help with code reviews, testing, and implementation.

Additional context

This issue particularly affects enterprise projects and apps with strict bundle size requirements. Many teams avoid updating Storybook versions due to conflicts with these mandatory dependencies, which impacts the overall developer experience and adoption of newer Storybook features.

[dannyhw]

this is actually already the case since recently, see the custom ui property and the lite ui package

https://github.com/storybookjs/react-native/blob/924c0c6e2c86ccf78486dc7a4f68a30faba7ca92/packages/react-native/src/View.tsx#L191C9-L191C10

if you opt to use the lite ui then you won't need any of those dependencies

https://storybookjs.github.io/react-native/docs/intro/configuration/storybook-ui-configuration#using-lite-ui-components

Initially I wanted to reduce the maintenance burden by bringing in some helpful libraries but I did find it made using on other platforms like macos/tv more difficult so I started experimenting with the lite ui that is now available.

Note that optional dependencies don't work in older versions of metro, currently I know this does work in recent versions of expo atleast, the same try/catch approach on optional requires is used by reanimated also for example

Since this is already solved in my view I'd like to move this to a discussion and we can discuss further there if you like

Note that you can already see that the peer deps are optional here

react-native/packages/react-native/package.json

Line 87 in 648db0a

"peerDependenciesMeta": {

[dannyhw]

well they are listed as optional via the peer dep meta, though yes technically could be removed from here. The counterpoint though is that by default we do include the full ui and if you don't have these installed you'll get a weird experience where the menu doesn't open

the controls package does use bottom-sheet though for a text-input component when the bottomsheet is open

a future version will likely move the default ui to a more minimal one, maybe just relying on safe-area-context (not decided yet).

[dannyhw]

released 9.0.18 with the liteMode option https://github.com/storybookjs/react-native/releases/tag/v9.0.18

[douglasjunior]

well they are listed as optional via the peer dep meta, though yes technically could be removed from here. The counterpoint though is that by default we do include the full ui and if you don't have these installed you'll get a weird experience where the menu doesn't open

the controls package does use bottom-sheet though for a text-input component when the bottomsheet is open

a future version will likely move the default ui to a more minimal one, maybe just relying on safe-area-context (not decided yet).

Here I tested the text-input to edit the Button label in the lite bottom sheet (without gorhom installed) and it works.

About the peer dependencies, why not keeping the "gorhom bottom sheet" only in the @storybook/react-native-ui? As it is installed by default too.

Screen_Recording_20250721_095752_IpWhitelabelApp.mp4

[dannyhw]

I can make this change in the next release probably. Is it causing any issue? I think its mostly ignored since its listed as optional.

[douglasjunior]

I can make this change in the next release probably. Is it causing any issue? I think its mostly ignored since its listed as optional.

No issue, just warnings during install.