Can't seem to find .storybook/main.js

[LiamKarlMitchell]

.storybook/main.js does not exist when trying to add this addon to a react expo app. Wanting to use it to have both a web view and in device view.

These files do exist. storybook/addons.js storybook/rn-addons.js

Storybook 5.3.23

[LiamKarlMitchell]

With -f it will force installation for react app.

npx sb init --type react -f

Then I can see the config file for .storybook/main.js But it still seems to load the storybook directory if I just run yarn storybook had to start storybook with different script.

    "start-storybook-web": "cross-env NODE_OPTIONS=--openssl-legacy-provider ./node_modules/@storybook/react/bin/index.js",
    "build-storybook-web": "./node_modules/@storybook/react/bin/build.js"

This guide helped I suppose https://dev.to/ugglr/step-3-setting-up-storybook-with-react-native-web-show-your-mobile-components-the-browser-12ke

[dannyhw]

@LiamKarlMitchell if you want to use this react-native-web addon you should be using npx sb init --type react and add the addon-react-native-web addon.

in this blog I have a getting started guide that might help https://www.dannyhwilliams.co.uk/introducing-react-native-web-storybook

The native device react-native storybook has a different setup.

[LiamKarlMitchell]

Thanks @dannyhw , I managed to get it showing I think, however do you also know of example with nativewind to make it show the tailwind in browser? Looked at the example in the other issue but couldn't seem to get it to work. I mean tailwind is loaded in the react storybook but the class names from classNames="bg-blue-200" for example are not present it's like they get minified or something into one class name.

[dannyhw]

@LiamKarlMitchell I've been using nativewind myself and not having issues. Let me see if I can find that example.

The one I reference in #45 is what I based my setup on. Alternatively if you have a reproduction repository I can help debug the issue.

[LiamKarlMitchell]

Thanks @dannyhw , the example was linked by you here: https://github.com/storybookjs/addon-react-native-web/issues/45 But I can't seem to figure out why the class names for tailwind are not on the elements when I view them in storybook. I did have to play with some package.json things to get it to run up.

Sorry to hijack the issue :D, can probably close this one now and discuss on #45 since its solved. My reasoning for making this issue was because I had installed storybook and it set up automatically for react native, but that one only shows me the components on device, not for the web view as well. I was hoping to have story book as something I could use for web + mobiles.

  "resolutions": {
    "autoprefixer": "^10.4.12",
    "postcss-preset-env": "^7.2.3",
    "postcss": "^8.4.19"
  },

[dannyhw]

Well setting up for both requires a bit more work but there are some templates i made for that

https://github.com/dannyhw/expo-template-storybook

And

https://github.com/dannyhw/react-native-template-storybook

[LiamKarlMitchell]

Thanks Danny, I'll have to give these a go :)

[dannyhw]

Going close this as resolved, if you would like to reopen just let me know.