Clarification: How to add the customize package inside my app in react-native

Question

I have changed a react-native package src component as per my requirement. How can I add that in my app?

(i.e) I have added react-native-floating-action and changed some styles in FloatingActionItem.js and FloatingAction.js file. How can I add the changes inside in my app.

Because If I remove the node module all the changes are gone after installing it again.

Just keep copy of your current copy safe, remove currently installed one. npm/yarn install — Samin, Mar 12 '20 at 06:18
As per your suggestion, I think i need to make a copy inside any one of my project folder and then need to remove the node_modules and then need to add that path and then yarn install. Then all the changes in that package will reflect for me. — sejn, Mar 12 '20 at 06:27

score 5 · Answer 1 · answered Mar 12 '20 at 06:39

5

In your case, once you have modified npm package once you have to reinstall all packages and your changes are not be saved because you are installing dependency from GitHub repository. So anyway you have two options to edit npm package and save it.

Copy code from the original repository and make your own component inside your re-usable components folder. ( Before copy whole code read the license of selected package )
Simply you can fork the original repository to your github account and after that you can make changes to forked repository.

Personally I choose Second (2) option instead of First one

STEPS

Fork from the original repository
After that make clone of this forked repo to your machine and change whatever you need (Here styles).
After changing push the changes and commit into your forked repo
After that you need to remove old original package from your dependency

npm uninstall --save react-native-floating-action

After that install forked repo by this command

npm install git+https://git@github.com/myRepo/angular-translate.git

Instead of https://git@github.com/myRepo/angular-translate.git add your forked project URL here

answered Mar 12 '20 at 06:39

Akila Devinda

5,054
3
19
35

How to delete a forked package – sejn Mar 12 '20 at 06:46
`npm uninstall --save git+https://git@github.com/myRepo/angular-translate.git` – Akila Devinda Mar 12 '20 at 06:48
While pushing the changes I got permission denied error – sejn Mar 12 '20 at 06:59
You need to push with your personal access token. If you have not generate token, then you need to generate and add it to your github – Akila Devinda Mar 12 '20 at 07:06
https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line – Akila Devinda Mar 12 '20 at 07:07
Use your access token as password -> https://stackoverflow.com/questions/18935539/authenticate-with-github-using-a-token – Akila Devinda Mar 12 '20 at 07:09
Did you have any other ways? Because [2] is a good approach. But the personal git URL are not accepted while moving the app to production – sejn Mar 16 '20 at 09:12

score 1 · Answer 2 · answered Mar 12 '20 at 06:39

You can write a custom script using JavaScript which capable of replace, delete and add lines.

NPM automaticly execute postinstall after npm install command. You need to put your custom script in postinstall within package.json. For an example:

package.json:

{
    "name": "my_package",
    "description": "",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "fix:issue": "node ./scripts/issue.js",
      "postinstall": "npm run fix:issue"
    },
    "repository": {
      "type": "git",
      "url": "https://github.com/ashleygwilliams/my_package.git"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "bugs": {
      "url": "https://github.com/ashleygwilliams/my_package/issues"
    },
    "homepage": "https://github.com/ashleygwilliams/my_package"
  }

Samin · Answer 3 · 2020-03-13T03:14:25.217

0

Keep your copy on root project folder or anywhere you prefer.
yarn remove <current package name in package.json>.
If this is native library, run pod install again for iOS.
yarn add file:/path-to-local-edited-package-folder
Rest of the steps will work same (pod install, etc)

Another approach as you mentioned (I don't suggest it as native libraries might not be removed completely)

Remove package from package.json.
On package.json file "library name same as current": "./<path to your folder>" or any other location.
yarn install

edited Mar 13 '20 at 03:14

answered Mar 12 '20 at 06:35

Samin

275
5
13

In [1] I need to make the entire copy of that package in my root folder? – sejn Mar 12 '20 at 06:42
yes the entire folder of that exact package. The root folder name – Samin Mar 12 '20 at 06:43
Okay, But this is a good approach or not? (i.e) this folder has the all changes and all files from that package. But I have only simple changes in two files alone – sejn Mar 16 '20 at 09:10

Clarification: How to add the customize package inside my app in react-native

3 Answers3

STEPS