How to Create your First React Native npm Package in TypeScript?

So you have decided to create your own React Native npm package and publish it...

That’s great!  

I would love to support you on this quest. In today’s article, I will guide through some of the best pre-existing packages that allow us to accomplish package creation. 

But before we start, let’s make a step-by-step list of all the tasks you need to take care of during package creation with TypeScript.

• Initial setup 
• Project structure
• Dependency
• TypeScript configuration
• Bridge linking
• Linting
• Formatting (keep your code readable)
• .gitignore and .npmignore
• Tests (jest, react-native-testing-library)
• Example documentation
• Package documentation
• Publishing 

There are quite a lot of things to do, right? 😉

Luckily, there are other solutions to handle all these tasks and add configured TypeScript to the package to automate all processes. 

1. react-native-module-template 

Let’s take a quick review for the package:

1. Support of TypeScript
2. Configured bridge
3. Latest version of React Native
4. Package has a well structured and clear configuration that you can adjust to your own goals and programming habits.
5. Styles and linting: customizable linting and prettier what based on gts (google TypeScript package).
6. Settled tests - you can easily add test with configured Jest
7. Ready example folder - simply addition

In short words: easy config to rapid React Native module development with modern standards and the latest versions of libraries.

Highly recommended!

2. react-native-community/bob: 👷‍♂️ A simple CLI to scaffold and build React Native libraries

This package allows you to scaffold the module or install modules in existing projects.

The main features that this package offers are:

• Simple example modules for Android and iOS which you can build upon;
• Kotlin configured for building the module on Android;
• C++ support for native modules on Android and iOS;
• Expo support for libraries without native code and web support;
• Exemplary React Native app to manually test your modules;
• ESLint, Prettier, TypeScript, Husky and Release It pre-configured;
• Bob pre-configured to compile your files;
• CircleCI pre-configured to run tests on the CI.

Additionally, the following targets are covered by the package:

• Generic CommonJS build;
• ES modules build for bundlers such as webpack;
• Flow definitions (copies .js files to .flow files);
• TypeScript definitions (uses tsc to generate declaration files);
• Android AAR files.

As we can clearly see, the configuration is pretty massive and extensive. What's more, the package supports native libraries and web too.

3. brodybits/react-native-module-init

This utility will help you to create native React Native modules and views. It contains interactive CLI, what will allow you to cover all the info about your module:

It is also less opinionated than react-native-community/bob, meaning that you will have more freedom of doing things your way and not be led by hand by the creators.

4. brodybits/create-react-native-module

This package allows you to create a React Native module or native view component with usage of CLI.

It is based on the previous one from the same author. Supports creation of a boilerplate with all modern best practices in mind. If your goal is a native module creation for React Native, you will need some tool that allows you to put all the native code for IOS/Android platforms together. 

And this is the right instrument to use.

Summary and choosing time

All the packages described by me above have the same purpose but provide different kinds of tools and implementations that every developer finds useful for different problems.

I personally prefer react-native-module-template in my projects, as it handles all my needs and is up to all the latest standards. 

What tools do YOU use to cover all tasks of module creation, such as bridge linking and TS integration? Do you prefer some manual/own scripts solutions or something tool-based like the packages described above?

Let me know!

PS And if you look for some more React Native-related knowledge, make sure to check out our comprehensive React Native guide.