Series: The Ultimate React Native UI Library starter repo
Tags: react, reactnative, tutorial, webdev
Published: 2020-07-24 11:59:06

---
title: Series: The Ultimate React Native UI Library starter repo
published: true
description: 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? 
tags: react, reactnative, tutorial, webdev 
cover_image: https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3150&q=80
---

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](https://dev.to/ugglr/step-1-setting-up-react-native-with-storybook-36l) |
| setup react from scratch together with react native web | [Step 2: Setting up react with react native web](https://dev.to/ugglr/step-2-setting-up-react-with-react-native-web-30ba) |
| 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](https://dev.to/ugglr/step-3-setting-up-storybook-with-react-native-web-show-your-mobile-components-the-browser-12ke) |

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](https://github.com/ugglr/react-native-storybook-boilerplate/blob/master/README.md)

Here's a hosted version of what I'm building: [hosted site](https://rn-sb-boilerplate.netlify.app/)

## 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](https://github.com/elderfo/react-native-storybook-loader)

2. **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](https://github.com/ugglr/react-native-storybook-boilerplate/blob/master/webpack.config.js) also: babel config here: [babel.config.js](https://github.com/ugglr/react-native-storybook-boilerplate/blob/master/babel.config.js)
- Installing Storybook according to the manual guide in the docs [React Storybook Manual Installation Steps](https://storybook.js.org/docs/guides/guide-react/)
- Inside of `./.storybook/main.js` configure custom webpack for Storybook, see docs here: [Storybook custom webpack docs](https://storybook.js.org/docs/configurations/custom-webpack-config/), 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!