Single story for React Native and React (react-native-web)

[andrestone]

Is your feature request related to a problem? Please describe. I'm trying to achieve a setup where I can load both React Native storybook (on device) and React storybook (via react-native-web) using the same story source. It seems like, as of today, it's not possible since storiesOf has a different implementation for each platform (React / React Native).

Describe the solution you'd like Being able to have a single story for both platforms in a single storybook project.

Describe alternatives you've considered I considered (and tried) conditionally importing storiesOf based on the target platform, but it only works if I have two different storybook projects because React instances overlap and cause conflict otherwise.

I also considered waiting for CSF support for React Native, but I'm not sure if it will allow this kind of setup out of the box.

Are you able to assist bring the feature to reality? no

[dannyhw]

I'm not totally sure about this, I've heard about some people having success with react native for web however it's not something I've tried. If anyone can offer help or more information about how this could work that would be great.

[dannyhw]

This is actually really easy to acheive if you are using expo because it just works out of the box see in this snack.io example https://snack.expo.io/@dannyhw/expo-storybook-example

[mohsinulhaq]

@andrestone any luck with this?

[andrestone]

@andrestone any luck with this?

Not that I recall.

[dannyhw]

@andrestone @mohsinulhaq Storybook works with react native web prior to version 0.12.0

Version 0.12.0 of react native web removed deprecated components that we have been using (datetimepicker) even though it's not removed yet in react native.

[mohsinulhaq]

I was finally able to achieve this by installing both @storybook/react and @storybook/react-native in my project. I run the native storybook via react-native run-ios and the web storybook via start-storybook.

[dannyhw]

@mohsinulhaq that really shouldn't be necessary if you are using react-native-web. What it sounds like is that you are running a web storybook and a react native storybook separately.

[mohsinulhaq]

I'm running the CLIs separately, but the source of the stories for both of them is the single React Native stories folder.

[dannyhw]

I'm not sure I understand correctly however if you see the link I commented above there is an example of storybook working via react-native web and it doesn't require @storybook/react. However as you see with #120 there is an issue with v0.12.0+ of react-native-web since it removed components. This also means that it doesn't work for expo 39 also since they upgraded to react-native-web v0.13.0+ in the latest version (only the web part doesn't work).

[mohsinulhaq]

Yes, I understand with older versions of RNWeb, Expo, and storybook/react-native work properly. But since the newer version broke this, I have now switched to native app rather than an Expo one.

I'm talking about that setup.

[dannyhw]

@mohsinulhaq I see, well you might be able to get the Expo one working if you just downgrade the react-native-web dependency. Otherwise I'd be interested to see how this setup you're describing is working, is the code public?

[mohsinulhaq]

It's not public, but here's the gist of what I did:

• Initialized react-native storybook (npx -p @storybook/cli sb init --type react_native)
• Initialized react storybook (npx -p @storybook/cli sb init --type react)
• Native config is left untouched.
• For web, I added the following webpack override to .storybook/main.js:

  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-native$': 'react-native-web',
      '@storybook/react-native': '@storybook/react',
    };
    return config;
  },

[dannyhw]

@mohsinulhaq thats very interesting I've not seen that approach before, thanks for sharing that 👍

[aliceInWahed]

Hi @mohamedmansour, is that possible for u to push the code as public?

I was not sure how do I add the web pack into my project while was created natively following the @storybook/react-native tutorial (NOT expo)

While browsing around, came across this article. https://medium.com/@mikecripps/using-storybook-with-react-native-and-react-native-for-web-51b32f572b1c which created a storybook/react project using React Native and React Native for Web. However checking on the repo > found out that there is no @storybook/react-native library was installed or used. it is created. using @storybook/react and RN components and displaying using react-native-web. Wonder is this what u tried?

while I was trying to install @storybook/react into my existing SB project. it is throwing error saying storybook has been installed in the path.

So I manually changed the package.json and npm install again to get the package installed.

Any reply is appreciated. Thanks in advance! :)