add 'manually handling deep linking' guide (#607)

co-authored-by: dewolff@github.com

Author: WoLewicki

website/versioned_docs/version-2.x/deep-linking.md

@@ -44,7 +44,7 @@ You need to specify a scheme for your app. You can register for a scheme in your
 
 ### URI Prefix
 
-Next, let's configure our navigation container to extract the path from the app's incoming URI. 
+Next, let's configure our navigation container to extract the path from the app's incoming URI.
 
 ```js
 const SimpleApp = createStackNavigator({...});
@@ -67,7 +67,6 @@ xcrun simctl openurl booted exp://127.0.0.1:19004/--/chat/Eric
 
 ```
 
-
 ### Android
 
 To test the intent handling in Android (Expo client app ), run the following:
@@ -87,7 +86,7 @@ Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linkin
 
 ### URI Prefix
 
-Next, let's configure our navigation container to extract the path from the app's incoming URI. 
+Next, let's configure our navigation container to extract the path from the app's incoming URI.
 
 ```js
 const SimpleApp = createStackNavigator({...});
@@ -139,6 +138,7 @@ To test the URI on a real device, open Safari and type `mychat://chat/Eric`.
 To configure the external linking in Android, you can create a new intent in the manifest.
 
 In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adjustments:
+
 1. Set `launchMode` of `MainActivity` to `singleTask` in order to receive intent on existing `MainActivity`. It is useful if you want to perform navigation using deep link you have been registered - [details](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters)
 2. Add the new `intent-filter` inside the `MainActivity` entry with a `VIEW` type action:
 
@@ -154,7 +154,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
         <action android:name="android.intent.action.VIEW" />
         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE" />
-        <data android:scheme="mychat" />            
+        <data android:scheme="mychat" />
     </intent-filter>
 </activity>
 ```
@@ -180,3 +180,28 @@ const SimpleApp = createStackNavigator({...});
 
 const MainApp = () => <SimpleApp enableURLHandling={false} />;
 ```
+
+Then, to handle the URL with the parameters, you can use `Linking` in your components to react to events.
+
+```js
+componentDidMount() {
+    // [...]
+    Linking.addEventListener('url', this.handleDeepLink)
+}
+componentWillUnmount() {
+    // [...]
+    Linking.removeEventListener('url', this.handleDeepLink);
+}
+```
+
+And the method to handle it :
+
+```js
+handleDeepLink(e) {
+    const route = e.url.replace(/.*?:\/\//g, '')
+    // use route to navigate
+    // ...
+}
+```
+
+This should get you started! 🥳

website/versioned_docs/version-3.x/deep-linking.md

@@ -12,35 +12,41 @@ In this guide we will set up our app to handle external URIs. Let's suppose that
 Previously, we had defined a navigator like this:
 
 ```js
-const SimpleApp = createAppContainer(createStackNavigator({
-  Home: { screen: HomeScreen },
-  Chat: { screen: ChatScreen },
-}));
+const SimpleApp = createAppContainer(
+  createStackNavigator({
+    Home: { screen: HomeScreen },
+    Chat: { screen: ChatScreen },
+  })
+);
 ```
 
 We want paths like `chat/Eric` to link to a "Chat" screen with the `user` passed as a param. Let's re-configure our chat screen with a `path` that tells the router what relative path to match against, and what params to extract. This path spec would be `chat/:user`.
 
 ```js
-const SimpleApp = createAppContainer(createStackNavigator({
-  Home: { screen: HomeScreen },
-  Chat: {
-    screen: ChatScreen,
-    path: 'chat/:user',
-  },
-}));
+const SimpleApp = createAppContainer(
+  createStackNavigator({
+    Home: { screen: HomeScreen },
+    Chat: {
+      screen: ChatScreen,
+      path: 'chat/:user',
+    },
+  })
+);
 ```
 
 If we have nested navigators, we need to provide each parent screen with a `path`. All the paths will be concatenated and can also be an empty string. This path spec would be `friends/chat/:user`.
 
 ```js
-const AuthSwitch = createAppContainer(createStackNavigator({
-  AuthLoading:  { screen: AuthLoadingScreen },
-  App: {
-    screen: AppStack,
-    path: '',
-  },
-  Auth: { screen: AuthStack },
-}));
+const AuthSwitch = createAppContainer(
+  createStackNavigator({
+    AuthLoading: { screen: AuthLoadingScreen },
+    App: {
+      screen: AppStack,
+      path: '',
+    },
+    Auth: { screen: AuthStack },
+  })
+);
 
 const AppStack = createStackNavigator({
   Home: { screen: HomeScreen },
@@ -73,7 +79,7 @@ You need to specify a scheme for your app. You can register for a scheme in your
 
 ### URI Prefix
 
-Next, let's configure our navigation container to extract the path from the app's incoming URI. 
+Next, let's configure our navigation container to extract the path from the app's incoming URI.
 
 ```js
 const SimpleApp = createAppContainer(createStackNavigator({...}));
@@ -96,7 +102,6 @@ xcrun simctl openurl booted exp://127.0.0.1:19004/--/chat/Eric
 
 ```
 
-
 ### Android
 
 To test the intent handling in Android (Expo client app ), run the following:
@@ -116,7 +121,7 @@ Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linkin
 
 ### URI Prefix
 
-Next, let's configure our navigation container to extract the path from the app's incoming URI. 
+Next, let's configure our navigation container to extract the path from the app's incoming URI.
 
 ```js
 const SimpleApp = createAppContainer(createStackNavigator({...}));
@@ -168,6 +173,7 @@ To test the URI on a real device, open Safari and type `mychat://chat/Eric`.
 To configure the external linking in Android, you can create a new intent in the manifest.
 
 In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adjustments:
+
 1. Set `launchMode` of `MainActivity` to `singleTask` in order to receive intent on existing `MainActivity`. It is useful if you want to perform navigation using deep link you have been registered - [details](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters)
 2. Add the new `intent-filter` inside the `MainActivity` entry with a `VIEW` type action:
 
@@ -183,7 +189,7 @@ In `SimpleApp/android/app/src/main/AndroidManifest.xml`, do these followings adj
         <action android:name="android.intent.action.VIEW" />
         <category android:name="android.intent.category.DEFAULT" />
         <category android:name="android.intent.category.BROWSABLE" />
-        <data android:scheme="mychat" />            
+        <data android:scheme="mychat" />
     </intent-filter>
 </activity>
 ```
@@ -209,3 +215,28 @@ const SimpleApp = createAppContainer(createStackNavigator({...}));
 
 const MainApp = () => <SimpleApp enableURLHandling={false} />;
 ```
+
+Then, to handle the URL with the parameters, you can use `Linking` in your components to react to events.
+
+```js
+componentDidMount() {
+    // [...]
+    Linking.addEventListener('url', this.handleDeepLink)
+}
+componentWillUnmount() {
+    // [...]
+    Linking.removeEventListener('url', this.handleDeepLink);
+}
+```
+
+And the method to handle it :
+
+```js
+handleDeepLink(e) {
+    const route = e.url.replace(/.*?:\/\//g, '')
+    // use route to navigate
+    // ...
+}
+```
+
+This should get you started! 🥳

website/versioned_docs/version-4.x/deep-linking.md

@@ -218,3 +218,28 @@ const SimpleApp = createAppContainer(createStackNavigator({...}));
 
 const MainApp = () => <SimpleApp enableURLHandling={false} />;
 ```
+
+Then, to handle the URL with the parameters, you can use `Linking` in your components to react to events.
+
+```js
+componentDidMount() {
+    // [...]
+    Linking.addEventListener('url', this.handleDeepLink)
+}
+componentWillUnmount() {
+    // [...]
+    Linking.removeEventListener('url', this.handleDeepLink);
+}
+```
+
+And the method to handle it :
+
+```js
+handleDeepLink(e) {
+    const route = e.url.replace(/.*?:\/\//g, '')
+    // use route to navigate
+    // ...
+}
+```
+
+This should get you started! 🥳