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:
|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
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
npx -p @storybook/cli sb initand choosing yes when asked if install @storybook/react-native-server
- installing & configuring
react-native-storybook-loaderthe 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-web. This needs to be done with other packages as well, in this boilerplate I have installed
styled-components/native imports needs to be switched out to
styled-components when we bundle for the web.
It was roughly done like this:
styled-components/nativeshould resolve to
styled-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.jsconfigure custom webpack for Storybook, see docs here: Storybook custom webpack docs, from my
webpack.config.jsI 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