Stories not displaying in the web browser- react-native

[bacancy-swaroopa]

If you are reporting a bug or requesting support, start here:

Bug or support request summary

I created the stories and when running on browser then when I click on the any story
the stories were not displaying in the right pane of the browser
Actually they should display respective stories.

Steps to reproduce

I installed the storbook and run npm run storybook

Here is the screen shot:

Actually commentView story is selected but there is nothing displaye din the right pane

tis is what I have in package.json file

"@storybook/addon-storyshots": "^3.2.3",
"@storybook/react-native": "^3.3.15",
"@storybook/addon-actions": "^3.3.15",
"@storybook/addon-links": "^3.3.15",
"@storybook/addons": "^3.3.15"

In app it is working fine but when coming to browser it is not displaying

[igor-dv]

React native stories can't be shown in the browser with an out-of-the-box use case - because they are react-native. As you can see in the first Welcome to storybook screen or in the Readme, you should perform more steps to see them on the device.

If you do want to see them in the browser, you may set up the react-native-web. But you should understand that it won't be real native stories.

P.S. Note for the team: we should probably add some big red explicit description to the welcome screen and to the docs, so people won't get confused.

[danielduan]

I personally think the web UI is of little value to most developers. We should just default to device UI only - #3278

[joegoodall1]

Quick question:

I've got everything up and running for React Native but was wondering if it was possible to have 2 simulators open at the same time, one with the storybook UI and one with the app being developed UI?

If this isn't possible, does it mean I have to shut down the packager to switch between seeing my app and storybook on the simulator?

[danielduan]

@joegoodall1 you'll need to run two different packagers, one with the storybook script and the other with whatever you use to bundle your app

[joegoodall1]

Thanks for replying so quickly @danielduan.

Can you give me some pointers on how to implement this? Is there a link to an example that is set up and working?

I did try the link here to use the haul packager but that was unsuccessful in running Storybook and our app at the same time.

[danielduan]

the long version: RN or Haul can't watch the same directory without some weird configurations. the easiest way to accomplish this is to separate your shared components into a separate package, installed or symlinked between two different projects and folder structures. you could try running one in Haul and the other with RN packager and trying different configurations as well.

the easiest way is to just run them both in the same app with one bundler, with the main app providing an entry point into storybook via a button or link of some sort.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!