Series: The Ultimate React Native UI Library starter repo

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:

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:

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 roughly 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

Stay tuned for the write-up!