loading...
Cover image for Series: The Ultimate React Native UI Library starter repo

Series: The Ultimate React Native UI Library starter repo

ugglr profile image Carl-W Updated on ・3 min read

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 Status
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 stay-tuned!
Build & host storybook site powered by react-native-web which displays the react-native components. stay-tuned!

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!

Posted on by:

ugglr profile

Carl-W

@ugglr

React / React Native / Software Engineer, former Senior Robotics Hardware Engineer.

Discussion

pic
Editor guide