How to use patch-package to patch TSX files

Question

Problem

I'm trying to use patch-package to patch a react-native package react-native-tab-view, however when I edit the TSX files included in the node_module for react-native-tab-view and apply my patch, the changes are not reflected in my app.

Structure of node_modules/react-native-tab-view

Below is a screenshot of the package structure. Package Structure

They also uses @react-native-community/bob to build the package prior to publishing so it generates a lib folder with a module folder and commonjs folder containing JS files.

My current stats

My patch is being created, however the files in /lib/module don't change and the changes are also not reflected in my app when running on the simulator

I'm trying to apply a patch using patch-package after editing the TSX files in /src as opposed to the JS files in module /lib/module as it is much simpler to implement.

Environment react-native 0.63.0 patch-package 6.2.0 react-native-tab-view 2.15.1 react-native-gesture-handler 1.5.6 react-native-reanimated 1.7.0

Question Am I missing a build or compile step to get react-native-tab-view to generate new JS files from the TSX files I created my patch for?

Any help would be greatly appreciated!

Answer 1

Usually when a npm package is published it published also with a transpiled version, therefore you should modify the transpiled version with patch-package.

In the case of react-native-tab-view, the transpiled version is located in lib folder.

You can verify that by checking the lib's package.json,

  "main": "lib/commonjs/index.js",
  "react-native": "lib/module/index.js",
  "module": "lib/module/index.js",

Update

My trick is to clone the original repo locally, install it's deps, modify what ever you want in the source (src), then build it, and copy the build result over the node_modules in your package, then apply the patch-package.