Use @storybook/react stories with @storybook/react-native?

[fo-fo]

Is your feature request related to a problem? Please describe.
I'm trying to use Storybook with React Native and react-native-web but ran into some problems. I want to use the same components (built from the React Native primitives) in the web Storybook (for easy viewing in a browser) and the mobile Storybook (for testing on mobile devices).

The main problem is that if I want to define stories for React Native on mobile, I have to import storiesOf from "@storybook/react-native", but if I want to define stories for React Native on web (with react-native-web), I have to import storiesOf from "@storybook/react".

Is there something fundamental that stops the configure function from "@storybook/react-native" from accepting stories defined by storiesOf from "@storybook/react"? I tried it and couldn't get it to work. Conceptually it seems like something that shouldn't be dependent on React Native.

Describe the solution you'd like
configure imported from "@storybook/react-native" should be able to work with stories defined using storiesOf from "@storybook/react".

Describe alternatives you've considered
I was able to sort of kind of work around this by importing storiesOf from both places, and by switching between them at runtime based on React Native Platform, i.e., const storiesOf = Platform.OS === "web" ? storiesOfReact : storiesOfReactNative;. However, this approach pulls all of React Native Storybook into the web build for no reason, and the build actually breaks because of this. (I was able to work around the build breakage, but it wasn't pretty.)

As a side note, the React Native "in-device" Storybook doesn't seem to work with react-native-web, it would be cool if it did... And it would also kind of solve my problem too, because then I'd be able to view the stories in a browser using the React Native Storybook, although I'd rather use the web Storybook.

Are you able to assist bring the feature to reality?
Probably not right now, as I'm not well versed with Storybook.

[MrLoh]

@fo-fo here's my example of getting what you are talking about to work: https://github.com/MrLoh/universal-react-storybook

I am requiring from .web.js and .native.js files to solve the issues you describe above. It would be nice if there would be a simple @storybook/react-primitives package that encapsulates this.

My main issue now is more that I would like to use a merged storybook server to display the react-native-web stories and control the device to show the same stories.

[fo-fo]

@fo-fo here's my example of getting what you are talking about to work: https://github.com/MrLoh/universal-react-storybook

Thanks for this, .web.js and .web.jsx in config.resolve.extensions was the missing part of the puzzle for me!

[MrLoh]

@fo-fo glad I could help. You should probably close the issue since it’s resolved.

I would like a deeper integration for react-native(-web) libraries as well. I opened a separate issue for that: #5886

[fo-fo]

It's not a perfect solution, as I feel that fundamentally the stories should have a dependency on React, not React Native, but the workaround is good enough for me so so I'll close this.