Say Goodbye to Old-Fashioned Forks Thanks to the Patch-Package

In short

In the dynamic world of JavaScript, encountering the need to fork a library for minor fixes, especially within the realm of React Native, is not uncommon. This article discusses common scenarios where forking is the norm, and how the introduction of the library <rte-code>patch-package<rte-code> by David Sheldrick offers an elegant solution.

#powerofopensource

Have you ever been in a situation when you had to fork the library to apply some fix to your app? While working with JavaScript and all the environment around it I found this situation to occur quite often. Especially when it comes to <rte-code>react-native<rte-code> which changes rapidly and the dependencies are often broken due to framework updates (0.40 iOS headers or 0.47 <rte-code>@Override<rte-code> annotation did a lot of damage to non-maintained libs).

Let’s think about the other situations. You’re working with a team of few developers. One guy from your team has to make a change in one of your dependencies and forks it into his private account (yes, I’ve seen this quite many times). A month later he decides to change his job and deletes the forked library. Now you have to re-implement the missing stuff.

Of course you could keep the forks within your company’s or your client’s repositories, but there is no reason to do it anymore since now you can use an amazing library called <rte-code>patch-package<rte-code> created by David Sheldrick. Remember that throwing a PR that fixes the issue along with the patches for your library is still the best idea #powerofopensource.

How to use it?

Using it is very simple and straightforward. You can do this by following a few simple steps:

Let’s say I want to patch a dependency called <rte-code>example-library<rte-code>.

#1 Install the patch-package dependency:

If you’re wondering why <rte-code>postinstall-prepare<rte-code> comes along with <rte-code>patch-package<rte-code> — please refer to the author’s explanation:

Yarn only runs the <rte-code>prepare<rte-code> hook after <rte-code>yarn<rte-code> and <rte-code>yarn add<rte-code>, but not after <rte-code>yarn remove<rte-code>. The <rte-code>postinstall-prepare<rte-code> package is used to make sure your <rte-code>prepare<rte-code> hook gets executed even after a <rte-code>yarn remove<rte-code>.

#2 Do the changes in your node_modules/example-library

…just like you would edit your regular project files. When all the fixes/enhancements are applied, go to the next step.

#3 Run the patch-package script on your library:

screenshot of patch-package script

Note that new folder called patches has been created in your root directory. It contains .patch files for your project.

one-line example of patches

#4 Add prepare hook to your package.json scripts:

If you want to know more about <rte-code>prepare<rte-code> and other hooks used by yarn and npm— check out the scripts section in npm docs.

Now you can commit the changes and push them straight to the repo. Your co-workers, as well as continuous integrations systems, can use your dependency updates.

You just have to run <rte-code>yarn<rte-code>, <rte-code>yarn install<rte-code> or <rte-code>npm<rte-code> install and the changes will be applied automatically.

another screenshot of patch-package script

That’s it! Now your patch will be applied “auto-magically” when you use yarn and no one in your organization has to bother about doing fixes on their own anymore.

I hope it will make your life a bit easier. 😉

Discover services offered by our React Native development company.

FAQ

No items found.
React Galaxy City
Get our newsletter

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.