Say goodbye to old-fashioned forks thanks to the patch-package.
react-native which changes rapidly and the dependencies are often broken due to framework updates (0.40 iOS headers or 0.47
@Override 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
patch-package 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
yarn add --dev patch-package postinstall-prepare
If you’re wondering why
postinstall-prepare comes along with
patch-package — please refer to the author’s explanation:
Yarn only runs the
yarn add, but not after
yarn remove. The
postinstall-preparepackage is used to make sure your
preparehook gets executed even after a
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 next step.
patch-package script on your library:
yarn patch-package example-library
Note that new folder called patches has been created in your root directory. It contains .patch files for your project.
prepare hook to your package.json scripts:
If you want to know more about
prepare 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
yarn install or
npm install and the changes will be applied automatically.
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 😉
I owe a lot to the fantastic React & React Native community, hence I want to contribute back to it and share some of my knowledge. If you like this article please leave a like!
I provide boutique consultancy services for React and React Native. If you need any help, or just want to say hi, feel free to contact me through my website, or send me an email at email@example.com.