If you are developing in React native chances are you are sitting on a personal UI library which you copy & paste between projects. Would it not be great to document, and publish the components online?
This is the collection post where I'm starting a series. With the goal to setup a repo which can be forked and then makes a very compelling case (in my opinion) for starting development of your own React Native UI library.
The parts I'm going to be covering:
Article | Link |
---|---|
setup react native & @storybook/react-native | Step 1: Setting up React Native with Storybook |
setup react from scratch together with react native web | Step 2: Setting up react with react native web |
setup @storybook/react + react native web to run as a parallel storybook | Step 3: Setting up storybook with react native web: Show your mobile components in a browser |
I've already written out the code so this is a way for me to document how this repo was made, and for others to follow along.
If you want to jump straight into the code here's the repo react-native-storybook-boilerplate
Here's a hosted version of what I'm building: hosted site
Roughly what's going to be done
In a nutshell there's two different setups of Storybook running in parallel:
- React Native + Storybook/React-Native
It was installed following the normal steps of
- doing a fresh
npx react-native init
- running
npx -p @storybook/cli sb init
and choosing yes when asked if install @storybook/react-native-server - installing & configuring
react-native-storybook-loader
the project can be found here: react-native-storybook-loader
- React + Storybook/React
This installation is less obvious because we have to setup react from scratch, configure babel & webpack, whereas in the webpack.config.js
we need to resolve and apply aliases for our imports, so react-native
becomes react-native-web
. This needs to be done with other packages as well, in this boilerplate I have installed styled-components
, i.e. styled-components/native
imports needs to be switched out to styled-components
when we bundle for the web.
It was roughly done like this:
- Installing
react
,react-dom
,babel
&webpack
dependencies - Configuring
webpack
to aliasreact-native
withreact-native-web
, andstyled-components/native
should resolve tostyled-components
. See the full webpack config here: webpack.config.js also: babel config here: babel.config.js - Installing Storybook according to the manual guide in the docs React Storybook Manual Installation Steps
- Inside of
./.storybook/main.js
configure custom webpack for Storybook, see docs here: Storybook custom webpack docs, from mywebpack.config.js
I grab the alias configuration and plug it into Storybook. - Since Storybook does not support the new syntax of writing stories for React Native I needed to add one more alias where
@storybook/react-native
resolves to@storybook/react
Top comments (0)