Storybook Navigation Sidebar stuck loading

user_8897307 0
Viewed 1356

I've started using storybook for React Native in one of my applications, it has helped me a lot, but it seems like the sidebar for navigating between components is stuck loading (showing me a skeleton animation). I've also tried running storybook on a fresh React Native app but the problem persists (Only tested on Android).

Here's me Index file for the stpries UI

// if you use expo remove this line
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('../src/components/Stories/Button.stories');
}, module);

// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// 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;

Here are the rn add-ons, these where already included.

import '@storybook/addon-ondevice-actions/register';
import '@storybook/addon-ondevice-knobs/register';

And these are the stories for a few button components (Will omit some code)

import * as React from 'react';
import {storiesOf} from '@storybook/react-native';
import {BufferView} from './decorators';

import BeexButton from '../Buttons/BeexButton';
import SocialButton from '../Buttons/SocialButton';

storiesOf('Button', module)
  .addDecorator(BufferView)
  .add('default primary', () => <BeexButton text="Primary Button" />);

Just for reference, this is how the browser tab is looking when I visit localhost:7007 (This matches with the terminal output and the console for this site does not output any errors)

I already tried this solution: https://github.com/storybookjs/react-native/issues/55#issuecomment-640164800

storybook react-native reactjs javascript
1 Answers

I managed to solve this by altering index.js

// storybook/index.js

const StorybookUIRoot = getStorybookUI({
  // Add the line below
  host: Platform.OS === 'android' ? '10.0.2.2' : '0.0.0.0'
});
user_88973070
Related