Expoで作成したreact-nativeにstorybookを追加する方法

概要

react-nativeを簡単にセットアップしたり便利ツールがまとまっているExpoですが、storybookで扱おうとすると元々react-nativeとstorybookの相性が良くないこともあり、なかなかセットアップできませんでした...そこで簡単にセットアップする方法についてぐるぐると探していたところ、灯台下暗しでExpoのリポジトリに見つけたので、備忘録代わりにまとめます!

解決方法について

Expoのリポジトリにてまとめられている設定方法が以下になります
そちらを見れば以降について見る必要はありません

手順まとめ

リポジトリに飛ぶのが面倒な人用に以下に同様の手続きをまとめます

1. expo initでプロジェクトを作成します(個人的にはnpx expo initを使ってます)

2. 作成されたプロジェクトに移動し、npx -p @storybook/cli sb init --type reactによりReact用に設定されたstorybookをインストールします。どうもreact-native-webを使って表示しているっぽいです。

3. 後にstorybookに導入するwebpackの設定用にyarn add -D @expo/webpack-configをインストールします

4. .storybook配下のwebpack.config.jsに以下の設定を記入します

const { resolve } = require('path');
const webpack = require('webpack');
const withUnimodules = require('@expo/webpack-config/withUnimodules');

module.exports = ({ config }) => {
  return withUnimodules(
    config,
    {
      projectRoot: resolve(__dirname, '../'),
    }
  );
};

1. yarn storybookでstorybookが起動します！デフォルトではstoriesフォルダにstoriesファイルを作っていく形になっていますが、変更する際などは.storybook配下のconfig.jsなどを触ってよしなにしてください。

まとめ

react-native面白いのですが、Expoとの相性問題があったり、そもそものreact-nativeとの相性問題があったりして結構思ったように動きが確認できないところが難ですね…。とはいえ、上記のExpoリポジトリのように探せばちゃんとカバーされているので、そこはありがたいです。これからもreact-native/Expoを使っていきたいと思います！