how to delete installed library form react native project - react-native

I have installed a third party library in my project but it is not working , so I want to delete that library from my project ,
How can I do that ?

If it is a library based only on javascript, than you can just run npm uninstall --save package_name or npm uninstall --save-dev package_name
If you've installed a library with native content that requires linking, and you've linked it with rnpm then you can do: rnpm unlink package_name then follow step 1
If you've installed a library with native content manually, then just undo all the steps you took to add the library in the first place. Then follow step 1.
note rnpm as is deprecated

I followed the following steps:--
react-native unlink <lib name> -- this command has done the unlinking of the library from both platforms.
react-native uninstall <lib name> -- this has uninstalled the library from the node modules and its dependencies
Manually removed the library name from package.json -- somehow the --save command was not working for me to remove the library declaration from package.json.
After this I have manually deleted the empty react-native library from the node_modules folder

If you want to unlink already installed packages in react native
$ react-native unlink package_name
$ yarn remove package_name (if it is npm then npm uninstall --save)
If you execute 2nd step before 1st step you need to install relevant package back and execute 2nd step

I will post my answer here since it's the first result in google's search
1) react-native unlink <Module Name>
2) npm unlink <Module Name>
3) npm uninstall --save <Module name

From react-native --help
uninstall [options] uninstall and unlink native dependencies
Ex:
react-native uninstall react-native-vector-icons
It will uninstall and unlink its dependencies.

You can delete installed react native package with this command.
npm uninstall package_name
example:
npm uninstall react-native-camera

remove package name from package.json file
delete package-lock.json file
then run npm install
or you can run the following command to uninstall any package
npm uninstall package_name

you have to check your linked project, in the new version of RN, don't need to link if you linked it cause a problem,
I Fixed the problem by unlinked manually the dependency that I linked and re-run.

For iOS...
Remove the node package and install the pods.
If you're using npm:
npm uninstall package-name
If you're using yarn:
yarn remove package-name
Then simply install pods with:
npx pod-install
Typically the package.json directory is in the root of your project folder, so you should run these from there. npx pod-install will go to your ios folder and will run pod install. You do not need to run this step if you are not adding/removing native components.
I think for Android it might be the same steps, but without running the latter command since Android does not use cocoapods.

Simple and easy solution.
npm uninstall --save react-native-image-slider-box

All of the top answers are a bit outdated. They do work, but the process could be better. So I'm going to post a more modern and 'normal' way.
Assumptions:
Your project is not overly old, meaning that your project is not using react-native version <0.60 (less than 0.60). This is because in the past (when you had react-native version <0.60), you had to manually run commands like react-native unlink when you wanted to uninstall a package. Those commands still work but are no longer necessary.
The library/package works with autolinking or it doesn't need linking at all because the package doesn't use native code. If the package's installation instructions don't require you to run a command to link the package (e.g. react-native link), then it uses autolinking or it doesn't need linking at all. A package might suggest you run the link command but they'll also usually say it's not required if your project's react-native is version >=0.60. The majority of libraries are like this now. I'd be surprised if the package you want to uninstall uses native code but doesn't support autolinking. Read more about autolinking.
If the package you want to uninstall doesn't use native code, then the above paragraph about autolinking doesn't matter.
You of course remembered to remove any use of the package in your project, before you try to uninstall it.
You've checked if other packages require the package you want to delete as a peer dependency. In this case, you removing that dependency can cause your other packages to not work.
If your package was installed without any manual editing of native files (e.g. android/settings.gradle, ios/yourappname/AppDelegate.m, etc.) or any other configuration (e.g. mypackage.config.js), then you should just do this:
If using npm, run npm uninstall <yourpackage>. If using yarn, run yarn remove <yourpackage>.
(React native uses autolinking to unlink the packages automatically so this is all you should need to do to 'unlink'. Read more.)
Run cd ios && pod install && cd ..
You can skip this step if you're absolutely sure that the package is purely written in JavaScript/Typescript. My opinion is to just run it anyway so that way your brain doesn't have to spend energy thinking/worrying about this.
That's it. You're good to go. If you're not good to go here, then something is very wrong.
If you did have to manually edit native files or any other extra configuration to install your package, then:
It's a good idea to get all the info you can on what you exactly did when you installed the package. Any additional context you can learn is good.
You should look at your git history to see the changes you did when you installed the package.
It's a good idea to read the package's README or docs to remind you of anything else you might have forgotten.
In addition to the package's most up-to-date README or docs, it's a good idea to try to read the package's README/docs from the exact version that you're trying to uninstall. If you just read the README from the package's main github page, for example, then the info might be too new.
Undo the manual changes you did when installing the package. Ideally, use git diff or a git GUI program to help you out with this. Because this process varies depending on the package and what you actually did, it's hard to be more specific than that.
If using npm, run npm uninstall <yourpackage>. If using yarn, run yarn remove <yourpackage>.
(React native uses autolinking to unlink the packages automatically so this is all you should need to do to 'unlink'. Read more.)
Run cd ios && pod install && cd ..
You can skip this step if you're absolutely sure that the package is purely written in JavaScript/Typescript. My opinion is to just run it anyway so that way your brain doesn't have to spend energy thinking/worrying about this.
That's it, done. If things are not good at this point, then something is very wrong.
Remember to upvote if you feel this helped you, so it can be more visible. Thanks!

Uninstalling local packages:
npm uninstall <package_name>
for example:
npm uninstall react-native-webview
Uninstalling global packages:
npm uninstall -g <package_name>
for example:
npm uninstall -g react-native-webview

Related

How to upgrade all libraries in an old react native project?

I have some experience in react native but I am relatively new to the field. I have cloned a react native project but it is very old and it contains a lot of libraries that are also either depricated or conflicting. I want to make the project compile as its not compiling now too because of the conflicting library issues. Any help or guidance regarding what i should do to make it work?
I have tried a number of things like deleting node modules and package-lock and running npm install but it doesnt run so I used --force but it still didnt make it work then I used npm install --legacy-peer-deps and it still didnt work.
i tried to upgrade the specific libraries that were mentioned in the errors but they also failed.
right now I have no idea what should be done.
As of npm version 5.2.0+, we can update all our dependencies without installing any additional packages.
Run the command in the root of your project:
npx npm-check-updates -u && npm i
"npx npm-check-updates -u" the command just updates the package.json that’s why we need tonpm i after the update the package.json.
for more info click here

how do i add yarn package to react native project installed with npm?

Note: Do guide me if something is missing.
So, I wanted to install a package from https://rnfirebase.io/auth/usage, but I have an npm project. The command on the website has only for yarn. I don't want to add yarn to project because (Is there any harm in using NPM and Yarn in the same project?) it states that it is not recommended.
So, then how do I install it with npm?
You have to use yarn, or you can look for a package that has the functions that you are looking for using npm
You can install it with npm just fine, don't worry. They are all package managers installing npm packages from the same repository. There is no difference in what you are installing or how they are installed. You can get different node_module structures, but for yarn you need config for that.
Yes its not recommended because it generates different lockfiles that will dictate different structures and versions in your node_modules folder. You want multiples devs to have the same "experience". However, lots of JS frameworks will come pre-configured with yarn, like React Native and you just end up having two lockfiles. One for npm and one for yarn. There is no harm in deleting the yarn file and keeping the package-lock. If you delete both, a new lockfile for the package manager you are using will be generated on npm i | yarn i | pnpm anyway.
To install it with npm just use npm i <PACKAGE_NAME> so npm i #react-native-firebase/app.
Here is the npm repo page for that package, https://www.npmjs.com/package/#react-native-firebase/app, notice the install command is npm! Only reason firebase devs only mention yarn is because they are hipsters ;)

react-native-twitter-lite: Error: Unable to resolve module 'crypto'

I have followed the instructions to install react-native-twitter-lite via npm page ....as per below:
npm install twitter-lite
....then on app.js:
import Twitter from 'twitter-lite';
const twtClient = new Twitter({
consumer_key: 'xxxx',
consumer_secret: 'xxxx',
});
...I get error Unable to resolve module crypto from node_modules\twitter-lite\dist\twitter.js: crypto could not be found within the project
...even though I can see that the file node_modules\twitter-lite\dist\twitter.js exists
The issue might be that cryptojs is missing from your dependencies (not installed in your app), but react-native-twitter-lite still need it to run for security. You surely have the twitter.js but not the crypto.js. Cryptojs is used by twitter-lite to cypher and encrypt data. You may choose to use Nodejs's crypto module or react-native's build-in cryptojs. I always choose the later one for a more native behavior. For that, simple run
npm install react-native-crypto-js --save.
The first time I run into this issue this source helped me understand.
This happens to me, most likely when installing a new package to my project, I didn't try to install react-native-twitter-lite , but my general approach is :
Try to install the missing module yourself , in your case, install Crypto
Delete node_modules and install the dependencies again, run rm -rf node_modules && npm install
run your project npm start and then npm run android && npm run ios
If you install native module you will need to rebuild your app. It’s jut hot reloadable.
If that’s not your issue, but you’re using typescript, you may be missing a dependency that can fortunately be resolved using:
npx typesync
Are you using Expo or Xcode/Android Studio? If Expo, note that Expo handles a Bare and a Managed workflow. If you are using a managed workflow you may have these issues since Expo is managing native modules for you so you may want to check if Expo has a similar dependency to what you’re using, otherwise you may want to eject from Expo.
If developing for iOS, you may also want to check if you’ve installed the pods you need. You can do this using the following:
npx pod-install from root of project directory (likely same directory as package.json)
All else fails:
rn -rf node_modules
npm install && npx pod-install
(If usingTypescript also try npx typesync)
If developing for Android, make sure you add necessary code on gradle file, can be pasted anywhere (likely in docs)

Error while running the existing React Native project

So I'm opening my the existing React Native project. This is the procedure on how I opened my existing React Native project. 1st step, type the location of my project which is in the "D:\rnprojects\firstproject\". 2nd step, "react-native-start". 3rd step, I opened another cmd then locate it again into my project directory then typed "npm start".
Why when I created this project I didn't get this error just when runnning/opening my existing project.
This the error that I got: (with versions)
There is only simple steps can solve your particular scenario issue quickly.
1) Install the React native cli in your project or globally.
npm install -g react-native-cli
OR
npm install react-native --save
then start your project by using this command
npm start
If any dependencies issue please follow the second solution
2) Please make sure you're installed all dependence
yarn install
OR
npm install
under your project directory
I'm pretty sure your issue will fix by using 1st solution Thanks.
it is simple:
1.npm install
2.react-native run-android
Here I guess you have the RN environment to run already on your side.
cd path_to_project
install packages(there are two following ways to install packages).
2.1 yarn install
2.2 npm install
react-native link(optional - you need to run this command if existing project use RN packages which need to link such as
react-native-vector-icons)
optional(if project use pods) cd ios pod install
react-native run-ios or react-native run-android according to the platform which you want to run on.
I don't think above is perfect instruction give you how to run the existing react-native project, But I am pleasure if give me some hints or help to you.
You can find official guide here
Sometimes npm's cache gets confused and need to reset it by using below command:
npm cache clean --force
Also try below command:
npm install --save-dev react-native-cli
Hope it will help you.

React-native-maps failed to install

I am new to react-native and I want to install react-native-maps. However whenever I run npm install react-native-maps --save in the project folder, the project breaks with node_modules/react-native become empty with only an empty folder node_modules inside. I am following the installation guide from the official github now and using react-native 0.55.3.
Below attached with a dump when I call npm install react-native-maps --save:
screen_dump: react-native-maps install failure:
There is a known issue which is fixed with v5.7.0 (As far as I know. Didn't try it myself).
After updating your npm to a newer version, you should delete node_modules and do a clean install with npm install to reinstall all necessary packages.
One other option is to use yarn. I think it is a little better tool for package management. (Personal preference. You don't have to use it). If you decide to use yarn, you should still delete node_modules and do a clean install with yarn install
Install yarn package manager from the following link
enter link description here
Use following command to install the package.
yarn add react-native-maps
This might be works. Yarn packager is better than npm for me.