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({}).

[Man-RP]

struggling the same issue, tried the 0.0.0.0 ip thing - did not work.
the shel script is not working for me too :S

getting:

edit: @dannyhw helped me to solve it. thanks a lot!

iv'e got another problem with my device's app screen:

[jo-finndian]

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.

Omg, I've been banging my head against the wall for hours. I feel like such a dolt. Thank you!

[Yasin-Ali]

I did everything above and it is still not working :-/

[dannyhw]

@Yasin-Ali If you share more details I could help you get it working. What's the server command look like in your package.json and the getstorybookui arguments you are using.

[anhdn]

I read it on this repo document. Maybe we can not run storybook on web independently. We have to run web and simulator at the same time.

[dannyhw]

@anhdn

I read it on this repo document. Maybe we can not run storybook on web independently. We have to run web and simulator at the same time.

Yes the storybook server is not a web storybook for react native it's just a server for controlling the device.

[RitikaGupta8734]

Following steps will work in case you are able to load stories on your emulator and control them via on-device navigator, preview and addons and just want to add the server control along with on device one.
I faced this problem and @dannyhw helped me.

Advantages:

1. Storybook server is used to control the component visible on the device via a web ui.
2. It is useful to control multiple devices at once and compare them at the same time.
3. It provides far better UI then the on-device one.

Steps:

1. If you have installed storybook then your package.json file will have "storybook": "start-storybook -c .storybook in scripts
2. Now you will run npm run storybook and the server will open in which the stories will load infinitely.
3. Now before starting your app make the following changes.
4. Copy the host and the port part from the terminal where you ran npm run storybook. It will look like this

╭─────────────────────────────
│                                                     
│   Storybook 5.3.23 started                          
│   4.18 s                                            
│                                                     
│    Local:            http://localhost:7007/     
│    On your network:  http://192.168.137.15:7007/    
│                                                     
╰────────────────────────────

host-> 192.168.137.15(copy your host) and port -> 7007
5. Now specify these at exactly two places :

1. `package.json` -> `"storybook": "start-storybook -c .storybook -p 7007 -h 192.168.137.15" `  and
2. `storybook/stories/index.js` ->  `const StorybookUIRoot = getStorybookUI({ port: 7007, host: '192.168.137.15' })`

6. Now stop that npm run storybook command by pressing ctrl +c and run it again
7. If you did it all right then it will look like below , else recheck if you followed all the steps.

╭─────────────────────────────
│                                                     
│   Storybook 5.3.23 started                          
│   5.13 s                                            
│                                                     
│    Local:            http://192.168.137.15:7007/    
│    On your network:  http://192.168.137.15:7007/    
│                                                     
╰─────────────────────────────

8. Now start you app as usual: npm start and all in other terminals (keep the npm run storybook running) and reload the storybook server. You will see it working now.

[abhishek-netizen]

please refer above post by @RitikaGupta8734 . its working for me

[kenchoong]

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

Hey wanna ask, do u run your expo on device by scan qr code or connect with cable? Cause now both android, ios I scan with Expo Qr code, both cant connect with storybook.

What I have done:

1. set the storybook UI like this

const StorybookUIRoot = getStorybookUI({
  host:'173.68.789.25',  // this is get bro the Storybook output 
  port:'7007',
  asyncStorage: null
});

2. expo start
3. iOS scan expo QR code
4. android scan expo QR code
5. yarn storybook

Outcome now:

1. Android and iOS both having the Storybook present
2. In storybook, the menu is loading forever.

Not sure what happened here 😢

It look likes the Android iOS device cant connect with the Storybook server.

Let me know if have any suggestion

[dannyhw]

@kenchoong

Make sure you aren't connecting over the "tunnel" connection mode in expo, try to use local LAN network option.

Also make sure you changed the server port in your package.json to the same as your getStorybookUI one.

[kenchoong]

@kenchoong

Make sure you aren't connecting over the "tunnel" connection mode in expo, try to use local LAN network option.

Yes, I use LAN connection, I tried both "Scan QRCode" and also connect with cable.. both cant connect(forever loading in http://172.30.48.1:7007/?path=/story/*).

In package.json, this is my script.

"storybook": "start-storybook -p 7007 -h 172.30.48.1",

Then getStorybookUI is this.

const StorybookUIRoot = getStorybookUI({
  host:'172.30.48.1',
  port:'7007',
  asyncStorage: null
});

and 172.30.48.1 is get from yarn storybook output for the 1st time

I also yarn storybook first, then only expo start

In android device, storybook UI is presented, just cant connect in localhost:7007

But still no luck 😢

[dannyhw]

@kenchoong have you tried adb reverse tcp:7007 tcp:7007 ?

[kenchoong]

@kenchoong have you tried adb reverse tcp:7007 tcp:7007 ?

Yes,

1. yarn storybook
2. expo start
3. adb reverse tcp:7007 tcp:7007

run each command after another. What I got now:

1. android got the preview of Storybook
2. http://172.30.48.1:7007/?path=/story/* in this path, storybook menu infinite loading.

Connected using cable and Scan QRcode as well , weird..

[dannyhw]

try changing it to this

const StorybookUIRoot = getStorybookUI({
  host:'172.30.48.1',
  port:7007,
  asyncStorage: null
});

I don't think that the port should be a string.

[kenchoong]

try changing it to this

const StorybookUIRoot = getStorybookUI({
  host:'172.30.48.1',
  port:7007,
  asyncStorage: null
});

I don't think that the port should be a string.

Yes, this is one of the reason.

And state here for future references as well, the reason of this is because host:'172.30.48.1' this value of host(I got from the output after yarn storybook) is wrong. After I restart my computer, yarn storybook again, it gives a new value which is 192.156.1.2 (a totally new value), replace that, the whole thing works which means sidebar menu can see the component, it works with both "scan expo qr code" and "connect device with cable", both in android and ios device works. Struggle on this for 1 WHOLE DAY. 🤣😂

[alutz33]

@dannyhw @kennethtruong WORKED FOR ME! Just needed to add the host and port. What a waste of a day!

[jordanlang410]

I am still struggling with the sidebar not loading and I have completed everything exactly as explained by @kenchoong. I'm not sure what I would be doing wrong at this point? Does it matter what server expo is running on?

[dannyhw]

I am still struggling with the sidebar not loading and I have completed everything exactly as explained by I'm not sure what I would be doing wrong at this point? Does it matter what server expo is running on?

@jordanlang410 The important thing is having the same ip and port for both the storybook script in package.json and also in getStorybookUI. Also make sure its the right ip address for your machine. It should be the local network address, this ip will be shown when you initially run the server. This solution has been shown to work multiple times so I imagine you just need to double check your setup and double check the IP address.

In package.json

"storybook": "start-storybook -p 7007 -h 172.1.1.1",

and getStorybookUI

const StorybookUIRoot = getStorybookUI({
host:'172.1.1.1',
port:'7007',
asyncStorage: null
});

[kenchoong]

I am still struggling with the sidebar not loading and I have completed everything exactly as explained by @kenchoong. I'm not sure what I would be doing wrong at this point? Does it matter what server expo is running on?

add this to your package.json

"storybook": "start-storybook -p 7007 -h 192.156.1.2",

The value of the host should start with 192, other than that, certainly it is wrong. Restart your computer, and get the new IP.

[jordanlang410]

I figured it out. I did not follow instructions properly and failed to put the export {default} from './storybook'; into my App.js file. You all rock @kenchoong and @dannyhw. Your earlier posts saved me a ton of time.

[Dane-Mutch]

Leaving this here in case it helps anybody. We use the new JSX transform as described here and were facing an infinitely loading sidebar. Setting the experimentalImportSupport option in metro.config.js to true fixed our issue.

[dannyhw]

I'm just locking this to avoid unnecessary noise, I believe that there are already solutions and discussing further isn't necessary. I'll leave the issue open for discoverability and to help others with the same problem.