Compelling boilerplate setup for starting development of a React Native UI library. React-Native+React-Native-Web+Storybook=❤️
Building a UI library for React Native together with storybook is a good experience, but it's hard to display the components on the web, therefore I want to transpile the react-native component through the react-native-web project so I can display them easily on the web.
It's the ultimate library development setup meant for kickstarting ui library development for react-native.
In a nutshell there's two different setups of Storybook running in parallel:
It was installed following the normal steps of
npx react-native init
npx -p @storybook/cli sb init
and choosing yes when asked if install @storybook/react-native-serverreact-native-storybook-loader
the project can be found here: react-native-storybook-loader
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 roughtly done like this:
react
, react-dom
, babel
& webpack
dependencieswebpack
to alias react-native
with react-native-web
, and styled-components/native
should resolve to styled-components
. See the full webpack config here: webpack.config.js also: babel config here: babel.config.js
./.storybook/main.js
configure custom webpack for Storybook, see docs here: Storybook custom webpack docs, from my webpack.config.js
I grab the alias configuration and plug it into Storybook.@storybook/react-native
resolves to @storybook/react
Goals of this repo:
ToDo | Status |
---|---|
setup react native | ✅ |
setup @storybook/react-native-server for react native UI development | ✅ |
setup react from scratch | ✅ |
setup @storybook/react to run as a seperate storybook | ✅ |
Build serveable storybook site with react-native-web display of the react-native components. | ✅ |
git clone [email protected]:ugglr/react-native-storybook-boilerplate.git
In root folder the following scripts are available
yarn run storybook
yarn run ios
yarn run android
yarn run storybook-web
yarn run build:storybook-web
--> ./storybook-static