Optimally, the source code of a project should only contain code written by the developers of the project. Yet, we often borrow reusable code from other authors to accomplish recurring tasks. When we use plugins from npm that are connected to a GitHub repository the author retains ownership of their own code. While other projects using the code merely download a copy that won't be added to source control again.

Unfortunately, this approach is sometimes disregarded. Usually, because not anything can be abstracted into a simple package published to npm. Native code for iOS and Android in React Native is a prominent such example. When setting up a new project with the React Native CLI two native apps are created. Once in the /android and the other in the /ios folder.

To solve this issue I've created a wrapper around the existing React Native CLI that will manage changes to native code using patches. This means that only the actual changes made have to be committed in the form of a single patch file.

Introducing numic

Inspired by the apprach taken by patch-package changes to folders will be added to patches that can be committed and will be applied during installation. To achieve this numic will regenerate the `/android` and `/ios` folder for the current react-native version during installation. The contents in these folders no longer have to be committed and are therefore gitignored. For the plugin to keep track of the user made changes a separate copy of the native folders is kept inside the also ignored .numic folder. Using the git cli the contents will be compared and the patches are updated on request or before building and running the native application.

Plugins

Changes to native code is often the same for different apps. React Native plugins use automatic linking to make changes to native code during installation. Numic applies these changes before creating patches so usually nothing needs to be committed to the source code.

Numic also supports plugins that can be placed locally in the /plugin folder or pulled from npm. Packaged plugins coming from npm will automatically be applied if they end with -numic-plugin. An example is icon-numic-plugin as there is no satisfying plugin to create icons from a single file yet. Most developers use an online generator and commit all the scaled icons to the source code. This plugin will generate all variants from a single 1024x1024 icon during the installation.

Creating plugins is simple and consists of exporting a default method that will be provided the location and options. This method can then make changes to the native folders. The repository includes a description of how a plugin looks like.

Difference to Expo?

Expo is another React Native CLI focused on managing native code in order to avoid that the user has to make changes to native code. Expo does this by testing and approving compatibility of certain native modules. Expo includes an enormous amount of existing features and greatly simplifies the creation of apps.

In contrast to expo with numic you always have full access to the native code and can install anything you want. The native code will always be bootstrapped with the current react-native version specified in package.json and unlike with expo you'll never be lagging behind and can always update. Still, the numic approach is more complex and is recommended for people who previously managed their own native folders and just want to commit less code.

Expo is great for developers without native iOS or Android experience getting started with React Native. Numic on the other hand is for JavaScript programmers with just enough understanding of the native folders that they already manage the changes themselves, but are mostly trying to stay out of making changes to native code.