Storybook: Stories doesn't show up in the browser

[Hunsu]

I followed the instructions in read me to add storybook to my application (not CRNA application). When I run my application I get blank page and the basic stories doesn't show up in the browser.

[danielduan]

Can you share the code you have in /stories?

[Hunsu]

It the code generated by getStoryBook. I didn't change anything but I can share if you want. I wanted to try storybook with my app based on https://github.com/junedomingo/movieapp

[ritz078]

Same is happening for me.

[matt-oakes]

Is there anything in the console of the browser window?

[codecitrus]

I had this issue, but turns out I forgot to add configure(loadStories, module) at end of .storybook/config.js

[ritz078]

@matt-oakes There is no error in the console.

[pckhoi]

This is also happening for me (CRNA app). I just started playing with storybook + react native yesterday. Below are my dependencies and devDependencies:

  "devDependencies": {
    "@storybook/react-native": "3.1.8",
    "jest-expo": "~18.0.0",
    "react-native-scripts": "0.0.40",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "dependencies": {
    "expo": "^18.0.3",
    "react": "16.0.0-alpha.12",
    "react-dom": "16.0.0-alpha.12",
    "react-native": "^0.45.1"
  }

@codecitrus it seems latest build of storybook only has index.android.js and index.ios.js and no config.js in storybook folder. And configure is called alright, I've made no changes to those files.

@matt-oakes there are some warnings about Stateless function components cannot be given refs. but that's it.

[pckhoi]

Just found out the solution - I have to replace localhost with my pc's ip address here:

const StorybookUI = getStorybookUI({port: 7007, host: 'localhost'});

Working perfectly now!

[slorber]

This is related to this existing issue:

https://github.com/storybooks/storybook/issues/1222

I hadn't time to work on it but it should not be too hard if the dev setup is now ok

[josefernand]

Same problem with a clean CRNA app and following the instructions to add storybook. No stories are shown in the left panel even replacing localhost with the IP address.
I see these warnings in the browser console:

warning.js?6327:35 Warning: Failed prop type: The prop `selectedKind` is marked as required in `Stories`, but its value is `undefined`.
    in Stories (created by LeftPanel)
    in LeftPanel (created by Container(LeftPanel))
    in Container(LeftPanel) (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in div (created by Layout)
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Container(LeftPanel)`.
    in LeftPanel (created by Container(LeftPanel))
    in Container(LeftPanel) (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in div (created by Layout)
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Container(ShortcutsHelp)`.
    in ShortcutsHelp (created by Container(ShortcutsHelp))
    in Container(ShortcutsHelp)
    in div

[shilman]

@josefernand I just got it working in a fresh CRNA app, so let's figure out what's going wrong. Your symptoms seem to be identical to: https://github.com/storybooks/storybook/issues/1567

Duplicating my response here:

It's a little wonky. What's supposed to happen is that:

1. You run storybook and open it in http://localhost:7007
2. You shouldn't see any stories to start out
3. You run it on your device and it connects to the storybook server on localhost:7007
4. The stories show up in the browser, and on your device

Let me know if that works for you?

Also I've submitted a PR to address #1222 referenced above, should simplify things a bit once it's merged/released: https://github.com/storybooks/storybook/pull/1568

[josefernand]

@shilman It's working now thanks a lot!

[shilman]

@josefernand was it just a matter of following those instructions? or did you have to do something else?

[josefernand]

@shilman my app was not loading properly on the device, so the stories were not loaded either. Following your instructions, I finally realized that.

[danielduan]

Please reopen if there's still an issue.

[tibbus]

@shilman I have tried that on a clean install of react-native init , there are no stories after I start the simulator.

Do I need to do any other changes ? everything is fresh I didn't changed nothing.

[ghost]

I got the same problem as @tibbus

[tibbus]

As far as I remember my issue was that I started the simulator before the storybook server. You need first to start the storybook and then run react-native run....

[jialiwei]

@tibbus my issue is exactly the same with you.And with the right sequence ,it works...

[swaroopa94]

@Hunsu Did you solve the issue I got the same issue he stories were not displaying in the browser.
I have two terminals running in parallel also
and babel-core is of version 6 only
I created the app using react native init
Can you suggest me how to solve this.

[pibo]

Same problem.

[Hunsu]

@swaroopa94 Yes the issue was solved for me a while ago. I don't really use it right now so I can't say.

[swaroopa94]

@Hunsu you did not remember what you did?

[nivort]

The official guid only tell us to run 'npm run storybook', but it's very important for react native developers to know when to run this command, and where the components would shows.
For me:
**1. Stop the application, make sure port 8801 is not in use.

1. run 'npm run storybook'
2. run 'react-native run-ios'**
   Then the components would shows on the ios simulator. The broswer only show me a list of the control.
   Does anyone find a way to show the controls on browser?

[pgonzalez-santiago]

Hello all, I am facing a similar issue. When I run npm run storybook I always see an empty screen in http://localhost:7007 The only way for me to see the stories is modify my index.js of the application to register the StorybookUIHMRRoot component instead of my App component:

Like this: AppRegistry.registerComponent('Lisa', () => StorybookUIHMRRoot)

What should I do to enable the stories without changing the index of my application?

UPDATE
Due to I use reactotron I just added this line into my app

console.tron.storybookSwitcher(StorybookUIHMRRoot)(App)

[marexv]

Does anyone find a way to show the controls on browser?

@nivort I think it can't be done, take a look at #7723

[jasongaare]

Sorry I know this is an old issue - but I'm scratching my head following the React Native tutorial at learnstorybook.com because all the screenshots seem to imply that you should see the elements in the browser too: https://www.learnstorybook.com/intro-to-storybook/react-native/en/simple-component/

Is there some magic I can't figure out? All I see is the PreviewHelp.js file from react-native-server