Installation Confusion RN-.44

[smooJitter]

So how exactly does one go about installing this package?

npm install @storybook/react-native

or cd into project and run

getstorybook.

The documentation (depending on where you look) is not very clear. In any case, getstorybook creates files pointing to @kadira-storybook. Furthermore, will yarn work? This package killed my _dev project and I spent all day trying to repair it.

react-native .44

[shilman]

@smooJitter make sure you are running getstorybook from @storybook/cli. Sounds like you are running an old version of getstorybook, so you may have to uninstall, e.g. npm rm -g getstorybook && npm i -g @storybook/cli...

[smooJitter]

So both @storybook/cli and getstorybook should be setup on -g then under my project root, I should I should also run getstorybook

-g: npm i @storybook/cli && getstorybook

myAwesomeProject: getstorybook

That's it? No need to run npm i @storybook/react-native locally?

 . 

[shilman]

you can do it globally or locally. doing it locally is a bit safer and will work even if you have an old version of getstorybook installed globally:

cd myproject
npm i @storybook/cli --save-dev
./node_modules/.bin/getstorybook

[smooJitter]

Thanks, I see. There are two sets of instructions . In one case, getstorybook is encouraged, in another npm i @storybook/react-native.

Now that the installation works, the example (react-native-vanilla) repo does not reveal any stories.
/storybook/index

import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';

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

const StorybookUI = getStorybookUI({ port: 7007, host: 'localhost' });
AppRegistry.registerComponent('ReactNativeVanilla', () => StorybookUI);
export default StorybookUI;

/storybook/stories

import React from 'react';
import { Text } from 'react-native';

import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import Button from './Button';
import CenterView from './CenterView';
import Welcome from './Welcome';

storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);

storiesOf('Button', module)
  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
  .add('with text', () => (
    <Button onPress={action('clicked-text')}>
      <Text>Hello Button</Text>
    </Button>
  ))
  .add('with some emoji', () => (
    <Button onPress={action('clicked-emoji')}>
      <Text>😀 😎 👍 💯</Text>
    </Button>
  ));

Although I am not calling it directly, I do see and index.ios.js file

/storybook

import StorybookUI from './storybook';

export default StorybookUI;

I have a welcome screen but no stories appear in the left sidebar.

[shilman]

Did you also run the app in the simulator? Stories won't show up unless (1) storybook is running in the browser, and (2) your app is running in the simulator and has connected to storybook.

[smooJitter]

Still no luck. Totally clean RN install, no add package and just the RN welcome screen. No components appear.

[shilman]

@smooJitter If you create a public repo I can take a look for you.

[befrvnk]

I have the exact same problem. The storybook doesn't show any stories. I am running RN 0.45.1 on a 'react-native init' project.

EDIT: I fixed my problem by replacing the variable for the root component name with a string.

AppRegistry.registerComponent('%APP_NAME%', () => StorybookUI);
to
AppRegistry.registerComponent('AppName', () => StorybookUI);

[shilman]

Thanks @fraherm for posting that. I think it will help some people.

Question: here is the code that should set the APP_NAME on your machine:

  // set correct project name on entry files if possible
  const dirname = shell.ls('-d', 'ios/*.xcodeproj').stdout;
  const projectName =
    dirname && dirname.slice('ios/'.length, dirname.length - '.xcodeproj'.length - 1);
  if (projectName) {
    shell.sed('-i', '%APP_NAME%', projectName, 'storybook/index.js');
  }

Any idea why this is failing on your machine? I've opened up a separate bug for this, and would like to improve the heuristic and also print out a big warning if it fails so at least it is less confusing the user can do something about it by hand: #1277

[shilman]

FYI @fraherm @smooJitter I have fixed the bug in #1277 and it went out in the 3.1.4 release https://github.com/storybooks/storybook/releases/tag/v3.1.4

@smooJitter please let me know if this helps you out

[danielduan]

Looks like it's been fixed. Please reopen this if there's still a problem on the latest versions.