File tree Expand file tree Collapse file tree 1 file changed +34
-1
lines changed
Expand file tree Collapse file tree 1 file changed +34
-1
lines changed Original file line number Diff line number Diff line change @@ -50,7 +50,7 @@ npx react-native init MyApp --template react-native-template-storybook
5050Run init to setup your project with all the dependencies and configuration files:
5151
5252``` sh
53- npx storybook@latest init
53+ npm create storybook@latest
5454```
5555
5656The only thing left to do is return Storybook's UI in your app entry point (such as ` App.tsx ` ) like this:
@@ -150,6 +150,39 @@ Make sure you have `react-native-reanimated` in your project and the plugin setu
150150plugins: [' react-native-reanimated/plugin' ],
151151```
152152
153+ ## Expo router specific setup
154+
155+ ``` bash
156+ npm create storybook@latest
157+ ```
158+
159+ choose recommended and then native
160+
161+ ``` bash
162+ npx expo@latest customize metro.config.js
163+ ```
164+
165+ copy the metro config
166+
167+ ``` js
168+ const withStorybook = require (' @storybook/react-native/metro/withStorybook' );
169+ module .exports = withStorybook (config);
170+ ```
171+
172+ add storybook screen to app
173+
174+ create ` app/storybook.tsx `
175+
176+ ``` tsx
177+ export { default } from ' ../.rnstorybook' ;
178+ ```
179+
180+ Then add a way to navigate to your storybook route and I recommend disabling the header for the storybook route.
181+
182+ Heres a video showing the same setup:
183+
184+ (video here)
185+
153186## Writing stories
154187
155188In storybook we use a syntax called CSF that looks like this:
You can’t perform that action at this time.
0 commit comments