From bfff3fa856e7ffb163927958b2b4f8ecdebb79cc Mon Sep 17 00:00:00 2001 From: Erivelton Elias Date: Fri, 28 Dec 2018 16:36:21 -0200 Subject: [PATCH 1/3] add more information about deep link for expo projects --- docs/deep-linking.md | 38 ++++++++++++++++ .../version-1.x/deep-linking.md | 45 ++++++++++++++++++- .../version-2.x/deep-linking.md | 44 +++++++++++++++++- .../version-3.x/deep-linking.md | 44 +++++++++++++++++- 4 files changed, 168 insertions(+), 3 deletions(-) diff --git a/docs/deep-linking.md b/docs/deep-linking.md index 53f04bff317..8a059e51d8b 100644 --- a/docs/deep-linking.md +++ b/docs/deep-linking.md @@ -40,12 +40,50 @@ const SimpleApp = createAppContainer(createStackNavigator({...})); // on Android, the URI prefix typically contains a host in addition to scheme // on Android, note the required / (slash) at the end of the host property const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; +// in Expo projects you can do the following to get the URI prefix +const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` ## Set up with Expo projects +you need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: + +```json +{ + "expo": { + "scheme": "mychat" + } +} +``` +### iOS + +To test the URI on the simulator (Expo client app ), run the following: + +``` +xcrun simctl openurl booted [ put your URI prefix in here ] + +// for example + +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: + +``` +adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" com.simpleapp + +// for example + +adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19004/--/chat/Eric" com.simpleapp + +``` + Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linking.html) for more information about how to configure linking in projects built with Expo. ## Set up with `react-native init` projects diff --git a/website/versioned_docs/version-1.x/deep-linking.md b/website/versioned_docs/version-1.x/deep-linking.md index 6b42be6b141..28816f4483b 100644 --- a/website/versioned_docs/version-1.x/deep-linking.md +++ b/website/versioned_docs/version-1.x/deep-linking.md @@ -39,13 +39,52 @@ Next, let's configure our navigation container to extract the path from the app' const SimpleApp = StackNavigator({...}); // on Android, the URI prefix typically contains a host in addition to scheme +// on Android, note the required / (slash) at the end of the host property const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; +// in Expo projects you can do the following to get the URI prefix +const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` ## Set up with Expo projects +you need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: + +```json +{ + "expo": { + "scheme": "mychat" + } +} +``` +### iOS + +To test the URI on the simulator (Expo client app ), run the following: + +``` +xcrun simctl openurl booted [ put your URI prefix in here ] + +// for example + +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: + +``` +adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" com.simpleapp + +// for example + +adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19004/--/chat/Eric" com.simpleapp + +``` + Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linking.html) for more information about how to configure linking in projects built with Expo. ## Set up with `react-native init` projects @@ -94,11 +133,15 @@ To configure the external linking in Android, you can create a new intent in the In `SimpleApp/android/app/src/main/AndroidManifest.xml`, add the new `VIEW` type `intent-filter` inside the `MainActivity` entry: ``` + + + + - + ``` diff --git a/website/versioned_docs/version-2.x/deep-linking.md b/website/versioned_docs/version-2.x/deep-linking.md index 0aa143c7478..245dbf57eb3 100644 --- a/website/versioned_docs/version-2.x/deep-linking.md +++ b/website/versioned_docs/version-2.x/deep-linking.md @@ -41,12 +41,50 @@ const SimpleApp = createStackNavigator({...}); // on Android, the URI prefix typically contains a host in addition to scheme // on Android, note the required / (slash) at the end of the host property const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; +// in Expo projects you can do the following to get the URI prefix +const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` ## Set up with Expo projects +you need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: + +```json +{ + "expo": { + "scheme": "mychat" + } +} +``` +### iOS + +To test the URI on the simulator (Expo client app ), run the following: + +``` +xcrun simctl openurl booted [ put your URI prefix in here ] + +// for example + +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: + +``` +adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" com.simpleapp + +// for example + +adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19004/--/chat/Eric" com.simpleapp + +``` + Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linking.html) for more information about how to configure linking in projects built with Expo. ## Set up with `react-native init` projects @@ -95,11 +133,15 @@ To configure the external linking in Android, you can create a new intent in the In `SimpleApp/android/app/src/main/AndroidManifest.xml`, add the new `intent-filter` inside the `MainActivity` entry with a `VIEW` type action: ``` + + + + - + ``` diff --git a/website/versioned_docs/version-3.x/deep-linking.md b/website/versioned_docs/version-3.x/deep-linking.md index aea14c13d64..3eaca48014a 100644 --- a/website/versioned_docs/version-3.x/deep-linking.md +++ b/website/versioned_docs/version-3.x/deep-linking.md @@ -41,12 +41,50 @@ const SimpleApp = createAppContainer(createStackNavigator({...})); // on Android, the URI prefix typically contains a host in addition to scheme // on Android, note the required / (slash) at the end of the host property const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; +// in Expo projects you can do the following to get the URI prefix +const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` ## Set up with Expo projects +you need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: + +```json +{ + "expo": { + "scheme": "mychat" + } +} +``` +### iOS + +To test the URI on the simulator (Expo client app ), run the following: + +``` +xcrun simctl openurl booted [ put your URI prefix in here ] + +// for example + +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: + +``` +adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" com.simpleapp + +// for example + +adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19004/--/chat/Eric" com.simpleapp + +``` + Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linking.html) for more information about how to configure linking in projects built with Expo. ## Set up with `react-native init` projects @@ -95,11 +133,15 @@ To configure the external linking in Android, you can create a new intent in the In `SimpleApp/android/app/src/main/AndroidManifest.xml`, add the new `intent-filter` inside the `MainActivity` entry with a `VIEW` type action: ``` + + + + - + ``` From 9bb8d1ff133823586d96310224db4b23c897d570 Mon Sep 17 00:00:00 2001 From: Erivelton Elias Date: Fri, 28 Dec 2018 17:36:23 -0200 Subject: [PATCH 2/3] separate deep link section for expo projects / vanilla react native projects --- docs/deep-linking.md | 40 +++++++++++------- .../version-1.x/deep-linking.md | 42 ++++++++++++------- .../version-2.x/deep-linking.md | 40 +++++++++++------- .../version-3.x/deep-linking.md | 40 +++++++++++------- 4 files changed, 101 insertions(+), 61 deletions(-) diff --git a/docs/deep-linking.md b/docs/deep-linking.md index 8a059e51d8b..91d54243698 100644 --- a/docs/deep-linking.md +++ b/docs/deep-linking.md @@ -29,6 +29,17 @@ const SimpleApp = createAppContainer(createStackNavigator({ })); ``` +## Set up with Expo projects + +You need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: + +```json +{ + "expo": { + "scheme": "mychat" + } +} +``` ### URI Prefix @@ -37,26 +48,11 @@ Next, let's configure our navigation container to extract the path from the app' ```js const SimpleApp = createAppContainer(createStackNavigator({...})); -// on Android, the URI prefix typically contains a host in addition to scheme -// on Android, note the required / (slash) at the end of the host property -const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; -// in Expo projects you can do the following to get the URI prefix const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` -## Set up with Expo projects - -you need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: - -```json -{ - "expo": { - "scheme": "mychat" - } -} -``` ### iOS To test the URI on the simulator (Expo client app ), run the following: @@ -88,6 +84,20 @@ Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linkin ## Set up with `react-native init` projects +### URI Prefix + +Next, let's configure our navigation container to extract the path from the app's incoming URI. + +```js +const SimpleApp = createAppContainer(createStackNavigator({...})); + +// on Android, the URI prefix typically contains a host in addition to scheme +// on Android, note the required / (slash) at the end of the host property +const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; + +const MainApp = () => ; +``` + ### iOS Let's configure the native iOS app to open based on the `mychat://` URI scheme. diff --git a/website/versioned_docs/version-1.x/deep-linking.md b/website/versioned_docs/version-1.x/deep-linking.md index 28816f4483b..5868c6fd2e6 100644 --- a/website/versioned_docs/version-1.x/deep-linking.md +++ b/website/versioned_docs/version-1.x/deep-linking.md @@ -30,6 +30,17 @@ const SimpleApp = StackNavigator({ }); ``` +## Set up with Expo projects + +You need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: + +```json +{ + "expo": { + "scheme": "mychat" + } +} +``` ### URI Prefix @@ -38,26 +49,11 @@ Next, let's configure our navigation container to extract the path from the app' ```js const SimpleApp = StackNavigator({...}); -// on Android, the URI prefix typically contains a host in addition to scheme -// on Android, note the required / (slash) at the end of the host property -const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; -// in Expo projects you can do the following to get the URI prefix const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` -## Set up with Expo projects - -you need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: - -```json -{ - "expo": { - "scheme": "mychat" - } -} -``` ### iOS To test the URI on the simulator (Expo client app ), run the following: @@ -89,6 +85,20 @@ Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linkin ## Set up with `react-native init` projects +### URI Prefix + +Next, let's configure our navigation container to extract the path from the app's incoming URI. + +```js +const SimpleApp = StackNavigator({...})); + +// on Android, the URI prefix typically contains a host in addition to scheme +// on Android, note the required / (slash) at the end of the host property +const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; + +const MainApp = () => ; +``` + ### iOS Let's configure the native iOS app to open based on the `mychat://` URI scheme. @@ -110,7 +120,7 @@ In `SimpleApp/ios/SimpleApp/AppDelegate.m`: In Xcode, open the project at `SimpleApp/ios/SimpleApp.xcodeproj`. Select the project in sidebar and navigate to the info tab. Scroll down to "URL Types" and add one. In the new URL type, set the identifier and the url scheme to your desired url scheme. -![Xcode project info URL types with mychat added](./assets/deep-linking/xcode-linking.png) +![Xcode project info URL types with mychat added](/docs/assets/deep-linking/xcode-linking.png) Now you can press play in Xcode, or re-build on the command line: diff --git a/website/versioned_docs/version-2.x/deep-linking.md b/website/versioned_docs/version-2.x/deep-linking.md index 245dbf57eb3..a533a03aeb1 100644 --- a/website/versioned_docs/version-2.x/deep-linking.md +++ b/website/versioned_docs/version-2.x/deep-linking.md @@ -30,6 +30,17 @@ const SimpleApp = createStackNavigator({ }); ``` +## Set up with Expo projects + +You need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: + +```json +{ + "expo": { + "scheme": "mychat" + } +} +``` ### URI Prefix @@ -38,26 +49,11 @@ Next, let's configure our navigation container to extract the path from the app' ```js const SimpleApp = createStackNavigator({...}); -// on Android, the URI prefix typically contains a host in addition to scheme -// on Android, note the required / (slash) at the end of the host property -const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; -// in Expo projects you can do the following to get the URI prefix const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` -## Set up with Expo projects - -you need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: - -```json -{ - "expo": { - "scheme": "mychat" - } -} -``` ### iOS To test the URI on the simulator (Expo client app ), run the following: @@ -89,6 +85,20 @@ Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linkin ## Set up with `react-native init` projects +### URI Prefix + +Next, let's configure our navigation container to extract the path from the app's incoming URI. + +```js +const SimpleApp = createStackNavigator({...}); + +// on Android, the URI prefix typically contains a host in addition to scheme +// on Android, note the required / (slash) at the end of the host property +const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; + +const MainApp = () => ; +``` + ### iOS Let's configure the native iOS app to open based on the `mychat://` URI scheme. diff --git a/website/versioned_docs/version-3.x/deep-linking.md b/website/versioned_docs/version-3.x/deep-linking.md index 3eaca48014a..42d2ac2d3ad 100644 --- a/website/versioned_docs/version-3.x/deep-linking.md +++ b/website/versioned_docs/version-3.x/deep-linking.md @@ -30,6 +30,17 @@ const SimpleApp = createAppContainer(createStackNavigator({ })); ``` +## Set up with Expo projects + +You need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: + +```json +{ + "expo": { + "scheme": "mychat" + } +} +``` ### URI Prefix @@ -38,26 +49,11 @@ Next, let's configure our navigation container to extract the path from the app' ```js const SimpleApp = createAppContainer(createStackNavigator({...})); -// on Android, the URI prefix typically contains a host in addition to scheme -// on Android, note the required / (slash) at the end of the host property -const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; -// in Expo projects you can do the following to get the URI prefix const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` -## Set up with Expo projects - -you need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: - -```json -{ - "expo": { - "scheme": "mychat" - } -} -``` ### iOS To test the URI on the simulator (Expo client app ), run the following: @@ -89,6 +85,20 @@ Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linkin ## Set up with `react-native init` projects +### URI Prefix + +Next, let's configure our navigation container to extract the path from the app's incoming URI. + +```js +const SimpleApp = createAppContainer(createStackNavigator({...})); + +// on Android, the URI prefix typically contains a host in addition to scheme +// on Android, note the required / (slash) at the end of the host property +const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; + +const MainApp = () => ; +``` + ### iOS Let's configure the native iOS app to open based on the `mychat://` URI scheme. From cdb636debf911c860e3252e83da02247401ac0b6 Mon Sep 17 00:00:00 2001 From: Brent Vatne Date: Sat, 29 Dec 2018 12:06:37 -0800 Subject: [PATCH 3/3] Update deep-linking.md --- docs/deep-linking.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/deep-linking.md b/docs/deep-linking.md index 91d54243698..07f5de654c0 100644 --- a/docs/deep-linking.md +++ b/docs/deep-linking.md @@ -31,7 +31,7 @@ const SimpleApp = createAppContainer(createStackNavigator({ ## Set up with Expo projects -You need to specify a scheme for your app. You can register for a scheme in your `app.json` by adding a string under the scheme key: +First, you will want to specify a url scheme for your app. This corresponds to the string before `://` in a url, so if your scheme is `mychat` then a link to your app would be `mychat://`. The scheme only applies to standalone apps and you need to re-build the standalone app for the change to take effect. In the Expo client app you can deep link using `exp://ADDRESS:PORT` where `ADDRESS` is often `127.0.0.1` and `PORT` is often `19000` - the URL is printed when you run `expo start`. If you want to test with your custom scheme you will need to run `expo build:ios -t simulator` or `expo build:android` and install the resulting binaries in your emulators. You can register for a scheme in your `app.json` by adding a string under the scheme key: ```json { @@ -41,11 +41,14 @@ 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. ```js +import * as Expo from 'expo'; + const SimpleApp = createAppContainer(createStackNavigator({...})); const prefix = Expo.Linking.makeUrl('/'); @@ -53,21 +56,21 @@ const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` -### iOS +The reason that is necessary to use `Expo.Linking.makeUrl` is that the scheme will differ depending on whether you're in the client app or in a standalone app. + +### Test deep linking on iOS -To test the URI on the simulator (Expo client app ), run the following: +To test the URI on the simulator in the Expo client app, run the following: ``` xcrun simctl openurl booted [ put your URI prefix in here ] // for example -xcrun simctl openurl booted exp://127.0.0.1:19004/--/chat/Eric - +xcrun simctl openurl booted exp://127.0.0.1:19000/--/chat/Eric ``` - -### Android +### Test deep linking on Android To test the intent handling in Android (Expo client app ), run the following: @@ -76,8 +79,7 @@ adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in // for example -adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19004/--/chat/Eric" com.simpleapp - +adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/chat/Eric" com.simpleapp ``` Read the [Expo linking guide](https://docs.expo.io/versions/latest/guides/linking.html) for more information about how to configure linking in projects built with Expo.