Exporting React Native Storybook Components as Static Storybook Web App

Problem

Solution

React Native vs. React Native Web
React Native vs. React Native Web
Photo by Christian Mackie on Unsplash

So how this magic works?

The Short Example

1. Our React Native Components Stays Untouched

2. Initializing Storybook for React Native

npx -p @storybook/cli sb init --type react_native

3. Creating storybook-website folder

4. Supporting SVGs

5. Modifying package.json to support build-storybook command

6. Storybook Init for React (NOT React Native)

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

The final folder structure

Limitations

Summary

Senior React Native Developer @stefan-majiros.com (Mobile MVP Dev Agency). Working w/ AWS Amplify and Firebase. Open to remote dev projects w/ my own clients!