If you’re looking for a quick way to get your component library started, check out the project template on my github

 

I think at the heart of great React native development there needs to exist reusable components that abstract away details that other developers don’t need in order to make amazing applications.

So I decided to make a small component library using my current stack and in doing so, learned so much. Proof of why you should never stop learning if you want to become a 10x developer. Something easier said than done, tbh, but whatevs.
Here’s how after a Saturday of struggling and almost crying I was able to make my own react-native-component-library using TypeScript and Tailwind. It’s not perfect, but it’s a start, so let’s get started

Setting up a new project

To get this project started we will rely on expo (and its templates) to quickly get things moving. Run the following command to install expo globally and create to create a new project

npx create-expo-app --template expo-template-blank-typescript

Name the app whatever you want for this, i went with the classic, react-native-component-library

Installing Storybook

Once npx and expo do their thing, we’ll go ahead and add storybook to our project. For everyone who doesn’t know, storybook is a tool that allows you to test and share your components. It’s an elite tool, to share your components with other people.
Don’t be fooled, as of writing, storybook isn’t enough to share react native components as an NPM lib; but it is an awesome way to showcase how to work with your components and show their limitations are.
So to get our react native tailwind integration started run this command at the root of your project

npx -p @storybook/cli sb init --type react_native

After the installation we have to update our App.tsx to display our storybook.

// App.tsx
import React from 'react';
export { default } from './storybook';

Note: the component exported by storybook can be placed anywhere. Something worth remembering if you want to share an app that showcases your storybook and want to force authentication to access the storybook.

You might be tempted to run yarn storybook and that will open up a web based story book, that I found to be useless. Instead, connect to the react native app by running yarn ios
If everything installed correctly, the pre-made storybook components should show up.

Creating a component

Alright, now that everything is set up, we can focus on creating our first typescript component. Start off by creating a .src at the root of your project. This will be the archive for your library. Make sure that all the code in this folder is in TypeScript and is part of what you want to share.
Just a note, src will hold your lib and storybook will hold your storybook files. When you go and publish your library, you won’t include the storybook files.

The directory structure above illustrates how I went about creating my components and exporting them. Each component is a folder that has three files

• component.tsx — holds the actual component code (what you see on screen)
• component.types.ts — holds the types for the component (what its props should look like)
• index.ts holds the export code for each component i.e. export { default } from "./button"

The index.ts for the component then exports each component by what they’ll be name

/// src/components/index.ts
export {default as Button } from './Button';

And finally the src/index.ts exports all of our components to be used as the entry point for our library when we distribute and publish it.

//src/index.ts
export * from './components';

 

Creating a component story

Now that your typescript component is ready to be used, we can go ahead and create the story that will display the component in our storybook, and allow our users to see how the component behaves. To do this go to your storybook folder

Inside the folder, find stories archive. This is where the stories for your project will live. Stories are isolated spaces for your components. It allows you to easily display a component inside a react native app, and allows you to change its props through the use of knobs. Here is the base button story for my sample project, to better get an idea of what’s going on.

Creating a distribution

Now this is where storybook falls out of the picture, and why the folder structure is important. For this part, you’ll want to install rollup and a few of it’s sister libraries to get things started.

yarn add --dev rollup rollup-plugin-dts rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-terser

Once everything installs, create the following rollup.config.json at the project’s root

 

Finally you’ll want to update your package.json

1. update the main entry point from "main": “node_modules/expo/AppEntry.js" to "main":"dis/cjs/index.js"
2. change dependencies to peerDepencies
3. remove expo dependencies from package.json
4. add the following scripts

"build": "rm -rf /dist && npm run build:esm && npm run build:cjs","build:esm": "tsc","build:cjs": "tsc --module CommonJS --outDir dist/cjs"

If everything installed correctly, running yarn build should create the appropriate dist folder

Releasing library

I use npm to release and once I log in, it’s as simple as updating the version to my library, running yarn build and hitting npm publish to release my library into the wild