Storybookのインストール

Storybook公式サイトのチュートリアルはv5の内容のため参考にはならなそう。
--type react_nativeだとv5がセットアップされてしまう。

そのため通常のReact用でインストール。

$ npx -p @storybook/cli sb init --type react

Hi MORISHIGE

---type reactでもReact Native環境であることを認識して自動的にセットアップしてくれる模様。

storybook/index.js

// if you use expo remove this line
import { withKnobs } from '@storybook/addon-knobs';
import {
  getStorybookUI,
  configure,
  addDecorator,
} from '@storybook/react-native';
import { AppRegistry } from 'react-native';

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;

Hi MORISHIGE

$ yarn storybook

で起動。React NativeのコンポーネントViewなどを使っているコンポーネントはうまく動かない。
babel関連の警告も出ていたので下記を追加でインストール。

$ yarn add -D babel-loader @babel/preset-env

NativeアプリでStorybookを起動する場合はStorybook Serverの設定などが必要そうだが、ブラウザで確認用途にできればよいということでwebpack.config.jsを追加してブラウザ環境に制限することで動作することができた。

.storybook/webpack.config.js

module.exports = async ({ config }) => {
  config.resolve.alias = {
    'react-native$': 'react-native-web',
  };
  return config;
};

で実行できるようになった。

Hi MORISHIGE

react-native-svgを利用しているコンポーネントが動かないことが判明。

このライブラリとREADMEの指示にある方法でsvgを読み込んだところコンポーネントでのsvg表示、Storybookの起動には成功するが、StorybookでのSVG表示はできない。

yarn add react-native-svg-transformer

調べたところ下記のような方法を発見。

yarn add svg-react-loader

webpack.config.jsに追記

webpack.config.js

module.exports = async ({ config }) => {
  config.resolve.alias = {
    'react-native$': 'react-native-web',
    'react-native-svg': 'react-native-svg/lib/commonjs/ReactNativeSVG.web',
  };
  // handle SVG support inside Storybook
  const fileLoaderRule = config.module.rules.find((rule) =>
    rule.test.test('.svg'),
  );
  fileLoaderRule.exclude = /\.svg$/;
  config.module.rules.push({
    test: /\.svg$/,
    loader: 'svg-react-loader',
  });
  return config;
};

下記のような記載のコンポーネントで無事に表示ができるようになった。

Logo.tsx

import styled from 'styled-components/native';
import TodoLogo from '../../../../assets/todo-logo.svg';

const LogoWrapper = styled.View``;

export const Logo: React.VFC = () => {
  return (
    <LogoWrapper>
      <TodoLogo />
    </LogoWrapper>
  );
};

Logo.stories.tsx

import { ComponentMeta, ComponentStoryObj } from '@storybook/react';

import { Logo } from './Logo';

export default { title: 'Logo', component: Logo } as ComponentMeta<typeof Logo>;

export const TodoLogo: ComponentStoryObj<typeof Logo> = {};

Hi MORISHIGE

別の問題が発生。
Storybook、iOSシミュレーター上では問題がないが、webブラウザではSVGを使ったコンポーネントがうまく動かない模様。
Storybookで確認、iOSで動くなら問題がないといえばないところだけど気になる。

このスクラップは2022/05/22にクローズされました