Setup a new project to test the 6.0 alpha of react native storybook

setup_rn_sb.sh

#!/bin/bash
npx react-native init RnSBSixAlpha --template react-native-template-typescript;
cd RnSBSixAlpha;

yarn add @storybook/react-native@next \
            @react-native-async-storage/async-storage \
            @storybook/addon-ondevice-actions@next \
            @storybook/addon-ondevice-controls@next \
            @storybook/addon-ondevice-backgrounds@next \
            @storybook/addon-ondevice-notes@next \
            @storybook/addon-actions@6.3 \
            @react-native-community/datetimepicker \
            @react-native-community/slider \
            @storybook/addon-controls@6.3

echo "/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
  },
};" > metro.config.js;


mkdir .storybook;
mkdir components;
echo "module.exports = {
  stories: [
    '../components/**/*.stories.?(ts|tsx|js|jsx)'
  ],
   addons: [
    '@storybook/addon-ondevice-notes',
    '@storybook/addon-ondevice-controls',
    '@storybook/addon-ondevice-backgrounds',
    '@storybook/addon-ondevice-actions',
  ],
};" > .storybook/main.js;

echo "import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';

export const decorators = [withBackgrounds];
export const parameters = {
  backgrounds: [
    {name: 'plain', value: 'white', default: true},
    {name: 'warm', value: 'hotpink'},
    {name: 'cool', value: 'deepskyblue'},
  ],
};" > .storybook/preview.js;

echo "import { getStorybookUI } from '@storybook/react-native';

import './storybook.requires';

const StorybookUIRoot = getStorybookUI({});

export default StorybookUIRoot;" > .storybook/Storybook.tsx;

echo "import StorybookUIRoot from './.storybook/Storybook';
export { StorybookUIRoot as default };" > App.tsx;

node -e 'const fs = require("fs");
const packageJSON = require("./package.json");
packageJSON.scripts = {
    ...packageJSON.scripts,
    prestart: "sb-rn-get-stories",
    "storybook-watcher": "sb-rn-watcher"
};
fs.writeFile("./package.json", JSON.stringify(packageJSON, null, 2), function writeJSON(err) {
  if (err) return console.log(err);
  console.log(JSON.stringify(packageJSON));
  console.log("writing to " + "./package.json");
});';

if [[ "$(uname)" == "Darwin" ]]; then 
  cd ios; pod install; cd ..;
fi

mkdir components/Button;
echo "import React from 'react';
import {TouchableOpacity, Text, StyleSheet} from 'react-native';

interface MyButtonProps {
  onPress: () => void;
  text: string;
}

export const MyButton = ({onPress, text}: MyButtonProps) => {
  return (
    <TouchableOpacity style={styles.container} onPress={onPress}>
      <Text style={styles.text}>{text}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: 'violet',
  },
  text: {color: 'black'},
});
" > components/Button/Button.tsx;

echo "import React from 'react';
import {ComponentStory, ComponentMeta} from '@storybook/react-native';
import {MyButton} from './Button';

const MyButtonMeta: ComponentMeta<typeof MyButton> = {
  title: 'MyButton',
  component: MyButton,
  argTypes: {
    onPress: {action: 'pressed the button'},
  },
  args: {
    text: 'Hello world',
  },
};

export default MyButtonMeta;

type MyButtonStory = ComponentStory<typeof MyButton>;

export const Basic: MyButtonStory = args => <MyButton {...args} />;
" > components/Button/Button.stories.tsx;

yarn sb-rn-get-stories;

Replace RnSBSixAlpha with the app name you want.

for me, having argTypes in Button.stories.tsx breaks the stories list - no stories are shown. If argTypes is there, an error in the addStories method is thrown (somewhere around here https://github.com/storybookjs/storybook/blob/bea9abf33d4d260f7d2e204837534dde3ff7792a/lib/client-api/src/story_store.ts#L545). Well, it was probably fixed already in newer versions.

I've never had that issue before, did you make any other changes?

I am also having this issue, and the removal of argTypes that @vonoro suggested fixed it for me!

I'm not having this problem, and it worked for me out of the box.

I'm testing this version because I tried several ways to make the addons work in version 5.3.x and nothing worked.

But with this alpha version everything is working and I'm testing it on a new project.

The metro config is out of date, it should be:

resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],

As per this PR storybookjs/react-native#325

@skdrew updated, thanks!

Thanks for this!
It would be nice to have cd ios; pod install; cd ..; ran conditionally, so it doesn't break on linux users

@diegodorado hey sure I can add that got any suggestions?

Also this script is intended more as a temporary thing so you can expect a more feature complete version to be included in the storybook cli.

Maybe this?

if [ "$(uname)" == "Darwin" ]; then
  cd ios; pod install; cd ..
fi

Yes, exactly that!

@diegodorado I had to change it to

if [[ "$(uname)" == "Darwin" ]]; then 
  cd ios; pod install; cd ..;
fi

can you test it for linux to make sure it doesn't run?

Yes, that syntax also worked for me. Thanks!

Need to change default CLI option for background addon as

echo "import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds';
export const decorators = [withBackgrounds];
export const parameters = {
  backgrounds: {
    default: 'plain',
    values: [
      { name: 'plain', value: 'white' },
      { name: 'warm', value: 'hotpink' },
      { name: 'cool', value: 'deepskyblue' },
    ],
  },
};" > .storybook/preview.js

storybookjs/react-native#413

@JeffGuKang yes thanks for the reminder, I haven't updated this since the most recent updated.