Skip to content

add more information about deep link for expo projects #332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 29, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 54 additions & 4 deletions docs/deep-linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -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('/');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we might want to have an entirely separate section for expo projects / vanilla react native projects, and just repeat this entire code example in both sections but with the prefix line that is relevant to the platform. it's a bit cleaner when you can just pick the section relevant to you and follow that

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, thanks! I'll do that.


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

## 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 = () => <SimpleApp uriPrefix={prefix} />;
```

### iOS

Let's configure the native iOS app to open based on the `mychat://` URI scheme.
Expand Down
63 changes: 58 additions & 5 deletions website/versioned_docs/version-1.x/deep-linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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 = () => <SimpleApp uriPrefix={prefix} />;
```

## 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 = () => <SimpleApp uriPrefix={prefix} />;
```

### iOS

Let's configure the native iOS app to open based on the `mychat://` URI scheme.
Expand All @@ -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:

Expand All @@ -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:

```
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<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" android:host="mychat" />
<data android:scheme="mychat" android:host="mychat" />
</intent-filter>
```

Expand Down
62 changes: 57 additions & 5 deletions website/versioned_docs/version-2.x/deep-linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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 = () => <SimpleApp uriPrefix={prefix} />;
```

## 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 = () => <SimpleApp uriPrefix={prefix} />;
```

### iOS

Let's configure the native iOS app to open based on the `mychat://` URI scheme.
Expand Down Expand Up @@ -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:

```
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<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" android:host="mychat" />
<data android:scheme="mychat" android:host="mychat" />
</intent-filter>
```

Expand Down
62 changes: 57 additions & 5 deletions website/versioned_docs/version-3.x/deep-linking.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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 = () => <SimpleApp uriPrefix={prefix} />;
```

## 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 = () => <SimpleApp uriPrefix={prefix} />;
```

### iOS

Let's configure the native iOS app to open based on the `mychat://` URI scheme.
Expand Down Expand Up @@ -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:

```
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<intent-filter>
<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" android:host="mychat" />
<data android:scheme="mychat" android:host="mychat" />
</intent-filter>
```

Expand Down