Patch-Package to the Rescue! 🛠️✨

👋 Hello everyone! I'm back after a long time haha. This time I'm going to tell you something that I apply and apply in my day-to-day work.

As part of the React Native developer community, I often face challenges when working with third-party libraries, especially when modifications are needed. Especially when aligning these libraries with the latest updates or changes in React Native. In such cases, modifications become necessary.

This article presents patch-package as a very valuable tool 🛠️, which allows React Native developers to work smoothly and overcome these obstacles when modifications to third-party dependencies are needed.

And I will do so by telling a real case 📖.

I was developing with React Native and incorporated the react-native-swipe-gestures library to detect user gestures for expanding or collapsing a customizable modal I created.

But I found a problem during testing on iOS: after implementing swipe gestures, the vertical scrolling within the modal, which had a ScrollView component as a child, stopped working as intended.

The goal was to have a modal that expanded or collapsed based on the user's swipe direction. However, the unintended consequence was the disruption of the vertical scrolling functionality within the ScrollView nested inside the modal. This made it impossible for users to scroll the content vertically, impacting the overall user experience.

So, let's do some magic ✨ I found a temporary solution on Github with pacth-package. How did I solve it?

Firstly, ensure you have patch-package installed in your project. You can install it via npm:

npm install patch-package --save-dev

Creating a Patch
First thing to do: Identify the Issue. You have to locate the bug or the change you want to make within your dependency.

Make Changes:
Once you've identified the issue, make the necessary changes directly in the dependency's code within node_modules.

I made this change on the dependencies:

Generate Patch
After making your changes, run the following command to generate a patch file:

npx patch-package <package-name>

Replace with the name of the package you modified.

In this case what I did was to replace and run the following

npx patch-package react-native-swipe-gestures

This command will create a .patch file inside a patches directory in your project's root folder.

In my case, the results were:

Applying the Patch
To apply the patch during installation or deployment add to Scripts in your package.json, add a script to apply patches after installing or before building your project:

"scripts": {
  "postinstall": "patch-package"
}

Run Postinstall Script
Whenever you run npm install, the postinstall script will automatically apply the patches located in the patches directory.

Easy, isn't it? patch-package streamlines the process of applying temporary fixes to third-party modules, allowing developers to overcome obstacles without waiting for official updates. 🛠️

On the other hand, I would like to remind the importance of thorough testing on different environments and devices. Look how it worked perfectly on Android but not on iOS 😞