The stories do no not load on React Native Tutorial

[akhudairy]

Describe the bug
The stories on left pane they keep loading forever and I see no errors on console. I am just following the basic steps in first section of the react native tutorial (https://www.learnstorybook.com/intro-to-storybook/react-native/en/get-started/).

Please keep in mind that React.JS tutorial was working just fine for me.
I am using a mac book with Catalina 10.15.4 (19E287).
React native projects on its own is working fine on my laptop

To Reproduce
Steps to reproduce the behavior are same as in tutorial:

1. expo init --template tabs taskbox
2. cd taskbox
3. npx -p @storybook/cli sb init --type react_native
4. yarn add -D @storybook/addon-ondevice-actions
5. Change storybook/rn-addons.js to (import '@storybook/addon-ondevice-actions/register';)
6. yarn storybook
7. notice in screenshot that stories never load on left pane

Expected behavior
That components and stories load on left pane after running storybook server

Screenshots
https://ibb.co/t4SMt5m

System:
Environment Info:

System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
Binaries:
Node: 14.4.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Browsers:
Chrome: 83.0.4103.61
Safari: 13.1
npmPackages:
@storybook/addon-actions: ^5.3.19 => 5.3.19
@storybook/addon-links: ^5.3.19 => 5.3.19
@storybook/addon-ondevice-actions: ^5.3.19 => 5.3.19
@storybook/addons: ^5.3.19 => 5.3.19
@storybook/react-native: ^5.3.19 => 5.3.19
@storybook/react-native-server: ^5.3.19 => 5.3.19

[abdullahizzuddiin]

Hi mate,
Have you solved this problem?
I think I got same problem too.

[akhudairy]

Hi mate,
Have you solved this problem?
I think I got same problem too.

No Sorry not yet. I think some instructions are missing some how.

[Esxiel]

I'm not sure what's wrong, but did you remember to react-native run-ios(sorry I'm not sure about the expo equivalent) after your yarn storybook? Like did you load up your app on a simulator/device?

[akhudairy]

Hi @Esxiel ... Just tried it. It is trying to load the main application and it breaks while it's doing that, but it is not trying to load storybook.

I also find this weird, as I followed exactly the steps of the tutorial so why is the main app also breaking. It breaks at line
(AppRegistry.runApplication('main', { rootTag });)
with error:
(Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.)

[mdbiscan]

I'm having the same issue. I tried it with a fresh expo and a fresh vanilla react native app and couldn't get either to work following both the auto and manual setup instructions.

[dannyhw]

Will look into this soon, I think the most likely cause is that something is incorrect on the tutorial because it should be working.

[dannyhw]

also seems to be related to #55

[dannyhw]

You should run storybook server and then after run the react native app then if you refresh the webpage for react native server the stories should load.

[dannyhw]

I found there is an issue when using a real android device with expo. It can be resolved by specifying your port and host explicitly

When you start up the server you should see something with your IP here
On your network: http://xxx.xxx.x.xx:7007/

Take this IP and set it explicitly as the host and then the storybookui should be able to reach the server

In code

const StorybookUIRoot = getStorybookUI({
  host: "192.111.1.11", // replace this with your local ip address
  port: "7007"
});

In package.json "storybook": "start-storybook -p 7007 -h 192.111.1.11"

replace 192.111... with your ip address

This should resolve the connection issues

If not you can try doing adb reverse tcp:7007 tcp:7007 as well

[soullivaneuh]

@danny-andrews This indeed works.

According to this info on storybook run:

╭───────────────────────────────────────────────────╮
│                                                   │
│   Storybook 5.3.23 started                        │
│   4.68 s                                          │
│                                                   │
│    Local:            http://0.0.0.0:7007/         │
│    On your network:  http://192.168.1.13:7007/    │
│                                                   │
╰───────────────────────────────────────────────────╯

Storybook is able to detect the network IP. It would be great if this information can be transmitted and use as default. 👍

[dannyhw]

@soullivaneuh I appreciate that this can be frustrating when following the tutorial, however in my opinion the tutorial shouldn't even include the server because it's not required and mostly creates confusion about how storybook works.

If someone can contribute a PR with a fix for this connectivity issue I'll happily accept it, however currently my focus is on making 6.0 happen, so I likely won't be able to work on this fix myself unless it's a really quick fix. I'll bear this in mind for a hot-fix/patch in the future though.

Thanks for the feedback :)

[soullivaneuh]

the tutorial shouldn't even include the server because it's not required and mostly creates confusion about how storybook works.

Why? After understanding it, I found it great to have the control of our Storybook app directly from a web browser! 👍

I understand your focus on Storybook 6, however I found a quite simple workaround thanks to internal-ip package.

On your app.config.ts file:

import { ExpoConfig } from '@expo/config';
import config from '@company/apps-config';
import internalIp from 'internal-ip';

export default (): ExpoConfig => ({
  ...config,
  name: 'Company components',
  slug: 'company-components',
  extra: {
    ...config.extra,
    storybookHost: process.env.STORYBOOK_HOST || internalIp.v4.sync(),
  },
});

And then on your Storybook app entrypoint:

const StorybookUIRoot = getStorybookUI({
  host: Constants.manifest.extra.storybookHost,
});

Then my local network IP is detected and I can still override the variable if I want:

STORYBOOK_HOST=1.2.3.4 npm run start

You may think about that while integrating v6 support! 😉

[dannyhw]

Personally I've never been a user of the server and the main issue for me is that it's not portable. Something important to storybook is non developers having access to the storybook so it should be portable.

Sure the server has some nice features, however I see more potential in making the on device UI better.

The reason I say it creates confusion is that many times when speaking to users they have trouble understanding what is the difference between the on-device ui and the server ui and why you might want to use the server. If you already are an experienced user it may seem obvious the difference but for someone getting started I think it would be clearer if the tutorial stuck to one use-case (on-device) with a later section about the server.

Anyway thanks for your your suggestion, I will consider it. If you have time and can make those changes into a PR I can test it this week. However I'm not sure if we should add another dependency, if we can do it without the internal-ip package that would be preferable.

Thanks again :)

[jo-finndian]

I'm facing the same problem. The server is running, but the stories never load...

The other problem I'm facing is that HomeScreen does not exist in the tutorial download, and neither do some of the initial components needed. It's almost as if the tutorial template is for a different tutorial all together..? The files also do not work unless .tsx is used instead of .js, which is what the tutorial asks files to be created as.

Any solutions or insights?

[dannyhw]

@jo-finndian the expo template changed a lot since the tutorial was made and so the tutorial is somewhat outdated. I would suggest following the getting started steps here on the repo or finding a different tutorial instead. I plan to work with the maintainers of that tutorial to create a new one for 6.0 once it's done.

I'm going to close this issue and ask that any further comments are directed to #55 since the issues are almost exactly the same. Let me know if you see a reason to leave this open. Or if you have a different issue then open a new one.

[hariszulfiqar054]

I found there is an issue when using a real android device with expo. It can be resolved by specifying your port and host explicitly

When you start up the server you should see something with your IP here
On your network: http://xxx.xxx.x.xx:7007/

Take this IP and set it explicitly as the host and then the storybookui should be able to reach the server

In code

const StorybookUIRoot = getStorybookUI({
  host: "192.111.1.11", // replace this with your local ip address
  port: "7007"
});

In package.json "storybook": "start-storybook -p 7007 -h 192.111.1.11"

replace 192.111... with your ip address

This should resolve the connection issues

If not you can try doing adb reverse tcp:7007 tcp:7007 as well

This solution work for me on real android device

[csauvage]

Any solution on iOS, I'm still having this issue :(

[dannyhw]

@csauvage this issue is a duplicate, please check #55

The issue is not related to android or ios really since the server is separate. I've never seen a case of this that wasn't fixed by setting the host and ip correctly. So if you check my comments on #55 or in the comment above by hariszulfiqar054 then it should be fixable. Also make sure that storybook is open on the device and bear in mind that the server has no story preview.

You probably don't need to use the server unless you need it for a specific use case. My suggestion is to stick to the on device ui without the server until you have a need for the server features.