Storybook keep in loading status for react native?

user_1257916 0
Viewed 491

I'm following the introduction from the official website here: https://storybook.js.org/tutorials/intro-to-storybook/react-native/en/get-started/

I have repeated the steps for few times, I still can't start the storybook. Anyone success?

Any hint for what I missed?

enter image description here

As Tyler requested, I share the storybook index file as below (I didn't change anything, it is completed autogenerated new app):

import { AppRegistry } from "react-native";

import {
  getStorybookUI,
  configure,
  addDecorator,
} from "@storybook/react-native";
import { withKnobs } from "@storybook/addon-knobs";

import "./rn-addons";

// enables knobs for all stories
addDecorator(withKnobs);

// import stories
configure(() => {
  require("./stories");
}, module);

// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
AppRegistry.registerComponent("%APP_NAME%", () => StorybookUIRoot);

export default StorybookUIRoot;

Add screenshot of App.tsx.

enter image description here

storybook react-native
2 Answers

I tried to answer this once already but my answer was deleted for some reason. I know this issue very well since I'm the maintainer of the package so I don't see why this answer would not be valid.

This is a common issue. You can see some further details this pinned issue from the repo.

The problem here is the connection between the mobile storybook UI and the web storybook UI via websockets. In order to solve it you need to make sure that the right IP address is being used.

First you should make sure the ondeviceUI is loaded on your mobile device since the web UI gets the stories from the device.

If you are still having issues you can manually specify the port and ip address

First set the ip and port on the getStorybookUI call.

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

Then adjust the script used to launch the react-native-server to have the port and ip option. Make sure that you use exactly the same port and host that you used in the previous step otherwise it won't work.

It should look something like this but with your own IP address instead.

"storybook": "start-storybook -p 7007 -h 192.111.1.11"
user_27214800

Thanks @TylerWilliams' hint.

It might due to an unknown bug on storybook, there isn't a complete solution yet, but build an android app could resolve the unlimited loading issue.

user_12579160
Related