Skip to content

Commit ba7b820

Browse files
brentvatnebrentvatne
authored
Merge pull request #332 from eriveltonelias/source
add more information about deep link for expo projects
2 parents b324302 + cdb636d commit ba7b820

File tree

4 files changed

+226
-19
lines changed

4 files changed

+226
-19
lines changed

‎docs/deep-linking.md

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,27 +29,77 @@ const SimpleApp = createAppContainer(createStackNavigator({
2929
}));
3030
```
3131

32+
## Set up with Expo projects
33+
34+
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:
35+
36+
```json
37+
{
38+
"expo": {
39+
"scheme": "mychat"
40+
}
41+
}
42+
```
43+
3244

3345
### URI Prefix
3446

3547
Next, let's configure our navigation container to extract the path from the app's incoming URI.
3648

3749
```js
50+
import * as Expo from 'expo';
51+
3852
const SimpleApp = createAppContainer(createStackNavigator({...}));
3953

40-
// on Android, the URI prefix typically contains a host in addition to scheme
41-
// on Android, note the required / (slash) at the end of the host property
42-
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
54+
const prefix = Expo.Linking.makeUrl('/');
4355

4456
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
4557
```
4658

47-
## Set up with Expo projects
59+
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.
60+
61+
### Test deep linking on iOS
62+
63+
To test the URI on the simulator in the Expo client app, run the following:
64+
65+
```
66+
xcrun simctl openurl booted [ put your URI prefix in here ]
67+
68+
// for example
69+
70+
xcrun simctl openurl booted exp://127.0.0.1:19000/--/chat/Eric
71+
```
72+
73+
### Test deep linking on Android
74+
75+
To test the intent handling in Android (Expo client app ), run the following:
76+
77+
```
78+
adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" com.simpleapp
79+
80+
// for example
81+
82+
adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19000/--/chat/Eric" com.simpleapp
83+
```
4884

4985
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.
5086

5187
## Set up with `react-native init` projects
5288

89+
### URI Prefix
90+
91+
Next, let's configure our navigation container to extract the path from the app's incoming URI.
92+
93+
```js
94+
const SimpleApp = createAppContainer(createStackNavigator({...}));
95+
96+
// on Android, the URI prefix typically contains a host in addition to scheme
97+
// on Android, note the required / (slash) at the end of the host property
98+
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
99+
100+
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
101+
```
102+
53103
### iOS
54104

55105
Let's configure the native iOS app to open based on the `mychat://` URI scheme.

‎website/versioned_docs/version-1.x/deep-linking.md

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,17 @@ const SimpleApp = StackNavigator({
3030
});
3131
```
3232

33+
## Set up with Expo projects
34+
35+
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:
36+
37+
```json
38+
{
39+
"expo": {
40+
"scheme": "mychat"
41+
}
42+
}
43+
```
3344

3445
### URI Prefix
3546

@@ -38,18 +49,56 @@ Next, let's configure our navigation container to extract the path from the app'
3849
```js
3950
const SimpleApp = StackNavigator({...});
4051

41-
// on Android, the URI prefix typically contains a host in addition to scheme
42-
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
52+
const prefix = Expo.Linking.makeUrl('/');
4353

4454
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
4555
```
4656

47-
## Set up with Expo projects
57+
### iOS
58+
59+
To test the URI on the simulator (Expo client app ), run the following:
60+
61+
```
62+
xcrun simctl openurl booted [ put your URI prefix in here ]
63+
64+
// for example
65+
66+
xcrun simctl openurl booted exp://127.0.0.1:19004/--/chat/Eric
67+
68+
```
69+
70+
71+
### Android
72+
73+
To test the intent handling in Android (Expo client app ), run the following:
74+
75+
```
76+
adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" com.simpleapp
77+
78+
// for example
79+
80+
adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19004/--/chat/Eric" com.simpleapp
81+
82+
```
4883

4984
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.
5085

5186
## Set up with `react-native init` projects
5287

88+
### URI Prefix
89+
90+
Next, let's configure our navigation container to extract the path from the app's incoming URI.
91+
92+
```js
93+
const SimpleApp = StackNavigator({...}));
94+
95+
// on Android, the URI prefix typically contains a host in addition to scheme
96+
// on Android, note the required / (slash) at the end of the host property
97+
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
98+
99+
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
100+
```
101+
53102
### iOS
54103

55104
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`:
71120

72121
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.
73122

74-
![Xcode project info URL types with mychat added](./assets/deep-linking/xcode-linking.png)
123+
![Xcode project info URL types with mychat added](/docs/assets/deep-linking/xcode-linking.png)
75124

76125
Now you can press play in Xcode, or re-build on the command line:
77126

@@ -94,11 +143,15 @@ To configure the external linking in Android, you can create a new intent in the
94143
In `SimpleApp/android/app/src/main/AndroidManifest.xml`, add the new `VIEW` type `intent-filter` inside the `MainActivity` entry:
95144

96145
```
146+
<intent-filter>
147+
<action android:name="android.intent.action.MAIN" />
148+
<category android:name="android.intent.category.LAUNCHER" />
149+
</intent-filter>
97150
<intent-filter>
98151
<action android:name="android.intent.action.VIEW" />
99152
<category android:name="android.intent.category.DEFAULT" />
100153
<category android:name="android.intent.category.BROWSABLE" />
101-
<data android:scheme="mychat" android:host="mychat" />
154+
<data android:scheme="mychat" android:host="mychat" />
102155
</intent-filter>
103156
```
104157

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

Lines changed: 57 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,17 @@ const SimpleApp = createStackNavigator({
3030
});
3131
```
3232

33+
## Set up with Expo projects
34+
35+
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:
36+
37+
```json
38+
{
39+
"expo": {
40+
"scheme": "mychat"
41+
}
42+
}
43+
```
3344

3445
### URI Prefix
3546

@@ -38,19 +49,56 @@ Next, let's configure our navigation container to extract the path from the app'
3849
```js
3950
const SimpleApp = createStackNavigator({...});
4051

41-
// on Android, the URI prefix typically contains a host in addition to scheme
42-
// on Android, note the required / (slash) at the end of the host property
43-
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
52+
const prefix = Expo.Linking.makeUrl('/');
4453

4554
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
4655
```
4756

48-
## Set up with Expo projects
57+
### iOS
58+
59+
To test the URI on the simulator (Expo client app ), run the following:
60+
61+
```
62+
xcrun simctl openurl booted [ put your URI prefix in here ]
63+
64+
// for example
65+
66+
xcrun simctl openurl booted exp://127.0.0.1:19004/--/chat/Eric
67+
68+
```
69+
70+
71+
### Android
72+
73+
To test the intent handling in Android (Expo client app ), run the following:
74+
75+
```
76+
adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" com.simpleapp
77+
78+
// for example
79+
80+
adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19004/--/chat/Eric" com.simpleapp
81+
82+
```
4983

5084
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.
5185

5286
## Set up with `react-native init` projects
5387

88+
### URI Prefix
89+
90+
Next, let's configure our navigation container to extract the path from the app's incoming URI.
91+
92+
```js
93+
const SimpleApp = createStackNavigator({...});
94+
95+
// on Android, the URI prefix typically contains a host in addition to scheme
96+
// on Android, note the required / (slash) at the end of the host property
97+
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
98+
99+
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
100+
```
101+
54102
### iOS
55103

56104
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
95143
In `SimpleApp/android/app/src/main/AndroidManifest.xml`, add the new `intent-filter` inside the `MainActivity` entry with a `VIEW` type action:
96144

97145
```
146+
<intent-filter>
147+
<action android:name="android.intent.action.MAIN" />
148+
<category android:name="android.intent.category.LAUNCHER" />
149+
</intent-filter>
98150
<intent-filter>
99151
<action android:name="android.intent.action.VIEW" />
100152
<category android:name="android.intent.category.DEFAULT" />
101153
<category android:name="android.intent.category.BROWSABLE" />
102-
<data android:scheme="mychat" android:host="mychat" />
154+
<data android:scheme="mychat" android:host="mychat" />
103155
</intent-filter>
104156
```
105157

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

Lines changed: 57 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,17 @@ const SimpleApp = createAppContainer(createStackNavigator({
3030
}));
3131
```
3232

33+
## Set up with Expo projects
34+
35+
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:
36+
37+
```json
38+
{
39+
"expo": {
40+
"scheme": "mychat"
41+
}
42+
}
43+
```
3344

3445
### URI Prefix
3546

@@ -38,19 +49,56 @@ Next, let's configure our navigation container to extract the path from the app'
3849
```js
3950
const SimpleApp = createAppContainer(createStackNavigator({...}));
4051

41-
// on Android, the URI prefix typically contains a host in addition to scheme
42-
// on Android, note the required / (slash) at the end of the host property
43-
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
52+
const prefix = Expo.Linking.makeUrl('/');
4453

4554
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
4655
```
4756

48-
## Set up with Expo projects
57+
### iOS
58+
59+
To test the URI on the simulator (Expo client app ), run the following:
60+
61+
```
62+
xcrun simctl openurl booted [ put your URI prefix in here ]
63+
64+
// for example
65+
66+
xcrun simctl openurl booted exp://127.0.0.1:19004/--/chat/Eric
67+
68+
```
69+
70+
71+
### Android
72+
73+
To test the intent handling in Android (Expo client app ), run the following:
74+
75+
```
76+
adb shell am start -W -a android.intent.action.VIEW -d "[ put your URI prefix in here ]" com.simpleapp
77+
78+
// for example
79+
80+
adb shell am start -W -a android.intent.action.VIEW -d "exp://127.0.0.1:19004/--/chat/Eric" com.simpleapp
81+
82+
```
4983

5084
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.
5185

5286
## Set up with `react-native init` projects
5387

88+
### URI Prefix
89+
90+
Next, let's configure our navigation container to extract the path from the app's incoming URI.
91+
92+
```js
93+
const SimpleApp = createAppContainer(createStackNavigator({...}));
94+
95+
// on Android, the URI prefix typically contains a host in addition to scheme
96+
// on Android, note the required / (slash) at the end of the host property
97+
const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://';
98+
99+
const MainApp = () => <SimpleApp uriPrefix={prefix} />;
100+
```
101+
54102
### iOS
55103

56104
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
95143
In `SimpleApp/android/app/src/main/AndroidManifest.xml`, add the new `intent-filter` inside the `MainActivity` entry with a `VIEW` type action:
96144

97145
```
146+
<intent-filter>
147+
<action android:name="android.intent.action.MAIN" />
148+
<category android:name="android.intent.category.LAUNCHER" />
149+
</intent-filter>
98150
<intent-filter>
99151
<action android:name="android.intent.action.VIEW" />
100152
<category android:name="android.intent.category.DEFAULT" />
101153
<category android:name="android.intent.category.BROWSABLE" />
102-
<data android:scheme="mychat" android:host="mychat" />
154+
<data android:scheme="mychat" android:host="mychat" />
103155
</intent-filter>
104156
```
105157

0 commit comments

Comments
 (0)