Skip to content

Compelling boilerplate setup for starting development of a React Native UI library. React-Native+React-Native-Web+Storybook=❤️

Notifications You must be signed in to change notification settings

ugglr/react-native-storybook-boilerplate

Repository files navigation

react-native-storybook-boilerplate

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:

  1. 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
  1. 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 roughtly done like this:

  • Installing react, react-dom, babel & webpack dependencies
  • Configuring webpack 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
  • 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 my webpack.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

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.

Clone Command

git clone git@github.com:ugglr/react-native-storybook-boilerplate.git

Scripts

In root folder the following scripts are available

  • Run React Native Storybook Developer Server
yarn run storybook
  • Run Storybook on iOS simulator
yarn run ios
  • Run Storybook on Android emulator
yarn run android
  • Run Storybook Web Developer server (powered with React Native Web)
yarn run storybook-web
  • Build serveable Storybook static site (To-Do)
yarn run build:storybook-web

--> ./storybook-static