Skip to content

Instantly share code, notes, and snippets.

Created March 6, 2019 09:59
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save johnwylie70/1f019c643641f56b400acc78415d398d to your computer and use it in GitHub Desktop.
Getting Workbook running with React Native

Use Storybook version 4.1.13 as 5 is not ready for React Native

Tested: 6th March 2019

Install mac homebrew:

Download rom here: `

Setup brew

brew install node
brew install watchman
brew install yarn

install react

npm install -g react-native-cli

Create ReactNative app

react-native init AwesomeProject
cd AwesomeProject

Clear npm packages

rm package-lock.json
rm -rf node_modules/

Setup git

git init
git add -A
git commit -m 'first commit'

Install Babel, Webpack & React

yarn add @babel/core
yarn add babel-runtime
yarn add webpack
yarn add react-dom

Add Storybook

yarn add --dev @storybook/react-native

Initialize Storybook

sb init -f

Be sure to choose v4.1.13 from the list

Fix version Numbers from 5.0.x in package.json

"@storybook/react": "^4.1.13",
"@storybook/addon-actions": "^4.1.13",
"@storybook/addon-links": "^^4.1.13",
"@storybook/addons": "^4.1.13",

Add some optional ReactNative infrastructure

yarn add prop-types redux react-redux react-native-vector-icons

Link resources

react-native link

Install NPM packages


Launch simulator

react-native run-ios

Replace App.js code

export default from "./storybook";

Launch Storybook

yarn storybook
Copy link

I believe the command to initialise Storybook should be sb init -f --type react_native in this case.
Other than that, very helpful guide. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment