Expo에서 만든 react-native에 storybook을 추가하는 방법

개요

react-native를 쉽게 설정하거나 편리한 도구가 정리되어 있는 Expo입니다만, storybook에서 취급하려고 하면 원래 react-native와 storybook의 궁합이 좋지 않을 수도 있고, 좀처럼 설정할 수 없었습니다... 그래서 쉽게 설정하는 방법에 대해 빙글빙글 찾고 있던 곳, 등대 아래 어두운 곳에서 Expo의 리포지토리에 발견했으므로, 비망록 대신에 정리합니다!

해결 방법 정보

Expo의 리포지토리에서 정리한 설정 방법은 다음과 같습니다
그쪽을 보면 이후에 대해 볼 필요가 없습니다.

절차 요약

리포지토리로 날아가는 것이 귀찮은 사람을 위해 다음과 유사한 절차를 요약합니다

expo init에서 프로젝트를 만듭니다 (개인적으로 npx expo init 사용)

생성된 프로젝트로 이동하여 npx -p @storybook/cli sb init --type react에 의해 React용으로 구성된 storybook을 설치합니다. 아무래도 react-native-web을 사용하여 표시하고있는 것 같습니다.

나중에 storybook에 도입 할 웹 팩 설정을 위해 yarn add -D @expo/webpack-config를 설치합니다

.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, '../'),
    }
  );
};

yarn storybook에서 storybook이 시작됩니다! 디폴트에서는 stories 폴더에 stories 파일을 만들어 가는 형태로 되어 있습니다만, 변경할 때 등은 .storybook 하단의 config.js 등을 만져서 좋게 해 주세요.

요약

react-native 재미있습니다만, Expo와의 궁합 문제가 있거나, 원래 react-native와의 궁합 문제가 있거나 해서 상당히 생각한 것처럼 움직임을 확인할 수 없는 곳이 어렵네요… 그렇다고는 해도, 상기의 Expo 리포지토리와 같이 찾아내면 제대로 커버되고 있으므로, 거기는 고맙습니다. 앞으로도 react-native/Expo를 사용해 가고 싶습니다!