Skip to content

Commit

Permalink
Replace deprecated link process (#6269)
Browse files Browse the repository at this point in the history
Running `react-native link` will be deprecated in the following major versions of rn-cli.

React Native Navigation recommends the `react-native link` command to install the library, although it already implements Autolinking. These causes the library to make unnecessary modifications to the project it's installing to, which are already handled in Autolinking. 

However, since manual steps need to be completed, we are benefiting from the `"postlink"` hook in the `link` command which allows to run any set of scripts after the link has completed, in our case the node script `./autolink/postlink/run.js`.

I propose using the `bin` field from npm's package.json to perform these tasks from a single command and without using react-native link. I named it "rnn-link" and it can be run via `npx rnn-link` from the root of the project right after `yarn add react-native-navigation`.

I've updated the docs to reflect this, plus some minor changes I feel are necessary, after some work with these scripts and the install process. I still feel some parts are confusing, specially the iOS manual link (the hardcore way).

Feel free to propose any changes!

This was developed with the support of @underscopeio 🥳
  • Loading branch information
Eduardo Pelitti authored Jun 9, 2020
1 parent daa48ca commit 4c3ed45
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 10 deletions.
2 changes: 2 additions & 0 deletions autolink/postlink/run.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
#!/usr/bin/env node

// @ts-check
var { infon, warnn } = require("./log");
var postLinkAndroid = require("./postLinkAndroid");
Expand Down
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
"type": "git",
"url": "https://github.com/wix/react-native-navigation.git"
},
"bin": {
"rnn-link": "./autolink/postlink/run.js"
},
"main": "lib/dist/index.js",
"typings": "lib/dist/index.d.ts",
"scripts": {
Expand Down Expand Up @@ -163,4 +166,4 @@
}
}
}
}
}
35 changes: 26 additions & 9 deletions website/docs/docs-Installing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,27 @@ sidebar_label: Installation
* node >= 8
* react-native >= 0.51

## npm
## npm or yarn
* `npm install --save react-native-navigation`

## Installing with `react-native link`
If you're using RN 0.60 or higher, you can link RNN automatically with react-native link.
...or if you use `yarn`:

Unlike most other libraries, react-native-navigation requires you to make a few changes to native files. To make all the necessary changes, run
* `yarn add react-native-navigation`

```react-native link react-native-navigation```
## Installing with `npx rnn-link`
If you're using RN 0.60 or higher, you can benefit from autolinking for some of the necessary installation steps. But unlike most other libraries, react-native-navigation requires you to make a few changes to native files.

in your project's root folder. Make sure to commit the changes introduced by the link script.
We've simplified the process through a set of scripts. So to make all the necessary changes automatically, in your project's root folder run:

If the link script completed successfully, you're good to go! If one of the steps failed, you'll need to complete the relevant step in the manual installation steps below.
```npx rnn-link```

Make sure to commit the changes introduced by the `rnn-link` script.

> The automatic linking is optimized for new applications created via the `react-native init` command. If you are migrating from a version of react-native-navigation older than v5, it's recommended to check the steps manually after the script runs.
If the link script completed successfully, you're good to go! No more native configuration is required.

If one of the steps failed or you can't run (or are not comfortable with) the automatic scripts, you'll need to complete the relevant steps in the manual installation steps below, for both platforms.

## Displaying the app root

Expand Down Expand Up @@ -54,10 +62,17 @@ import App from "./App";
+ });
+});
```

If you followed the steps successfully up to this point, then this should be all!

:::tip
This is a good moment to build your application in both platforms, validate that everything is working properly and commit your changes. If you're coming from a fresh `react-native init` project, then you should be seeing the Welcome screen as usual, but under the hood your application is using react-native-navigation!
::::

___

## Manual Installation
If installation with react-native link did not work, follow the manual installation steps below.
If installation with `npx rnn-link` did not work, follow the manual installation steps below.

### iOS

Expand Down Expand Up @@ -111,7 +126,9 @@ end

#### Native Installation

If all else fails, we can always try and install the hardcore way:
> If the React Native version in your project is above 0.60 and you are following the manual installation, skip to step 3.
If autolinking is not available in your project (RN version < 0.60), you can always try and install the hardcore way:

1. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)).

Expand Down

0 comments on commit 4c3ed45

Please sign in to comment.