8

I want to add a Card component to this module: https://snack.expo.io/@xcarpentier/gifted-chat (demo)

For example, if using onLongPress() on the Bubble Message, i want additional info to appear (right below that Bubble Message, as a small card, like Tinder Card).

How do I do that? Do I need to clone the source code and then modify it to fit what I need?

David C. Rankin
  • 81,885
  • 6
  • 58
  • 85
Vũ Nguyễn Duy
  • 93
  • 1
  • 6

2 Answers2

18

Although you are able to edit the file in your node_modules folder, it is not a great long-term solution. Why not?

  • The process is not consistent with using other modules
  • Another npm install will overwrite your changes
  • Your solution won't be available to someone else wanting to implement that feature

Bad Solution

If you would still like to go this route, the quickest way to go about it would be by linking it via npm. In the event this link is not available anymore, you can link a module following these steps:

  1. In your terminal, navigate to the node module you have modified
  2. Create a global symlink with npm link
  3. Navigate to your app's root directory
  4. Reference that symlink with npm link name-of-module

Again, this is not a permanent solution and should only be used for quickly testing modifications to a module.

Better Solution

Forking the repo is a good way to maintain the commits specific to that module, and you can share your modifications to the open-source community. Some reasons to fork are explained in the Github help wiki, but doing it is pretty straight-forward.

  1. Navigate to the Github repo of the package you are wanting to change
  2. Press the Fork button in the top right corner
  3. npm install git+your-forked-repo-url in your project's root directory (don't forget to npm uninstall the old one)

Now, you can follow the process mentioned in the Bad Solution to locally test out changes to that package. After you're satisfied with them, you can copy those changes over to your forked repo and push them to Github (you'll want bump your version, but you may have some merge conflicts to resolve if you ever want to merge changes with the upstream repo). Then do another npm install of your repo make those changes more permanent in your node_modules folder.

If you would like to stay up-to-date with the repo you forked from, Github explains the process here.

TL;DR

Choose the Better Solution.

Community
  • 1
  • 1
Ezra
  • 1,118
  • 9
  • 13
  • thanks a lot, this really open my mind. Suggest me ways I can deep my head down to research more. – Vũ Nguyễn Duy Jul 14 '18 at 17:08
  • Hi, i tried this npm install git+https://github.com/wix/react-native-camera-kit.. but its not installed – user Nov 26 '19 at 05:10
  • @user because it's a native module, the setup for getting it installed has some extra steps. The React Native [documentation](https://facebook.github.io/react-native/docs/native-modules-setup) has the generic steps to link native modules for use within your project, but you should try to follow the steps given on the repository for the module itself. – Ezra Nov 26 '19 at 11:07
  • 3
    After forking you can use it in package.json like "your-plugin-name": "https://github.com/your-username/forked-plugin", – Artur Haddad Jun 23 '20 at 01:07
1

I found a solution in this stackoverflow answer which IMO is simpler - using patch-package and does not require forking repositories.

Nivedita Singh
  • 11
  • 1