React Native server stories list infinitely loading

[bouncycatt]

Hello! I had a problem with loading Storybook web explorer, it doesn't load the left menu. But on a device Storybook works well. I met the problem both during Intro React Native Storybook Tutorial and in my bare workflow project. It just doesn't build a web version.

Steps

1. In a terminal to a project folder: npx -p @storybook/cli sb init --type react_native yarn add -D @storybook/addon-ondevice-actions

2. In storybook/rn-addons.js import '@storybook/addon-ondevice-actions/register';

3. In the terminal I tried this and reverse order: yarn storybook yarn start a – both Android simulator and a real Android device, Storybook works well on both options but does not in a browser.

4. On yarn storybook the answer:

yarn run v1.22.4
$ start-storybook -p 7007
info => Loading presets
info => Loading custom manager config.
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 5.3.18 started                         │
│   4.39 s                                           │
│                                                    │
│    Local:            http://localhost:7007/        │
│    On your network:  http://192.168.0.104:7007/    │
│                                                    │
╰────────────────────────────────────────────────────╯

From the tutorial it should be this

But I have this result on any projects and environments I tried

Environment Info: System: OS: macOS Mojave 10.14.6 CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz Binaries: Node: 12.16.3 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn Browsers: Chrome: 81.0.4044.138 Firefox: 76.0 Safari: 12.1.2 npmPackages: @storybook/addon-actions: ^5.3.18 => 5.3.18 @storybook/addon-links: ^5.3.18 => 5.3.18 @storybook/addon-ondevice-actions: ^5.3.18 => 5.3.18 @storybook/addons: ^5.3.18 => 5.3.18 @storybook/react-native: ^5.3.18 => 5.3.18 @storybook/react-native-server: ^5.3.18 => 5.3.18

Also, I tried with the older 5.2.1 Storybook version, an Android simulator, and an Android phone via USB, Ubuntu, manual server setup, but the same error.

I also set up React Storybook Tutorial for a try to see if there is this error there. No problem, all works properly with React.

[JeffGuKang]

Did you try it?

1. Connect Android device
2. Run storybook server, you need to check $ (adb reverse tcp:7007 tcp:7007 || true) && start-storybook working well.
3. Run react native to your device
4. Reload your app in debug mode

[akhudairy]

Hi @bouncycatt .. How do you run the story book on the mobile or simulator? I have the same problem on web version and I did follow the tutorial steps but I feel something is missing. For Android and IOS .. when I run "yarn ios" for example it runs the app on the ios but not the story book, so am not sure which commands runs the storybook on the device.

[abdullahizzuddiin]

Hi, anyone has solved this issue?

I got same problem too.

[bouncycatt]

@JeffGuKang Thanks. I tried it but the problem is the same.

[bouncycatt]

@akhudairy Hi! If I'm not mistaken, a Storybook viewer appeared on a device when I tried previous versions of Storybook. Unfortunately, I don't remember. Today I retook all the tutorial steps with abd command but nothing happened.

[Esxiel]

@akhudairy You have to render the StorybookUIRoot. There's a part in https://storybook.js.org/docs/guides/guide-react-native/ where it says

... StorybookUI is a RN View component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.

This component is the "storybook on the mobile". Usually I'd have my entry point index.js's AppRegistry render out this component instead of the app component(using an if conditional check in regards to .env). Some people put it on a different screen in their navigation, etc.

[Esxiel]

@bouncycatt I'm using storybook on iOS so I can't comment much but my web storybook always looks like this when my app(on the simulator) does not touch/run the getStorybookUI function. This happened to me initially because I didn't know I had to import and render it somewhere in my app(see the comment I made above).

I'm not 100% sure if this is the cause since I don't really know the inner workings on getStorybookUI/ how our app connects to the storybook react-native-server.

[akhudairy]

hi @Esxiel ... thanks i will give that ago by adding storybook to my other project using the manual steps.

But the idea is I was following the story book official React Native tutorial. and their app.js file looks very different compared to these manual steps ... here is the code they ask you to add

// App.js async function loadResourcesAndDataAsync() { try { SplashScreen.preventAutoHide();

// Load our initial navigation state
setInitialNavigationState(await getInitialState());

// Load fonts
await Font.loadAsync({
  ...Ionicons.font,
  'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
  percolate: require('./assets/icon/percolate.ttf'),
  'NunitoSans-Bold': require('./assets/font/NunitoSans-Bold.ttf'),
  'NunitoSans-Italic': require('./assets/font/NunitoSans-Italic.ttf'),
  NunitoSans: require('./assets/font/NunitoSans-Regular.ttf'),
});

} catch (e) { // We might want to provide this error information to an error reporting service console.warn(e); } finally { setLoadingComplete(true); SplashScreen.hide(); } }

[Esxiel]

Um @akhudairy , I might be misunderstanding you, but you are referring to https://www.learnstorybook.com/intro-to-storybook/react-native/en/get-started/ right?

You are right in saying that the code in manual steps guide is very different with the App.js in the tutorial, however you'd benefit from understanding a few misconceptions you have...

1. The part of App.js you quote is about is solely about loading up fonts and hiding the splashscreen after it's done, it has no relation with implementing Storybook, as they said, it is to To match the intended design, you'll need to download both the font and icon directories and place them inside the assets folder.Also, remember that this tutorial of theirs rely on using that template project from expo, it's not really a tutorial meant to show you how to put storybook in your own project.
2. As I stated in my previous post, I had my entry point directly render out StorybookUI, however some people render the StorybookUI within a different screen inside a navigator, this is what the react native storybook tutorial does. The part from In order to see Storybook in React Native we're going to update screens/LinksScreen.js to the following: ... there on.

I apologize to the maintainers for veering off-topic.

[dannyhw]

Was anyone able to find a workaround? or the config that is needed to fix this.

[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.

[allen-hsu]

I have the same issue, but, I resolve that, plz check your rn storybook port and storybook port are the same, in my case, default storybook server port is 6006, I change to 7007, or you can follow those document: https://github.com/storybookjs/react-native#storybook-for-react-native

getStorybookUI Options port: Number (7007) -- port to use

[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 ip address with your local ip address
  port: "7007"
});

In package.json "storybook": "start-storybook -p 7007 -h 192.111.1.11" (replace this ip address with your local ip address port: "7007")

This should resolve the connection issues

This might also help some people if the above isn't working

adb reverse tcp:7007 tcp:7007

[chadmott]

having the same issue... following the tutorial (twice) exactly as written, and the stories are perpetually loading for react native.

React tutorial is working fine.

[dannyhw]

@chadmott are you using a simulator or a real device or web?

The tutorial is needing some updates so it might not be 100% accurate. Also the auto setup has a bug currently regarding dependency versions.

[dannyhw]

@chadmott check your package.json if there are any storybook packages with version 6.0 or above please downgrade them to 5.3.21 since we don't yet support storybook v6 with react native.

[chadmott]

thanks @dannyhw but that did not solve my issue. I'm just trying to learn Storybook (hence the tutorial) so I'm afraid I don't know why its broken. For now I'll just use the react tutorial

[dannyhw]

@chadmott the part where it says to use "yarn start" should be "yarn web" that should fix the issue.

edit: Actually the server will continue to show the loading bars but actually that is fine because the stories will only get loaded once you do the later steps in the tutorial. This is because the storybookUI needs to be loaded for the server to receive the stories list.

[impactro]

ual, this is incredible, it worked now, thank you very much for your help. I'm using Android emulator BlueStacks, all right now! thank you very much for your help

[dannyhw]

@impactro great to see you were able to get it working :)

[Shhhhhreyas]

Hello! I had a problem with loading Storybook web explorer, it doesn't load the left menu. But on a device Storybook works well. I met the problem both during Intro React Native Storybook Tutorial and in my bare workflow project. It just doesn't build a web version.

Steps

1. In a terminal to a project folder: npx -p @storybook/cli sb init --type react_native yarn add -D @storybook/addon-ondevice-actions
2. In storybook/rn-addons.js import '@storybook/addon-ondevice-actions/register';
3. In the terminal I tried this and reverse order: yarn storybook yarn start a – both Android simulator and a real Android device, Storybook works well on both options but does not in a browser.
4. On yarn storybook the answer:

yarn run v1.22.4
$ start-storybook -p 7007
info => Loading presets
info => Loading custom manager config.
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 5.3.18 started                         │
│   4.39 s                                           │
│                                                    │
│    Local:            http://localhost:7007/        │
│    On your network:  http://192.168.0.104:7007/    │
│                                                    │
╰────────────────────────────────────────────────────╯

From the tutorial it should be this

But I have this result on any projects and environments I tried

Environment Info: System: OS: macOS Mojave 10.14.6 CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz Binaries: Node: 12.16.3 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn Browsers: Chrome: 81.0.4044.138 Firefox: 76.0 Safari: 12.1.2 npmPackages: @storybook/addon-actions: ^5.3.18 => 5.3.18 @storybook/addon-links: ^5.3.18 => 5.3.18 @storybook/addon-ondevice-actions: ^5.3.18 => 5.3.18 @storybook/addons: ^5.3.18 => 5.3.18 @storybook/react-native: ^5.3.18 => 5.3.18 @storybook/react-native-server: ^5.3.18 => 5.3.18

Also, I tried with the older 5.2.1 Storybook version, an Android simulator, and an Android phone via USB, Ubuntu, manual server setup, but the same error.

I also set up React Storybook Tutorial for a try to see if there is this error there. No problem, all works properly with React.

I found the solution. Same problem happened with me.

Please start your story book with this argument -> -h 0.0.0.0. The whole command would be -> start-storybook -h 0.0.0.0, You can also change it in your "package.json" file, so that you can just use "yarn storybook".

After the server starts, if the browser says "This site can't be reached", for the ip 0.0.0.0, just open the server with your local ip address, for example, my address is 192.168.45.150, so I would open it with 192.168.45.150:7007, (I have my server running on 7007 port, if you have it bind to some other port, please use that).

There seems to be some network issue with storybook and it runs only on your localhost if the command start-storybook is used without "host" argument. As a result the emulator or your device can't find the storybook server, hence no stories are displayed. You can see below the screenshot, I can see the stories now.

Also no need of writing any port or host in getStorybookUI({}). It will work without it.

Found the major hint in this reply.

EDIT 1: Okay.. sometimes we do need to mention port and host in getStorybookUI({}).

[dannyhw]

@Shhhhhreyas thanks for sharing, hopefully this will help others with the same problem 🙌

[JeffGuKang]

I am using a custom script for node env as STORYBOOK=true react-native start And --reset-cache option is necessary when I run STORYBOOK=true react-native start if I ran react-native start before.

const EntryApp: NavigationContainer =
  process.env.STORYBOOK
    ? require('./storybook').default
    : createAppContainer(RootNavigator)

[EsackN]

@Shhhhhreyas I followed the steps as you mentioned, still getting the same error.

[Shhhhhreyas]

@Shhhhhreyas I followed the steps as you mentioned, still getting the same error.

@EsackN Did you add host in getStorybookUI({}). Example -> getStorybookUI({host:"192.168.43.66"}); (your local IP or the one which storybook mentions in the box after starting)

This function is used in index.js inside storybook folder in your project.

Also you have to start the app in your phone, without it stories won't show.

[EsackN]

@Shhhhhreyas Yes, I added host in getStorybookUI({}). Also please clarify with the following.

I refered this link: https://stackoverflow.com/questions/60696774/how-can-i-build-my-react-native-storybook-to-web

IS that right?

[Shhhhhreyas]

@EsackN I think the link maybe correct I didn't setup it this way. It seems long and lot of stuff has to be done.

I used the below steps ->

# Add Storybook: npx -p @storybook/cli sb init --type react_native

(During Storybook's install process, you'll be prompted to install react-native-server, do so as this package will help out immensely throughout the tutorial.)

We'll also want to add another package and make a change to storybook/rn-addons.js to allow the actions (you'll see them in action later in the tutorial) to be logged correctly in the Storybook UI.

Run the following command:

yarn add -D @storybook/addon-ondevice-actions

Change storybook/rn-addons.js to the following:

// storybook/rn-addons.js import '@storybook/addon-ondevice-actions/register';

This was all I did. Source - https://www.learnstorybook.com/intro-to-storybook/react-native/en/get-started/

And then that -h 0.0.0.0 thing.

Try this and let me know.

EDIT: The link given by you is not for storybook server. It is for react native web. Don't follow that.

[dannyhw]

FYI: the cli is currently a bit broken for react native. I've already updated this but its in alpha. If you need to setup a new project I recommend you use the @next version of the cli

npx -p @storybook/cli@next sb init --type react_native

Also please bear in mind that the screenshots in the storybook tutorial actually show the web version of the tutorial and you won't see the same thing on your side (it will be kind of similar). I'm currently working with the maintainer of the tutorial to improve it however it will take some time to update everything.

[EsackN]

No luck guys @dannyhw and @Shhhhhreyas. It would be grateful, if anyone can connect with me on hangouts to resolve this issue. [email protected]

[Shhhhhreyas]

@EsackN Sent you a invite from '[email protected]'.