Fix bugs in React Native packages and their Android code

In this blog post we'll address how to fix bugs in packages & native code with as little effort possible.

How do packages work?

Packages installed with npm i package_name are downloaded to the folder node_modules/package_name. A React Native package contains folders like android, ios, src, ... just like any React Native app.

With some React Native magic, the Android code is added to your app project and actually viewable in Android Studio. After the initial wait till it's loaded, you can actually edit this code as well! Just mind that, when you npm i again, all your alterations to packages are gone. But it's an easy way to change code & test in your app.

Apply the fix

So go ahead and fix your native code!

Take in mind when testing native changes, that a simple npx react-native run-android doesn't pick up java changes from packages.

It's best to run gradlew clean to make sure it compiles all java code:

cd android
./gradlew clean
cd ..

Patch Package

The package Patch Package reallly is an enormous time saver. What it basically does is generate a git patch that will be applied on the package in node_modules/package after installing. The patch is a simple git change file.

So when you've tested your changes, it's time to generate your patch. Check instructions on Patch Package. Usually it is something like:

npx patch-package some-package

This will generate a file: patches/some-package+1.2.3.patch containing all changes that you've done to the package.

Android Studio probably generated a few files and changes that you don't need to add. Remove them from the patch and you are ready to commit your code and get it in review 🤩.

Improve the open source package

Now that you saved the day for your app project, it's time to also improve the open source package and save the world 😉.

  1. Fork the repo to your own account
  2. Clone the code
  3. Apply your change
  4. Testing is often harder, as most React Native packages don't have example apps that use the local code immediately
  5. Commit your code under a feature/branch
  6. Open a PR accross forks to the original repo

Once the fix is approved and released, you can update your dependency and get rid of your patch 🎉.

But I really want to test this

Once your code is commit'd & pushed, you can actually add this as a dependency in a project:

"dependencies": {
    "example-package": "git+https://github.com/eliaslecomte/example-package.git#c2f4b5d6d01ba761f309a84bff4320d717902af2"
}

Just replace the version with an url like above and the commit hash of your fix. Install & test!