diff --git a/docs/deep-linking.md b/docs/deep-linking.md index 53f04bff317..07f5de654c0 100644 --- a/docs/deep-linking.md +++ b/docs/deep-linking.md @@ -29,27 +29,77 @@ const SimpleApp = createAppContainer(createStackNavigator({ })); ``` +## Set up with Expo projects + +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 +{ + "expo": { + "scheme": "mychat" + } +} +``` + ### 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({...})); -// 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 prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` -## Set up with Expo projects +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 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:19000/--/chat/Eric +``` + +### Test deep linking on 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: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. ## 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 6b42be6b141..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,18 +49,56 @@ 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 -const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'; +const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` -## Set up with Expo projects +### 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 +### 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. @@ -71,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: @@ -94,11 +143,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..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,19 +49,56 @@ 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://'; +const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` -## Set up with Expo projects +### 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 +### 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. @@ -95,11 +143,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..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,19 +49,56 @@ 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://'; +const prefix = Expo.Linking.makeUrl('/'); const MainApp = () => ; ``` -## Set up with Expo projects +### 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 +### 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. @@ -95,11 +143,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: ``` + + + + - + ```