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
Related
I am new to react native. I uses the Cli version. I installed some packages e.g. react-navigation. After the installation I open the ios folder and run pod install. It works fine, but with react-native-vector-icons I have to link it manually like this: react-native link react-native-vector-icons. And I don't have to run pod install. But what if I want to install additional packages after that like sqlite? For this package i have to run pod install. Do I have to reinstall the vector icons after every other package installation? I am new to react-native and I don't now much about "pod install", "linking" and so on. So please give me a bit more details on how to work with adding new packages with this special task.
Many thanks
Jens
Since react-native 0.60 linking is no longer required since it is managed by react-native itself, remember that react-native is something like a "controller" in javascript that sends commands to native code in iOS and Android, pod install is the way you install the iOS native components required by your react-native libraries, something like npm install but for iOS.
react-native-vector-icons has its own iOS libraries, so it requires to run pod install(you should run a pod install everytime you add a new library, eventually you'll understand when you need to run it and when not). There's no harm in running several times pod install so don't worry about it. Also for react-native-vector-icons if I'm not mistaken, you also have to modify info.plist in order to have all the typographies available (This is the "hard" part about this library, it has additional typographies that should be embeded in your project)
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 have an application which runs on react-native 0.49.3
I want to upgrade to the latest version which is v0.57.4.
Should I incrementally update it? For example 0.49 -> 0.50 -> 0.51 etc
Or I can just update it to to the latest version?
Do you suggest using react-native-git-upgrade or rn-diff?
My advice is to upgrade to the latest version. There will be enough dependency issues anyway so you're best dealing with them only once.
From the React Native upgrade page
(https://facebook.github.io/react-native/docs/upgrading)
you can run:
npm install -g react-native-git-upgrade
npm install -g #react-native-community/cli
react-native-git-upgrade
UPDATE 2:
The new command is
npx react-native upgrade
but I believe this is best for upgrading from more recent versions. If you have older versions, the following upgrade process still applies.
UPDATE:
I've never had a problem before with upgrades, but recently joined a project where we upgraded from an old copy of React Native 0.44.3 to a newer version (first to 0.57.8, then to 0.55.4, then to 0.58.3 while struggling with stability) and discovered that it's not always as easy as running those commands. Be warned that this could be a long, tedious process, especially if you have not upgraded regularly and have a long gap between upgrades. In this case, it was 18 months since they had upgraded.
First, there have been changes to the upgrade process itself (react-native upgrade, to now react-native-git-upgrade) itself. So, if you're using a version that's a year old or more there could be some manual discrepancies that you'll have to go through. Some are spelled out after running the react-native-git-upgrade command, and some are not. I was amazed at the number of people on Stack Overflow going through the same undocumented circular issues of a seemingly innocent upgrade. I was not expecting that. I'd be OK with Facebook not adding any features for 6 months and simplifying the upgrade process before moving on.
Second, make sure your version of React Native uses the right dependencies. Later versions of the upgrade tool (react-native-git-upgrade) try to account for this, but double check at https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md to see if the version of RN that you're upgrading to requires a specific dependency. Some do while others do not.
Next, library hades is real, depending on how big your project is. In our case, several modules in use in our 0.44.3 version have now been deprecated or no longer maintained or even work differently with the later versions of RN. I didn't consider this enough when starting this process. This caused several instances of code rewrite just to upgrade!! Yikes!
Also, just as some versions of React Native require specific versions of dependencies, other modules require specific versions of some dependencies. Worse, sometimes these are incompatible and conflicting versions, of various libraries. Save some time and write a user story or two to account for this. Go through every module you're using and see if there are any compatibility statements on their GitHub page. Some Readme files will tell you to use certain versions of their module with certain versions of React Native. Others won't and you may find out later there are requirements. But even going through this process and anticipating issues, you'll thank yourself later.
Once you're up to date and stable, consider upgrading regularly to minimize the upgrade nightmare that I just went through.
You will need #react-native-community/cli to upgrade to the latest version of react-native, sadly not mentioned anywhere.
npm install -g #react-native-community/cli
Install react-native-git-upgrade
npm install -g react-native-git-upgrade
Now go to your project.
cd your-react-native-project
Now you can run the upgrade command.
react-native upgrade
Just change the path to the project for which you want to upgrade the react native version and then run this command:
react-native upgrade
and after running this command you will see some questions. Type n to discard the change to that file or type y if you want to modify that file.
It will automatically install the latest version of react-native for your project.
More info at:
https://facebook.github.io/react-native/docs/upgrading
OR
You can upgrade react native version by this simple step:
1- Just go to package.json file of your project
2- After that, look for these lines
"dependencies": {
"react-native": "0.57.8",
}
3- Change the react-native version to any version that you want to upgrade to in "dependencies".
4- After this run npm install and react native version will be upgraded for your project.
I would recommend using this tool (upgrade helper) which allows you to compare your current react native version and latest react native version.
Also, It's good to upgrade react-native frequently to stay up to date with the latest version and make the upgrade process easy.
https://react-native-community.github.io/upgrade-helper/
I recommend visiting this page: https://github.com/react-native-community/rn-diff-purge
because you can see the list of exactly what changes in each version. I find it's simpler to manually change config settings after starting from your version that is proven to work properly via react-native run-android and react-native run-ios.
It sounds like a horrible task, but it's not very difficult for your fingers or brain to remove red lines and add green lines--at least compared to alternatives such as Googling to sort out horrific error messages in the Android/iOS build systems.
I also believe that it's a good idea to manually change config settings for example going from 0.44 to 0.59 because you get more of an opportunity to see exactly what is changing in each version. You'll see the changes are reasonable and generally have bearing on fostering future automation and increasing the build systems' robustness and aversion to breakage.
Additionally, changes were implemented in RN 0.59 that makes react-native upgrade better, and in addition to my additional statement, the whole 0.59 release is pretty massive and important for future: http://facebook.github.io/react-native/blog/#upgrading-to-059
I'm not even going to talk about react-native upgrade or react-native-git-upgrade because I find those to be generally a source of nightmares especially if you get into react-native unlink and react-native link.
You can update to the latest version directly, I'd recommend to do it with react-native-git-upgrade, but do be careful to read the update release notes on the versions up to yours, they have some notes about things you should do manually that the upgrade will not. You can find the notes here: https://github.com/facebook/react-native/releases
The notes are usually on top in the changelogs, I know the latest releases had some of those and gave me some work to update from 0.54 recently so be aware.
In case there are changes then you can either update them manually by copying and pasting from the changes in the page or you can do it with the React Native CLI upgrade command by running:
npx react-native upgrade
As explained in the docs: https://reactnative.dev/docs/upgrading
react-native upgrade
npm i react-native#{{VERSION}}
npm i react#{{VERSION}}
https://facebook.github.io/react-native/docs/upgrading
https://react-native-community.github.io/upgrade-helper/?from=0.59.9&to=0.61.0
Even with using the new upgrade helper https://react-native-community.github.io/upgrade-helper/ I still run into a bunch of issues and it takes forever to debug them. The best and most reliable way I have found to upgrade after react-native core teams make big changes like adding fast-refresh or flipper that involves a lot of xcode related changes it just start from scratch.
create new repo
npx react-native init newProject
STEP 1 -
make sure the new app runs properly so you know if you have an xcode/react native package issues that need to be upgraded. I know I ran into an xcode issue that forced me to upgrade to a new mac os version.
STEP 2 - pull up old projects xcworkspace or xcodeproj if you are not using any custom pods and just copy over the important stuff like the signing stuff and potentially any custom build scripts you have. I have custom fonts so I pull that over
STEP 3 - copy over app specific code, think app folder or src and any files that live in the root of your project.
STEP 4 - Run npm install and pod install if you have custom pods
STEP 5 - Important not to just paste over the App.js/tsx file but instead just render a simple view with text in it. If your app will run here then it means all your npm/pods are configured properly. Usually I run into a bunch of error in this step which require me to upgrade npm/pods to new version to deal with breaking changes in react-native
STEP 5.a - One by one add in each line from your original App.js/tsx file and testing if anything breaks. Sometimes its useful to reset your metro cache in between changes and removing the build folders inside of ios and android during debugging. Also its very helpful to use the chrome debugger stop on exception functionality here so you know where the issues are coming from
STEP 6 - copy over .git folder from previous project that lives in the root of your project so you can keep your version history or just create a new git repo if you dont care about this.
I have upgraded RN to newer versions in a couple of hours using this method multiple times. I typically write myself some notes while I do it to speed to up the process next time I need to upgrade. Good Luck!
npx react-native upgrade
Should do all the work for you.
use cammand npx react-native upgrade
if you are facing errors it's due to some deprecated packages.So comment all pages and in route and step by step add your pages and replace your deprecated packages with new .
And also use this update helper 'https://react-native-community.github.io/upgrade-helper/'
You can Upgrade with 4 simple step
npm install -g #react-native-community/CLI
npm install -g react-native-git-upgrade
cd your-react-native-project
react-native upgrade
Thanks :)
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”,
I have a question about upgrading react-native version.
We have some choices to upgrade but I don't know differences.
1) react-native upgrade
2) react-native-git-upgrade
3) npm install react-native#latest --save then react-native run-android or react-native run-ios
I used third way for my project because I need to maintain my files in the android folder like MainActivity.java, MainApplication.java, AndroidManifest etc.
could you please describe differences between these ways?
TL;DR
First, you should check out the latest options for upgrading from facebook.
If none of those work for you:
Increase version of react-native in your package.json
run npm install (or yarn if you're using that)
run react-native upgrade or possibly react-native upgrade --legacy
Explanation
Here I address each of the upgrade options you asked about.
1) npm install react-native#latest --save then react-native
run-android or react-native run-ios
As you probably know, the run-* commands here don't perform any type of upgrade.
Meanwhile, npm install --save <library>#<version> is just the command to put a library into your package.json, or update the version of an existing library. This is how you would upgrade the version of any typical library in your package.json. If that's all there was to upgrading RN, there would be no fuss amongst the community about the difficulty of upgrading. There's much more work to do.
If this is the only step you take in upgrading, the new version of react-native will be downloaded to node_modules, but it should fail and complain about many things:
react dependency needs to be upgraded as well
Files under your ios and android directories will not be in the state which the latest react-native expects. For example, if you upgrade from react-native 0.52 to 0.59, you will have gradle 2 while your react-native library expects gradle 4.
Your other dependencies might not work with your newer version of RN. For example, here is a warning from npm install after I did my upgrade:
npm WARN react-native-markdown-renderer#3.2.8 requires a peer of react-native#^0.50.4 but none is installed. You must install peer dependencies yourself.
As you can see, I need to upgrade native-markdown-renderer as well, since it requires RN 0.50 but I've upgraded to 0.59. Some libraries might work in this mismatched state, but that is your risk to take.
2) react-native-git-upgrade
From what I understand, the RN team had too many problems with this product and no longer want us using it. I'm guessing this is why it doesn't work at all for most of us.
3) react-native upgrade
This will update the version of react-native in your package.json, but then also bring you through a set of guided CLI prompt as it modifies the files in your ios and android directories. But how will this guide handle conflicts between the new incoming files and your existing files? You likely have some changes in there you want to keep.
Newer versions of react-native upgrade are said to allow you to perform a diff and merge, but I haven't seen that. When I ran it, it intended to clobber my entire old file with a new one, and it showed me the path on my local file system to the "new" version that would overwrite my old one. So I used my own diffing tool to just diff between the new incoming file and my existing file. If you lack a diff tool, I use p4Merge. So, as you go through the CLI guide, just do a diff between your existing file and the path to the new file it gives you, and do that one by one, adding necessary new lines to your files. If you made some changes, answer "no" to the prompt so that you can keep your old file (with the modifications you just made). If you don't have anything worth keeping in the file, answer "yes" and let the guide simply overwrite and clobber your old file.
When this command is complete, your ios and android directories will be updated. For example, gradle will be upraded from Gradle 2 to Gradle 4.
You may hit the bug I did, which causes this command to keep upgrading you to an OLDER version rather than the latest. In this case, you need to instead run: react-native upgrade --legacy
If it's a smaller project just create a new react native project using 'npx react-native init yourprojectname --version X.XX.Xt' and then copy the source folder of your older project into the new project. Then try running it in android or ios using 'npx react-native run-android' or 'npx react-native run-ios'. If there are any runtime errors but no build errors, then update the npm packages accordingly. Note: This is applicable for small projects because larger projects may contain many 3rd party dependencies. :)
I tried react-native-git-upgrade and then deleted node_modules and then npm install
it works for me!
https://facebook.github.io/react-native/docs/upgrading
The upgrade approaches mentioned in the other answers do work in many cases, but I have experienced many other cases where there are too many errors.
From my experience, in these cases the best approach is to create a new project in the new version, and copy the source files to the new project.