was facing this issue in my React native project
Issue:
1. Have two repos -
a. Main React Native App GitHub repo
b. Library repo - Example - https://github.com/testlib
Main React native App repo uses library repo as a package.
So, added an entry in package.json
Example -
"devDependencies": {
“test-lib”: “testlib”
}
Then I did yarn install. Everything worked fine. Saw the testily repo changes add as package in /node_modules.
Further, I updated the testlib repo with some changes and thought that if I do yarn install again in my main app repo will give me the latest changes within my main app.
But, found that the updated changes were not included in my main repo /node_modules
If your package.json dependency for test-lib points to a git repository and not to some sort of tag definition (as #udai describes) then a regular yarn install will not look for changes to the git repository as based on the lock file, that dependency is satisfied.
What you can do as an alternative to tagging (useful if you are actively developing the module and are not at a point where tagging is appropriate) is either use:
yarn upgrade - This will upgrade all dependencies though.
yarn upgrade test-lib - This should upgrade just your test-lib based on what the docs say.
yarn add <git-repo path/url> - This will install the latest version of that module (see docs). Use this instead of yarn add test-lib since I assume that your package isn't published yet (or that your changes aren't publicly published yet).
I suggest reading through the yarn docs to familiarize yourself with what they actually do by default.
Solution:
I created release tags for each update which I wanted my main App to include.
So, I created 2 release tags - v1.0.0 for first commit and then v1.0.1 for the update which I wanted to include later in my main repo.
Since, tags has been added for new updates, I had to do some small changes in my main App repo package.json file.
“test-lib”: “testlib”
REPLACED to:
“test-lib”: “testlib#v1.0.1”,
Related
I'm writing an internal UI library here.
I'm using react-native-builder-bob and it works great, I can test my components in the example folder/app and focus on the library development, but when I link the lib into my-app (yarn link && cd ../my-app/ && yarn link my-lib) and run a pod install (cd ios && pod install), the dependencies from the example app end up in my-app podfile.lock like this:
EXSplashScreen:
:path: "../node_modules/my-library/example/node_modules/expo-splash-screen/ios"
I'm not ok with it ending up as a direct dependency. And I'm definitely not OK with it breaking my app on launch (my app doesn't use expo) because I don't even invoque any of expo stuff.
So, how can I make sure that I can develop and test things in both projects (example and my-app) without one interfering into each other?
I know I can:
delete example node modules when writing my-app code: but I don't want to do that.
pack the lib with yarn pack, extract the tar contents and link that instead (it doesn't include the example folder)... but it's somehow weird
make the Podfile RN script ignore the example folder.. but I don't know how to do it, and will it work for android?
Edit:
About the option 3, it seems that the script that includes sub folders is the react-native-unimodules cocoapods.rb one, it fetches all packages that have unimodules.json
It's not a direct dependency. Unfortunately npm link/yarn link doesn't have the same behavior as a published package. It's also intended for development and not for consuming the package in an app.
To have the proper behavior, you need to publish the package to a registry and consume it from there. The example isn't uploaded when publishing.
To test this behavior locally you can:
Use something like https://verdaccio.org/ for a local NPM server
Run npm pack to create a tgz package that you can install with yarn install /path/to/file
i am working with React Native and there are several packages like react-native-fetch-blob, react-native-photo-view and other that for release build require higher version of SDK, that the one that they are installed with.
Everytime i reinstall the node_modules and i am making a new build after that i have to change these settings manualy to be higher and to match those in the main build.gradle file that i have.
Is there any way that i can save these settings in these libraries so i don't have to change them manually every time i am making a new release build ?
patch-package lets you instantly make and keep fixes to npm dependencies
install patch-package with npm or yarn, then make changes you want on specific package then run:
npx patch-package some-package
finally commit your changes
What is the purpose of the react-native link command?
Note: from React-Native 0.60.0 linking packages using react-native link has become redundant. Autolink has been added to the React-Native CLI which means that iOS will now use cocoapods and Android will use gradle. You can read more about Autolinking here.
What is react-native link?
react-native link is an automatic way for installing native dependencies. It is an alternative to manually linking the dependency in your project. It works for both Android and iOS.
When linking a project manually the majority of the steps are the same and so using react-native link allows you to install the native dependency with less fuss and without having to type similar code or perform similar actions repeatedly.
However, it should be noted that running react-native link will not always link a package fully, sometimes additional steps are required and you should check carefully with the installation instructions.
Always read the instructions carefully before installing a dependency and linking it.
iOS Considerations
If your project is using CocoaPods and the dependency that you are linking has a .podspec then when you use run react-native link it will update your Podfile. This is instead of adding the files directly to your Xcode project. You will also have to run pod install inside your ios directory otherwise the native dependency won't be fully installed.
Sometimes installing using CocoaPods can cause more issues, and not every dependency needs to be installed with CocoaPods you could always follow the steps that I outlined in this SO answer to stop react-native link adding a dependency to the Podfile, it is not ideal but it is a workaround. Some dependencies require additions to be made to the Podfile, so you should only do this if the dependency doesn't require pods to run.
react-native link or react-native link dependency-name
Should you just use react-native link when linking any dependency or should you be more explicit and use react-native link dependency-name?
From my experience it is better to use react-native link dependency-name. This is due to the fact that react-native link will try to link (or re-link) all the dependencies that can be linked and this can lead to code duplication. Most of the issues that I have experienced have been when the Android native dependency is being linked. I think there has been some headway in stopping this from happening in subsequent updates, but the old adage applies here once bitten, twice shy
Linking good practice
When using react-native link dependency-name you should follow good practice so that you don't get stung. Sometimes dependencies that you try don't work as expected and removing all the code that was added during the linking process can be tricky. (Xcode project files can be a nightmare to go through if you are unfamiliar with them).
This is how I install dependencies and then link them.
Make sure that you are using version control, like git.
Make sure your code is fully committed with no unsaved changes.
Create a new branch, and check it out.
Install your dependency npm i dependency-name
Then link you dependency react-native link dependency-name
Perform any additional installation steps that the dependency requires. See the installation instructions for the dependency.
Check that your code works with the new dependency.
commmit changes and merge the branch.
Manual Linking
If you prefer to link your native dependencies manually then you should either follow the instructions on the dependency's website or you can look at the documentation that react-native provides.
Currently there is only an explanation on how to manually link iOS projects.
Manually linking Android requires you to make changes in the following locations:
settings.gradle
app/build.gradle
MainApplication.java
As always for the exact changes that you should make you should look at the dependency's manual linking instructions.
Do I have to link?
It depends on the dependency that you are using some dependencies use only code written in Javascript, so it is not required to link them, and there is no benefit served by running react-native link dependency-name.
However, if the dependency contains native code then you will have to link. Either manually or by using react-native link dependency-name.
How can I tell if I need to link the dependency?
Firstly you need to check the website, the github repo, or the npmjs.com page for the dependency. There will usually be instructions there telling you whether to link the dependency after you have installed it.
If you cannot find any instructions about linking, you (probably) won't need to link it.
If you are still unsure, check with the dependency maintainer.
Can I just run link anyway?
Yes, you can it won't do anything if there is nothing to link. But always run it with react-native link dependency-name to avoid issues.
When do I run link?
You only run it after you have installed your dependency. I would recommend running it just after you have installed the dependency. You should then check to make sure that it works, before installing any new dependencies so that you can easily debug.
You shouldn't need to run it more than once per dependency.
It doesn't matter how many components or changes to the javascript code that you make it won't affect the linking, as the linking is purely native and components are javascript.
What is autolink?
Autolink is a new feature that is being added to the react-native-cli. You can read more about autolink here.
Autolink replaces react-native-link
Autolinking is a mechanism built into CLI that allows adding a
dependency with native components for React Native to be as simple as:
yarn add react-native-webview
Autolinking is a replacement for react-native link that brings new features (such as ability to easily integrate native dependencies on iOS) and fixes some of the long-standing issues.
Once it is fully implemented it should make adding dependencies with native-code to your project much easier.
Linking native library means that you are going to integrate already implemented module into your application or module which completes your react native's module functionality.
Steps to integrate lib(android):
1) Add package name to new packages() 2) Add dependencies to settings.gradle file and main application's gradle i.e app/gradle file. 3) sync the projects gradle because you made changes in the gradle and it's done.
All manual steps like below you have to perform
1) Go to your project's home dir using cmd.
2) run npm install
3) Thereafter run rnpm link or react-native link
4) see ios folder in your project folder and if you find any pod file then run pod install after navigating into ios folder in cmd.
now instead,
1) Go to your project's home dir using cmd.
2) run npm install
3) Thereafter run rnpm link or react-native link
4) see ios folder in your project folder and if you find any pod file then run pod install after navigating into ios folder in cmd.
When you've installed a library with native content(android or ios) then you need to require linking to the component react-native library.
like this
react-native link react-native-sound-player
When you installed any third party library with native content,you have to link the dependencies in android and ios. react-native link is responsible for including the dependencies in gradlew and pod files.
for suppose you installed react-native-vector-icons package then you have to link in your gradlew files. the new version of react native 0.60 has auto linking.
npm install react-native-vector-icons
react-native link react-native-vector-icons
Thanks for asking this question
if you are working with fonts
react-native link is used for linking the fonts and assets to project
link command is also for linking the libraries to react-native
But now React-native too better so there is no need to link the library
we can use
pos install
npx jetify
it will automatically link the libraries
react-native link is an automatic way for installing native dependencies. It is an alternative to manually linking the dependency in your project. It works for both Android and iOS
I'm using a self made component library to share components between my projects. The problem is that even after using the Authoring libraries guide by webpack it keeps including those dependencies in my main build and I am out of ideas on what setting that this is caused by...
Build analysis (when bundling my app)
Here you can see the node_modules and wizer-components/node_modules. Including react-dom twice (and others)
Build analysis (of a component)
As you can see no node_modules are bundled here...
Setting files
Because I can't find where the issue lies I have created gists of my config files:
webpack.config.js (of component library)
webpack.config.production.js (of app)
Setup
Just as info, I'm using a monorepo setup with lerna to npm link the dependency of (wizer-components) without the need to push it to npm as a module. Could this be an issue in where webpack thinks that it needs to re-add the react (and others)?
After a total of 4 days of trying to make this work (was doing this before I asked the question), I managed to solve it (FINALLY)!
The issue was with lerna / NPM link and dependency resolving, see handy links at the bottom of this answer.
I fixed it by doing the following steps:
Moving the dependencies (react, react-dom) to peerDependencies in the wizer-components (my component library) package.json file
Removing all my node_modules folders (app and component library)
Running $ lerna bootstrap to re-download my node_modules
Removing my build process of my component library (I build these when I build my app)
Changing my webpack.config.production.js in these key areas
(did a picture because it wouldn't format it right on here -_-
Helpful links (also look at the comments):
How to avoid React loading twice with Webpack when developing
npm link doesn't play nice with peer dependencies
How to avoid loaded two copies of React error when developing an external component?
I'm developing react-native app based on the latest 0.15.0 release via the NPM install/update method. Looking through the react-native MapView documentation it appears that it should support "image" prop in the "annotations" prop and "overlays" prop in the MapView. However, those props didn't work in my RN release.
After looking through the various branches in the react-native GitHub, I discovered that only the master branch has those props in MapView (See this). Since I'm keeping up with the RN releases via NPM. It is unclear to me how I can develop against the RN master branch.
Any idea?
One way that I can think of is to do a git pull of the master branch in my npm's node_modules and overwrite the react-native module. However, that seems drastic and I would also pull in many unneeded parts that requires deletion.
Another idea is to manually copy the master branch's MapView component and the corresponding iOS native files RCTMap… over but that seems inelegant and tedious.
Looking for a more elegant solution here.
You should be able to specify a git dependency in your package.json, like this:
"dependencies": {
"react-native": "facebook/react-native",
},
npm will automatically clone the repo when installing. If you want to pin to a particular commit (highly recommended), do facebook/react-native#f025049b.
(Note that this strategy won't work for some packages like react itself which require a build step before npm, but react-native should work fine like this.)
You could clone react native's repo locally and install it on your project:
> git clone https://github.com/facebook/react-native.git
> cd MyProject
> npm install ../react-native
For those in a similar position, but unwilling or unable for whatever reason to follow the master branch, you might consider waiting for the features.
From one of the primary contributors (paraphrased): React Native has a roughly 2 week cadence. A release candidate (rc) is derived from master at some point which begins the cycle. Two weeks later, it is promoted to release, and a new release candidate is created from the current state of master. The cycle then repeats. The MapView features you are hoping to use should show up in the next rc.