Skip to content

Commit cde0a63

Browse files
committed
readme add expo router steps
1 parent 681565a commit cde0a63

File tree

1 file changed

+34
-1
lines changed

1 file changed

+34
-1
lines changed

README.md

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ npx react-native init MyApp --template react-native-template-storybook
5050
Run 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

5656
The 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
150150
plugins: ['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

155188
In storybook we use a syntax called CSF that looks like this:

0 commit comments

Comments
 (0)