DEV Community

Cover image for Series: The Ultimate React Native UI Library starter repo
Carl-W
Carl-W

Posted on • Edited on

11 5

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:

Article Link
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 Step 3: Setting up storybook with react native web: Show your mobile components in a browser

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!

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay