React-Native: Fresh install doesn't show storybook elements (Android Only!)

[Billydubb]

I am using npm version: 3.10.8, node version 6.9.0 and @storybook/cli and getstorybook version 3.1.9

On a fresh react-native init project I install storybook by running getstorybook in the directory.

The install completes fine and the storybook directory is created inside my project root directory.

Now I start storybook with npm run storybook
The site is set up at localhost:7007 correctly, but none of the stories in the storybooks/stories directory show up in the left panel plus I get 2 warnings in the console:

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

According to the documentation here I am not supposed to run: react-native run-android to see the stories on my device or emulator. However, that gives me an error in the emulator saying 'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'

[shilman]

@Billydubb 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?

[Billydubb]

At step 3. I get the error 'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'.

[Billydubb]

I just tried the same sequence of steps on iOS and there it works without a problem. This seems to be somehow Android related.

[Billydubb]

Got help in the storybooks slack channel.

After step 3 you have to run
adb reverse tcp:7007 tcp:7007
to route any traffic to the 7007 port on the emulator to the 7007 port on the local machine.

[Gongreg]

@Billydubb, I got into the same issue today. Maybe it would be nice to write about this somewhere in readme?

[Billydubb]

I already did add it to the readme:

"If you are using Android and you get the following error after running the app: 'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007', you have to forward the port 7007 on your device/emulator to port 7007 on your local machine with the following command: adb reverse tcp:7007 tcp:7007

[Gongreg]

@Billydubb Awesome! :) I will close the issue then.

[pashute]

where do I write that "following command" of adb ...?

[Billydubb]

@pashute In the terminal

[pashute]

My problem was that I was running yarn start storybook instead of yarn run storybook.

[amed]

I am facing the same issue, getstorybook is installing react configurations, even the app is react-native.
The app is created by $ react-native init

"react": "16.3.1",
"react-native": "0.55.4"

maybe I am holding it wrong 😮

[Billydubb]

@amed Did you do the adb reverse command?

[amed]

Yes, the issue is with installing storybook.