How to Publish React Native Components for Reuse

Publishing and reusing React Native components across applications with Bit.

React Native components, just like ReactJS, are built for reuse.

Reusing React native components across applications speeds up your development, makes it easier to maintain your codebase, and makes sure that your users will enjoy a consistent experience at every touchpoint.

However, publishing many components for reuse can also be a challenge that requires a lot of work, documentation, and teamwork. This work can be streamlined, simplified, and scaled using new tools built for this purpose.

Bit is an open-source tool that helps you develop, publish and manage components across many applications. It is completed by the bit.dev platform, where all your components are organized, documented, and become available to reuse. It streamlines the process of publishing and documenting JS components.

Example: Exploring React components published on Bit

In this post, I’ll show how to use Bit to independently version, publish, and document React Native components from, essentially, any React Native app.

My published components will then be available on a public collection on Bit.dev, where others can read their docs, try them in a live playground, and install them using NPM, Yarn, or Bit. This collection can be gradually expanded to create a fully functional reusable system of components.

The “My Store” app and its published components

Building a React Native Store App: “My Store”

Demo project on GitHub:
JoshK2/mystore
A simple products list store build with React Native components and then shared them to a collection on bit.dev.

npx react-native init mystore

Any store needs some way to present its products. To make that happen, I’ll create 3 components:

• Product: Shows the image, title, description and price.

• Button: Adds the product to the shopping cart.

• Products list: Receive a list of products and displays them vertically.

  src
  └── components
  ├── button.js
  ├── product.js
  └── products-list.js

For example, the “Button” component:

I’ve used prop-types for all my components. That will serve two purposes:

1. As with any other use of prop-types, my components will be safer to use.

2. Bit will use my prop-types definitions to create documentation for each component. That would also be the case with TypeScipt and JSDocs (alternatively, you can add an .md file to your component).

Publishing the “My Store” Components to Bit

1. Install Bit globally.

npm install bit-bin --global

1. Initialize a new “Bit Workspace” (in the project’s root directory).

bit init

1. Track all components under the components directory (similar to git add ). While doing this, Bit will automatically define each unit as a “component” with all its relevant files, dependencies etc. This is very useful when you seek to develop and publish many components in the same repository.

bit add src/components/*

1. Configure my tracked components to use the React Native compiler available in Bit’s “ENVs” collection.

Wit hBit, we configure a compiler to decouple the soon-to-be-published components from the app’s build setup. This way, we make sure they’ll work in other future environments.

That’s done by importing the compiler as I would with any other published component and adding the -c flag to set it as a compiler (this will be added to Bit’s configurations in package.json )

bit import bit.envs/compilers/react-native -c

1. Bit lets you version each component independently, which is great for reuse at a slightly larger scale. Tag all components to record all changes and lock versions. The -a flag marks all tracked components. We could also specify the new version number but, here, I’ve left that to Bit.

bit tag -a

Now if you run bit status, you’ll see that each component got its own version. Remember that Bit tracks every component’s dependencies as well as changes to its code, so from now on when you make a change, Bit will help you tag and bump the version of all components impacted by the change.

1. Publish all tracked components.

For this, I’ll first head over to Bit.dev, open a free account, and create a new component collection. I’ll name this collection “mystore-app-components”. Once done, I’ll continue to publish them to my new collection.

bit export joshk.mystore-app-components

My components are now published on Bit! 🎉
mystore-app-components by joshk · Bit
A demo store components build with React Native - 3 Javascript components. Examples: product , products-list , button

https://bit.dev/joshk/mystore-app-components

All my components are now reusable, and I can share them between the different applications that I or my team are building.

You can browse through the component pages, see each component rendered in Bit’splayground (using an example code I’ve written).

You can choose to either install components like any other package using NPM/Yarn or to “clone” components into your project using bit import .

Imported or “cloned” components (bit import) can be modified in any codebase using them and pushed back with a bumped version. That makes collaboration possible even across repositories.

Happy coding and sharing!