What is the recommended way to update project.pbxproj file for the app while upgrading react-native version - react-native

I am using rn-diff to upgrade react-native version for my app. Sometimes, the project.pbxproj is updated to contain some new dependencies or updates to the existing dependencies. What is the recommended way to update this file? I don't think that I can just copy and paste the changes shown in the diff because it may create some duplicates or create some conflicting entries in the file.
For example, below link contains changes made to the project.pbxproj file while changing from version 0.54.4 to 0.55.0. There are a lot changes to the project.pbxproj file and I am not sure if I am supposed to copy them over or I should rather be updating some dependencies myself in Xcode.
https://github.com/ncuillery/rn-diff/compare/rn-0.54.4...rn-0.55.0

In such cases I'm usually sad that I need to do this terrible thing ;)
But being serious: sadly going through RN Diff is like the very best thing that you can do now (unless you have NOT detached Expo.io but then you wouldn't probably ask here). So basically you go through each change that happened between your version and version to which you want to update and copy paste the changes in these files. As rarely you can apply patches (because your project file will be so different that there is no way that it will work out correctly).
My way of doing it is:
- see what changed
- see code block next to it, that is somehow easy to find out in my code (like some block of code that has unique ID + few properties around e.g. can be some native modules that are always there like TEXT or View or whatever, something which is always in RN)
- find the same element in my code and paste the new code above / below that code that was the same
Rinse and repeat

Please take a look at Upgrading to new React Native versions for upgrading your react native version!
Also if you want to update all of your dependencies, you can:
npm i -g npm-check-updates
ncu -u
npm install
And there is a library called npm-check-updates which:
Find newer versions of package dependencies than what your package.json or bower.json allows!

Related

How to get the version of a remote npm package using a bin script

I'm trying to set up an npx script to create a template project.
In package.json I have:
"bin": {
"init": "bin/init"
}
In the init script I'm using tag='v'$(npm pkg get version | tr -d '"') to get the version of the package. I then use git clone --depth 1 --branch $tag https://github.com/matriarx/typescript.git to clone that specific repository for that specific tag.
When I do yarn link and try use it locally, from within that specific project, it works because it's able to correctly pick up the package.json version. So the above only works if it's run inside an existing project. However that's not what I want to do.
I want to enable someone to run it even if they have nothing locally, by simply doing npx #matriarx/typescript init and it should create the new project by cloning it. More than that I want them to be able to clone any specific version by using npx #matriarx/typescript#0.0.1 init in order to clone a specific version.
However it seems that anything I try is only able to get the version from a local package.json that already exists.
I could just clone the current existing repository without specifying any tag, but that would defeat the point of having releases, then it would just clone any current code completely disregarding the release. So it has to clone the tagged release.
How can I get the remote package version stored on npm from the bin script without having anything locally before hand?
Alternatively is there a better way to do what I'm trying to do?
EDIT: I ended up just hardcoding the version in the script, which works but it sucks because it's tedious to have to update it every time I bump the version. Though for now I still don't know a better way to do it.
After some more time messing around I figured out there is a standard way of doing it, at least since npm 7.
If you have a project like example then you can create a completely separate project called create-example with a bin script.
When you use npm init example, npm will automatically search for a package prefixed with "create-" and execute its main bin script. So when running npm init example it will search for that create-example package and execute the bin script, which will install the example package.
This is how most of the bigger packages like react and next do it.
This approach comes with some disadvantages that I really don't like, for example it will show the incorrect dependencies on npm and it will cause you to have to maintain multiple projects and semvers on different projects. However it will also allow you to create a clean separation between the actual project and the installation of that project.
For some projects it might also make a lot more sense. For example if you have a project that doesn't have a package.json at all and you want to create a setup for it, it wouldn't make sense to create an npm package inside that project just for that. Instead you can create a separate "create-project" package just to set it up and keep npm out of the actual project. In other words it gives you a neat way to create bin scripts for a completely separate project that doesn't have anything to do with npm.
You could also just have created a normal shell script and execute it using curl but I guess npm just gives you another way to do it.
You still have to hardcode the version in that "create-project" package, I still have not seen a way to automatically determine the version from a remote package. The only way I've managed to do that is to completely download the package, get the version, then delete it, but that would be terrible for people with a slower internet connection or limited data.

Manually adding Libraries on react-native ^60

Unsure where else to address this.
The autolinker feature is great, however, i've come across issues with adding libraries manually after rn ^60.
A good example would be the PushNotificationIOS library. In the past all that needed to be done was manually add it in the Libraries and tweak Build Phases a little.
https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking
Doing the same process now won't build as the build system cant find the header paths.
So the question is:
Is it the case that manually linking cant work like it used to anymore?
P.S: Another approach would have been to use the #react-native-community versionf of PushNotificationIOS but that seems to be problematic right now because of : https://github.com/react-native-community/react-native-push-notification-ios/issues/16
Here's my upgrade path for 0.60.x with react-native-push-notification, worked after resolving several errors:
Upgrade to latest: yarn add react-native-push-notification
yarn add #react-native-community/push-notification-ios
Ensure any references are removed from your Podfile (including commented references, or react-native will still complain)
in Xcode, remove RNCPushNotification from General -> Linked Frameworks
Remove previous PushNotification code from AppDelegate.m
react-native link #react-native-community/push-notification-ios
If this didn't add code in AppDelegate.m (it didn't in my case) then manually add the code from their GitHub page
One more gotcha - when testing that it works, make sure your app is closed or a local notification won't fire.
The process above resolved all my errors. Hope it works for you!

Why I have too many packages inside my node_modules?

I am new, and when i first created my app based on the documentation using npm create-react-app i found it there were a lot of package included inside folder node_module when i code and i only use react and react DOM and etc from the basic.
node_modules
acorn
timer
ansi
and many more
I wonder if anyone can help my how to understand each use inside the node_module or where can i find the documentation for each use?
or how can i just reduce to what i want to use only to decrease the app size?
The answers are 2:
because you're using an automated scaffolding tool, which essentially does everything for you, and, you have just to code, it is supposed to locally deploy all the packages it needs to work (for example webpack is needed to bundle your code, babel to transpile it, ...
under node_modules you will find all the packages of the whole app. That's means you will find both your dependencies and the dependencies of your dependencies (this rule has some exceptions and you can find them in the npm documentation.
example:
// your code depends on A
var dependency = require('A');
// but then, inside your A dependency you can also find something similar to:
var b = require('B');
how can i just reduce to what i want to use only to decrease the app size?
You basically can't do it. They are all needed.
Most of the libraries that we pull from npm have dependencies. You may use only react and react-dom but there are react-scripts that require lots of stuff. I don't think that you have to worry about the size of the node_modules. That's not what you are suppose to ship in production.
If you want to see what are these all modules about you may open their folder and fine README.md file.

New project with GULP

I made a project using GULP and I downloaded several modules with the NPM cmd. For a new project, should I copy/paste my old project with the files "gulpfile.js", "package.json" and the folder "node_module" or i have to redownload all the modules ? I tried to copy/paste and it worked perfectly, but maybe there is an another way to do it (like download each module with one command line) ?
Thank you !
Copying your old package.json file into your new project is perfectly reasonable when you also use a copy of your existing gulpfile.
Now, instead of copying your node_module folder just run npm install. It does exactly the same thing as copying and pasting but with the added bonus of checking package versions, deprecated dependencies, and so on...
Quick tip: If you ever run into problems as I have deleting/removing packages given that theirs paths might be longer than what the OS allows use the tool rimraf. Install it globally and then you can call rimraf on anything. CAUTION! this tool will erase everything no questions asked

Is it possible to automatically insert version number in code using bazaar?

I am currently working with a coding project using the bzr (bazaar) source code management software. I would like to include the version number in the file code of my project
So that I could call the variable "VERSION" and echo out my current working version.
Within the code be able to do this:
var VERSION = ###;
Where ### is the current version number. Is this possible? or do I have to inspect the bzr info on a file and increment my version manually prior to committing new code?
The only solution I know is the Keyword plugin for Bazaar:
http://doc.bazaar.canonical.com/plugins/en/keywords-plugin.html
(This points to https://launchpad.net/bzr-keywords but the first link has more explanation).
Steps:
Get the plugin
bzr branch lp:bzr-keywords
Install plugin (basically copy it in bazaar plugins install folder)
Get the help
bzr help keywords
Once installed, commit your code with the keywords inside, it will be replaced.
Another option is to invoke the 'bzr version-info' command, which can output the version number in various convenient ways.